Extensiones de Google Chrome: no se pueden cargar imágenes locales con CSS

Tengo una extensión de Chrome simple que usa la función de secuencia de comandos de contenido para modificar un sitio web. Más concretamente, el background-imagede dicho sitio web.

Por alguna razón, parece que no puedo usar imágenes locales, a pesar de que están empaquetadas en la extensión.

body {
    background: #000 url('image.jpg') !important;
    background-repeat: repeat !important;
}

Eso es todo, el CSS más simple ... pero no funcionará. El navegador no carga la imagen.

La URL de tu imagen debería verse así chrome-extension://<EXTENSION_ID>/image.jpg

Sería mejor reemplazar css a través de javascript. De los documentos :

//Code for displaying <extensionDir>/images/myimage.png:
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;

Chrome tiene soporte i18n que brinda la capacidad de hacer referencia a su extensión en su CSS. Mantengo mis imágenes en una carpeta de imágenes en la extensión, así que haga referencia a los activos en el CSS así:

background-image:url('chrome-extension://__MSG_@@extension_id__/images/main.png');

Hay muchas respuestas y soluciones antiguas para esta pregunta.

En agosto de 2015 (utilizando Chrome 45 y Manifest versión 2), la "práctica recomendada" actual para vincular imágenes locales dentro de las extensiones de Chrome es el siguiente enfoque.

1) Enlace al activo en su CSS usando una ruta relativa a la carpeta de imágenes de su extensión:

.selector {
    background: url('chrome-extension://__MSG_@@extension_id__/images/file.png');
}

2) Agregue el activo individual a la sección web_accessible_resources del archivo manifest.json de su extensión :

"web_accessible_resources": [
  "images/file.png"
]

Nota: este método es adecuado para algunos archivos, pero no se adapta bien a muchos archivos.

En cambio, un mejor método es aprovechar el soporte de Chrome para patrones de coincidencia para incluir en la lista blanca todos los archivos dentro de un directorio determinado:

{
    "name": "Example Chrome Extension",
    "version": "0.1",
    "manifest_version": 2,
    ...    
    "web_accessible_resources": [
      "images/*"
    ]
}

El uso de este enfoque le permitirá utilizar imágenes de forma rápida y sin esfuerzo en el archivo CSS de su extensión de Chrome utilizando métodos compatibles de forma nativa.

Una opción sería convertir su imagen a base64:

y luego ponga los datos directamente en su css como:

body { background-image: url(data:image/png;base64,iVB...); }

Si bien es posible que este no sea un enfoque que le gustaría utilizar al desarrollar regularmente una página web , es una excelente opción debido a algunas de las limitaciones de la creación de una extensión de Chrome.

Mi solución.

Con Menifest v2, debe agregarlo web_accessible_resourcesal archivo y luego usarlo chrome-extension://__MSG_@@extension_id__/images/pattern.pngcomo URL en su archivo css.

CSS:

 #selector {
      background: #fff url('chrome-extension://__MSG_@@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"
     ]
}

ps Su manifest.json puede verse diferente a este.

Esta versión de CSS solo funciona en el entorno de extensión (página de la aplicación, página emergente, página de fondo, página de opciones) , así como en el archivo CSS content_scripts.

En el archivo .less, siempre establezco una variable al principio:

@extensionId : ~"__MSG_@@extension_id__";

Luego, más tarde, si desea hacer referencia a imágenes similares a extension-local-resource, use:

.close{
    background-image: url("chrome-extension://@{extensionId}/images/close.png");
}

Una cosa a mencionar es que en web_accessible_resources puede usar comodines. Entonces en lugar de

"images / pattern.png"

Puedes usar

"imágenes / *"

Solo para aclarar, de acuerdo con la documentación , todos los archivos de una extensión también son accesibles mediante una URL absoluta como esta:

extensión-chrome: // <extensionID>/<pathToFile>

Tenga en cuenta que <extensionID>es un identificador único que genera el sistema de extensión para cada extensión. Puede ver los ID de todas sus extensiones cargadas yendo a la URL chrome: // extensions . los<pathToFile> es la ubicación del archivo en la carpeta superior de la extensión; es lo mismo que la URL relativa.

...

Cambiar la imagen de fondo en CSS:

#id{background-image: url (" chrome-extension://<extensionID>/<pathToFile>"); }

Cambiar la imagen de fondo en CSS a través de JavaScript:

document.getElementById (' id') .style.backgroundImage = "url ('chrome-extension: // <extensionID>/ <pathToFile>')");

Cambiar la imagen de fondo en CSS a través de jQuery:

$ (" #id") .css ("imagen de fondo", "url ('chrome-extension: // <extensionID>/ <pathToFile>')");