Question

60

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

rated 0 times [ 62] [ 2] / answers: 1 / hits: 71860 / 12 Years ago, thu, july 19, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

devane

Add To Favorites

Follow

Total Points: 451

Total Questions: 88

Total Answers: 100

Location: India

Member since Wed, Aug 26, 2020

4 Years ago

answered 12 Years ago lizet · Accepted Answer

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.