65

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.

Community
  • 1
  • 1
Roman
  • 5,358
  • 9
  • 34
  • 43

2 Answers2

122

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.

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
  • 3
    But I need to do some things related to this style sheet in JavaScript, so it's not a solution in my case. – Roman Jul 19 '12 at 05:34
  • 2
    Actually, the code shown in the question, would not generate that error, at least on the latest Chrome *release* (20). Something's missing. Is "fix.css" an actual file? Where's it located? Link to the full extension code. What version of Chrome are you using? ... Adding to the add to the manifest's permissions should work irregardless (the first link). Did you try that? – Brock Adams Jul 19 '12 at 05:35
  • Here's the source code - [https://github.com/Tsukanov/CleanTube/tree/activation-feature](https://github.com/Tsukanov/CleanTube/tree/activation-feature). I tested it in versions 20 and 22, got the same result. And I'm not sure what to add in manifest. – Roman Jul 19 '12 at 05:50
  • 3
    I tried to add `"web_accessible_resources": [ "fix.css" ]` and it worked. Thanks for your suggestions. – Roman Jul 19 '12 at 06:26
  • 1
    Will injecting CSS in this manner mess up with the CSS of the webpage? – Amal Antony Nov 24 '18 at 14:08
  • @AmalAntony, it can if you are not careful. But it's normally not a big problem if you understand the CSS cascade and/or "scope" your CSS as much as possible. – Brock Adams Nov 24 '18 at 17:46
  • how would i load sass? – chovy Mar 02 '19 at 03:02
  • @chovy, you need to ask a new question for that. – Brock Adams Mar 02 '19 at 03:29
  • if the file is exist... would be it okay if value of href become : chrome.extension.getURL("template/jquery-ui.css"); ? – gumuruh Sep 12 '19 at 11:47
  • @gumuruh, See https://developer.chrome.com/extensions/extension#method-getURL. Ask a new question if you need to. – Brock Adams Sep 12 '19 at 14:23
  • this is so great. I didn't have to create a link element using `document.createElement("link");`. Simply adding the `web_accessible_resources` & `content_scripts.css` worked for me – Gangula Sep 17 '22 at 17:14
0

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.

shivansh shrivastava
  • 125
  • 3
  • 9