Come iniettare CSS usando il file di script del contenuto nell'estensione di Chrome?

Question

Sto cercando di iniettare il mio CSS da JavaScript che viene iniettato come la trascrizione dei contenuti:

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

Ho trovato similar question circa l'iniezione di CSS, ma ho riscontrato un problema durante l'utilizzo di codice accepted answer. Ecco il mio script.js contenuti:

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

Quando si carica un po 'di pagina appare questo messaggio nella console:

Negare carico di cromo-extension: //phkgaaiaakklogbhkdnpjncedlbamani/fix.css. Le risorse devono essere elencate nella chiave manifest web_accessible_resources nell'ordine per essere caricate da pagine esterne all'estensione.

C'è un modo per risolvere questo problema? O forse un altro modo per iniettare un CSS da quel file JavaScript?

Nota: non riesco a includere il foglio di stile direttamente da manifest.

Answer 1

È possibile aggiungere al campo permessi manifest; Vedi web_accessible_resources. Quindi si dovrebbe aggiungere questo per il manifesto:

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

---

Vedi anche "Programmatic injection". e insertCSS().

Per la maggior parte delle applicazioni, dimenticare tutto quello che il codice createElement e basta aggiungere il file CSS per il manifesto:

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

anche se capisco che non si vuole fare che in questo caso preciso.