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.