javascript - extension - https://chrome:inspect

¿Cómo inyectar CSS usando el archivo de script de contenido en la extensión de Chrome?

Question

Estoy tratando de inyectar mi CSS desde JavaScript que se inyecta como script de contenido:

"content_scripts": [
   {
      "matches": ["http://www.google.com/*"],
      "js": ["script.js"]
   }
],

Encontré una pregunta similar sobre la inyección de CSS, pero encontré un problema al usar el código de la respuesta aceptada . Aquí está el contenido de mi script.js :

var link = document.createElement("link");
link.href = chrome.extension.getURL("style.css");
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

Después de cargar alguna página, este mensaje aparece en la consola:

Negando la carga de la extensión de cromo: //phkgaaiaakklogbhkdnpjncedlbamani/fix.css. Los recursos se deben enumerar en la clave de manifiesto web_accessible_resources para poder ser cargados por páginas fuera de la extensión.

¿Hay alguna forma de arreglar esto? O, tal vez, ¿alguna otra forma de inyectar un CSS desde ese archivo JavaScript?

Nota: No puedo incluir la hoja de estilo directamente desde el manifiesto.

Answer 1

Usted podría agregar al campo de permisos del manifiesto; Ver web_accessible_resources . Así que añadirías esto al manifiesto:

    , "web_accessible_resources": [
        "fix.css"
    ]

Ver también "Inyección programática" . y insertCSS() .

Para la mayoría de las aplicaciones, olvide todo ese código createElement y simplemente agregue el archivo CSS al manifiesto:

"content_scripts": [
   {
      "matches":    ["http://www.google.com/*"],
      "css":        ["fix.css"],
      "js":         ["script.js"]
   }
],

aunque entiendo que no quieres hacer eso en esta instancia exacta.