Cómo inyectar CSS utilizando 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 un script contenido:

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

He encontrado similar question sobre la inyección de CSS, pero me encontré con un problema al utilizar el código de accepted answer. Aquí está mi script.js contenidos:

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 aparece este mensaje en la consola:

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

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

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

Answer 1

Puede agregar al campo de permisos del manifiesto; Ver web_accessible_resources. Por lo tanto, deberá añadir esto a la manifiesta:

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

---

Ver también "Programmatic injection". y insertCSS().

Para la mayoría de las aplicaciones, olvidar todo ese código createElement y sólo tiene que añadir el archivo CSS para el manifiesto:

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

aunque entiendo que usted no quiere hacer eso en este caso exacta.