Mi CSS no se está inyectando a través de mi script de contenido

Puede alguien explicarme esto. Intento insertar un archivo CSS en una página web usando el content_script con las extensiones de Google, pero mi archivo css nunca se agrega a la página web. ¿Puede alguien decirme lo que estoy haciendo mal y ayudarme a solucionarlo? Gracias

Manifiesto:

{ "name": "Extension", "version": "0", "description": "", "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"], "content_scripts": [ { "matches": [ "http://*/*", "https://*/*", "file:///*/*"], "css": ["myStyles.css"], "js": ["myScript.js"], "all_frames": true } ] } 

myStyles.css

 #test { margin: 0 10px; background: #fff; padding: 3px; color: #000; } 

La hoja de estilo se inyecta, pero no se aplica, porque otros estilos anulan las reglas. Para que las reglas funcionen, tienes algunas opciones:

  1. Aumenta la especificidad de tus reglas de CSS.
  2. Sufija cada regla con !important :

     #test { margin: 0 10px !important; background: #fff !important; padding: 3px !important; color: #000 !important; } 
  3. Inyectar el CSS a través de un script de contenido:

    myScript.js :

     var style = document.createElement('link'); style.rel = 'stylesheet'; style.type = 'text/css'; style.href = chrome.extension.getURL('myStyles.css'); (document.head||document.documentElement).appendChild(style); 

    manifest.json

     { "name": "Extension", "version": "0", "description": "", "manifest_version": 2, "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"], "content_scripts": [ { "matches": [ "http://*/*", "https://*/*", "file:///*/*"], "js": ["myScript.js"], "all_frames": true } ], "web_accessible_resources": ["myStyles.css"] } 

    La última clave, web_accessible_resources es necesaria cuando la versión manifiesta 2 está activa, por lo que el archivo CSS se puede leer desde una página que no sea de extensión.

    Intereting Posts