50

I do not know how to inject CSS into a webpage through a Chrome extension. I am trying to inject this into a web page:

body {
   background: #000 !important;
}

a {
   color: #777 !important;
}

Here is my manifest.json:

{
"update_url":"http://clients2.google.com/service/update2/crx",
  "name": "Test Extension",
  "version": "1.0",
  "description": "This is a test extension for Google Chrome.",
  "icons": { "16": "icon16.png",
           "48": "icon48.png",
          "128": "icon128.png" },
  "background_page": "background.html",
  "browser_action": {
    "default_icon": "icon19.png"
  },
  "content_scripts": [
    {
      "matches": ["http://test-website.com/*"], 
      "js": ["js/content-script.js"]
    }
  ],

    "permissions": [ "tabs", "http://test-website.com/*" ]

}
k0pernikus
  • 60,309
  • 67
  • 216
  • 347
timmya
  • 623
  • 1
  • 6
  • 5

4 Answers4

86

You can have to add an extra line in your manifest file:

"content_scripts": [
    {
      "matches": ["http://test-website.com/*"], 
      "js": ["js/content-script.js"],
      "css" : ["yourcss.css"]
    }
],

The CSS file as defined in "css": ["..."]will be added to every page which matches the location as mentioned in matches.

If you're developing a Chrome extension, make sure that you have a look at these pages:

  1. Developer's guide
Ben Cull
  • 9,434
  • 7
  • 43
  • 38
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • Any idea on how this would work with a chrome app wrapper and not extension? The manifest is a little different and adding the content_scripts section doesn't seem to produce any result. – CU3ED Feb 09 '18 at 22:45
  • Nice answer! CSS can be injected in content_script is awesome! – JChen___ Dec 13 '21 at 03:19
  • You also need to add the css file under `web_accessible_resources` in `manifest.json`. Reference: https://stackoverflow.com/a/11554116/6908282 – Gangula Sep 17 '22 at 19:43
27

You can also inject a css file into one or more tab's content by using the following syntax as detailed on the Chrome Tabs API webpage:

chrome.tabs.insertCSS(integer tabId, object details, function callback);

You will first need the ID of your target tab, of course.

The Chrome Extension documentation doesn't discuss how the injected CSS is interpreted, but the fact is that CSS files that are injected into a webpage, by this method or by including them in the manifest, are interpreted as user stylesheets.

In this respect, it is important to note that if you do inject stylesheets by using these methods, they will be limited in one crucial way ( at least, as of Chrome v.19 ): Chrome ignores "!important" directives in user stylesheets. Your injected style rules will be trumped by anything included in the page as it was authored.

One work-around, if you want to avoid injecting inline style rules, is the following (I'm using jQuery for the actual insertion, but it could be done with straight Javascript):

$(document).ready(function() {
var path = chrome.extension.getURL('styles/myExtensionRulz.css');
$('head').append($('<link>')
    .attr("rel","stylesheet")
    .attr("type","text/css")
    .attr("href", path));
});

You can then put the stylesheet in your extension's styles folder, but you won't need to list it anywhere on the manifest. The relevant part above is that you will use the chrome API to get your stylesheet's URL, then plug that in as the link's href value. Now, your stylesheet will be given a higher precedence, and you can use the "!important" directive where needed.

This is the only solution that works for me in the latest version of Chrome.

jCyCle
  • 466
  • 4
  • 7
  • This is a good workaround to resolve this [Bug 1417569](https://bugzilla.mozilla.org/show_bug.cgi?id=1417569) on Firefox. – beaver Feb 08 '18 at 10:29
1

Looks like chrome.tabs.insertCSS is depreciated you should be using.

https://developer.chrome.com/docs/extensions/reference/scripting/

This is what I am doing.

let [tab] = await chrome.tabs.query({
    active: true,
    currentWindow: true
});
chrome.scripting.insertCSS({
        target: {
            tabId: tab.id
        },
        files: ["button.css"],
    },
    () => {
        chrome.scripting.executeScript({
            target: {
                tabId: tab.id
            },
            function: doSomething,
        });
    });
user1503606
  • 3,872
  • 13
  • 44
  • 78
0

It's not that hard. you can use this:

{
  "update_url": "http://clients2.google.com/service/update2/crx",
  "name": "Test Extension",
  "version": "1.0",
  "description": "This is a test extension for Google Chrome.",
  "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" },
  "background_page": "background.html",
  "host_permissions": ["*://test-website.com/*"],
  "browser_action": {
    "default_icon": "icon19.png"
  },
  "content_scripts": [
    {
      "matches": ["http://test-website.com/*", "https://test-website.com/*"],
      "js": ["js/content-script.js"],
      "css": ["css/styles.css"]
    }
  ]
}
Awsomedog7
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 05 '23 at 14:03