Wie kann CSS mit einer Inhaltsskriptdatei in der Chrome-Erweiterung eingefügt werden?

Question

Ich versuche, meine CSS von JavaScript zu injizieren, die als Content-Skript injiziert wird:

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

fand ich similar question über CSS Injektion, aber ich stieß auf ein Problem, während Code aus accepted answer verwenden. Hier ist mein script.js Inhalt:

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

Nachdem ich einige Seite dieser Meldung in der Konsole erscheint laden:

Verweigern Belastung von Chrom-Erweiterung: //phkgaaiaakklogbhkdnpjncedlbamani/fix.css. Die Ressourcen müssen im Manifestschlüssel web_accessible_resources in der Reihenfolge aufgeführt sein, damit sie von Seiten außerhalb der Erweiterung geladen werden.

Gibt es eine Möglichkeit, dies zu beheben? Oder, vielleicht, eine andere Möglichkeit, ein CSS aus dieser JavaScript-Datei zu injizieren?

Hinweis: Ich kann Stylesheet nicht direkt aus dem Manifest einschließen.

Answer 1

Sie können zum Berechtigungsfeld des Manifests hinzufügen; Siehe web_accessible_resources. Also würde man dies das Manifest hinzufügen:

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

---

Siehe auch "Programmatic injection". und insertCSS().

Für die meisten Anwendungen vergessen, dass alle createElement Code und nur die CSS-Datei in das Manifest hinzufügen:

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

obwohl ich verstehe, dass Sie, dass genau in dieser Instanz nicht verzichten wollen.