usar una trucos teclado pagina inspeccionar guardar google elementos elemento editar consola con como chrome cambios css google-chrome-extension background-image

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



inspeccionar elemento google chrome (9)

Chrome tiene soporte para i18n que brinda la posibilidad de hacer referencia a tu extensión en tu CSS. Guardo mis imágenes en una carpeta de imágenes en la extensión, por lo que los activos de referencia en el CSS son así:

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

Tengo una extensión simple de Chrome que usa la característica de script de contenido para modificar un sitio web. Más específicamente, la background-image de background-image de 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.

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 configuro una variable al principio:

@extensionId : ~"__MSG_@@extension_id__";

Luego, más adelante, si desea referirse a las imágenes similares a extension-local-resource, use:

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

Hay muchas respuestas y soluciones antiguas a esta pregunta.

A partir de agosto de 2015 (utilizando Chrome 45 y Manifest versión 2), la "mejor práctica" actual para vincular las 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 elemento 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 escala bien con muchos archivos.

En cambio, un método mejor 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á usar imágenes de forma rápida y sin esfuerzo en el archivo CSS de su extensión de Chrome utilizando métodos nativos.

La URL de la imagen debe verse como chrome-extension://<EXTENSION_ID>/image.jpg

Sería mejor que reemplazaras css a través de javascript. De docs :

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

Mi solución.

Con Menifest v2 necesitas agregar web_accessible_resources al archivo y luego usar chrome-extension://__MSG_@@extension_id__/images/pattern.png como la url en tu 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 ser diferente a este.

Si desea probar la imagen local en el sitio en vivo, puede ejecutar un servidor web local y establecer una URL como http://127.0.0.1:8123/img.jpg en la página usando DevTools

Hay diferentes formas de ejecutar un servidor web:

  1. Extensión para el navegador "Servidor web para Chrome" con la carpeta definida https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

  2. Si tiene python, ejecute el servidor http incrustado en la carpeta elegida

    python3 -m http.server 8123 # python 3 versión
    python -m SimpleHTTPServer 8123 # python 2 versión

  3. Utilice un servidor preparado para producción como nginx , apache

También probé la marca de inicio de Chrome --allow-file-access-from-files pero no funcionaba para mi versión 52.0.2743.116 y es peligrosa e insegura. Los documentos que se originan desde cualquier lugar, local o web, no deben, de manera predeterminada, tener acceso a los archivos locales: /// recursos.

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

chrome-extension: // <extensionID> / <pathToFile>

Tenga en cuenta que <extensionID> es un identificador único que el sistema de extensión genera para cada extensión. Puede ver los ID de todas sus extensiones cargadas yendo a la URL chrome: // extensions . El <pathToFile> es la ubicación del archivo debajo de 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 ") #id ("background-image", "url (''chrome-extension: // <extensionID> / <pathToFile> '')");

Una cosa para mencionar es que en web_accessible_resources puedes usar comodines. Entonces, en lugar de

"images / pattern.png"

Puedes usar

"imágenes / *"