javascript - How to inject CSS into webpage through Chrome extension?

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