How to inject CSS using content script file in Chrome extension?

Question

I'm trying to inject my CSS from JavaScript which is injected as content script:

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

I found similar question about injecting CSS, but I encountered a problem while using code from accepted answer. Here's my script.js contents:

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

After I load some page this message appears in console:

Denying load of chrome-extension://phkgaaiaakklogbhkdnpjncedlbamani/fix.css. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

Is there any way to fix this? Or, maybe, some other way to inject a CSS from that JavaScript file?

Note: I can't include style sheet directly from manifest.

Answer 1

You could add to the manifest's permissions field; See web_accessible_resources. So you would add this to the manifest:

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

---

See also "Programmatic injection". and insertCSS().

For most applications, forget all that createElement code and just add the CSS file to the manifest:

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

although I understand that you don't want to do that in this exact instance.