如何通过 Chrome 扩展将 CSS 注入网页？

Question

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/*" ]

}

Answer 1

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
   • Manifest files
   • Content scripts
   • Background pages

Answer 2

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.

Answer 3

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