página - modificar hoja de estilos css de un iframe

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

Question

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

Answer 1

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.