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


98

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.


2
¿Por qué la extensión pensaría que la URL ('image.jpg') es local? ¿No necesitarías un camino completo?
Traingamer

Respuestas:


70

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;

7
@Salem Porque, de lo contrario, necesitaría codificar su ID de extensión en css.
serg

No quiero ser tonto, pero ¿por qué es un problema?
Salem

4
@Salem Sería inconveniente desarrollar como ID de extensión descomprimido y subido a la galería, uno tiene diferentes ID. No es el fin del mundo, solo inconvenientes y una especie de mala práctica, como por ejemplo, codificar archivos absolutos en el código.
serg

Ah, tiene sentido. Lo aprecio.
Salem

Dado que esta es la respuesta aceptada, debería ver un comentario sobre la otra respuesta en la que se mencionó cómo incluir web_accessible_resources en su archivo de manifiesto para acceder a fuentes e imágenes locales.
Aryan Firouzian

254

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');

4
Muy buena. Esta es una gran solución y de hecho funciona tanto para extensiones empaquetadas como no empaquetadas, gracias por compartir un consejo realmente genial.
Richard Hollis

40
Gracias, esto es exactamente lo que estaba buscando. Solo una nota a pie de página: recuerde que debe declarar sus activos como web_accessible_resources en su archivo de manifiesto (como se explica aquí: code.google.com/chrome/extensions/… ). De lo contrario, no se
cargarán

2
¡Una cosa me di cuenta! ¡Nunca pienses que la respuesta aceptada es la única solución correcta para esa pregunta! Tenía miedo de tener que hacer hardcode cuando vi la respuesta aceptada, pero después de verte responder me dije a mí mismo que este tipo me salvó el día. ;-)
Rafique Mohammed

Esta es casi siempre la mejor forma de hacerlo. CSS puro frente a la combinación de Javascirpt y CSS en la respuesta @serg. Esta debería ser la respuesta aceptada en mi opinión.
Jeremy Zerr

El enlace de @ ariera está aquí ahora: developer.chrome.com/extensions/manifest/…
Ben

41

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.


22

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.


1
Prefiero esta opción. No estoy de acuerdo con que Google tenga razón al sugerir inyectar todas las imágenes mediante el enfoque mencionado anteriormente. El enfoque de base64 también es más rápido. +1 !!!
Skone

20

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.


8

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");
}

7

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

"images / pattern.png"

Puedes usar

"imágenes / *"


4

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>')");

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.