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

user_272770 0
Viewed 66617

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.

content-script google-chrome-extension javascript
2 Answers

You can use element.classList.add("my_new_class") to add new class in the element and in css you can style that element by using the newly added class. So onClick only the class is going to be added and then only css for that element will run.

user_117182880
Related