Extensión relativa a la extensión de Google Chrome

Estoy desarrollando una extensión de google chrome y me encuentro con un problema de ruta relativa. Si doy una ruta relativa a una imagen y abro el complemento en una página determinada, buscará esa imagen en la ruta del sitio web en lugar de la extensión.Extensión relativa a la extensión de Google Chrome

¿Alguna idea?

Fuente

2010-10-18 ForeignerBR

Publica un ejemplo. Esto normalmente funciona. – bzlm

He aquí un ejemplo: Imagen de fondo: url ('sprites.png') el error: No se pudo cargar de recursos: el servidor responde con el estado 404 (no encontrado) sprites.png Si utilizo una ruta absoluta como, chrome-extensions: // pfionnbgiepoddidhifofhiijoojachg/images, encuentra la imagen sin problemas. – ForeignerBR

Si está usando CSS en sus páginas de extensión (fondo, emergente, la barra de información, etc.), puede utilizar rutas relativas con una barra (/):

background-image:url("/sprites.png");

lo anterior debe funcionar, todo el mundo utiliza eso. Sin embargo, si el uso es para los guiones de contenido y se puede hacer lo mismo para cualquier CSS, lo que tendría que utilizar el predefined message como:

background-image:url('chrome-extension://[email protected]@extension_id__/sprites.png');

Si desea establecer mediante programación, puede utilizar la sintaxis chrome.extension.getURL como siguiente:

var url = chrome.extension.getURL('sprites.png');

Estas son las formas en que puede hacer referencia a una url/imagen específica.

Además, como mentioned in this answer, si coloca los activos de su imagen en un directorio, estos archivos no son accesibles en la página web DOM automáticamente. El desarrollador debe especificar los recursos que se pueden cargar en la página utilizando la configuración "web_accessible_resources" en el archivo manifest.json:

Fuente

2010-10-18 20:42:00

déjame ver si entiendo, solo puedo usar rutas relativas en mi entorno, ventana emergente, barra de información y otras páginas como esa.Si me refiero a una imagen en un script de contenido o css, debo usar un mensaje predefinido como se explicó anteriormente. ¿Es eso correcto? – ForeignerBR

Sí, suena bien. –

NB: Actualmente, esta técnica no funcionará para los archivos CSS del script de contenido, ya que no pueden usar mensajes predefinidos como @@ extension_id. Para obtener más información, consulte el error 39899 (http://crbug.com/39899) –

@ la respuesta de mohamed funcionó, pero me tomó un tiempo reunir todo. He respondido este otro, pero aquí está la solución que funcionó para mí.

Mi solución.

Con Menifest v2 necesita agregar web_accessible_resources al archivo y luego usar chrome-extension://[email protected]@extension_id__/images/pattern.png como la url en su archivo css.

CSS:

#selector { 
     background: #fff url('chrome-extension://[email protected]@extension_id__/images/pattern.png'); 
}

manifest.json

{ 
    "manifest_version": 2, 

    "name": "My Extension Name", 
    "description": "My Description", 
    "version": "1.0", 

    "content_scripts": [ 
     { 
     "matches": ["https://mydomain.com/*"], 
     "css": ["style.css"] 
     } 
    ], 

    "permissions": [ 
    "https://mydomain.com/" 
    ], 
    "browser_action": { 
     "default_icon": {      
      "19": "images/icon19.png",   
      "38": "images/icon38.png"   
     }, 
     "default_title": "My Extension Name" 
    }, 
    "web_accessible_resources": [ 
     "images/pattern.png" 
    ] 
}

P. S. Su manifest.json puede verse diferente a este.

Fuente

2013-02-20 08:07:43 Foxinni

En algunos casos, es posible que incluso utilice la codificación base64 en línea de la imagen. Por ejemplo,

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB..." />

Lo mismo que puede aplicar a su CSS. Puede encontrar codificadores de imágenes en toda la web.

Fuente

2017-01-20 12:20:35 zoxxx

Extensión relativa a la extensión de Google Chrome

Respuesta

Cuestiones relacionadas