CODEWITHSUNDEEP
cssgoogle-chromegoogle-chrome-extension
mellis481
mellis481

Reputation: 4168

Adding CSS file to Chrome extension manifest not working

I'm attempting to get an external CSS file to load in Chrome. To do this, it would seem I have to edit an existing Chrome extension's manifest.json file and minimally add the following to the content_scripts node:

{
  "css": [ "Theme.css" ]
}

From what I understand, this will add the Theme.css file (which is in the same root directory as the manifest.json file) to all pages accessed in Chrome. I saw that I could additionally qualify the json block by including a matches key-value pair, but I've omitted that here.

This doesn't appear to be working because I'm not seeing the styles. To start, my Theme.css file contains this:

span {
    color: green !important;
}

Additionally, I've confirmed that the extension I added it to (AngularJS Batarang FWIW) is recognized as "Enabled" by Chrome.

I also tried the solution explained here where you load the CSS as an accessible resource via a JS file, but that doesn't work either.

What am I missing? Or is there an easier way to do this?

FWIW: here is the entire manifiest:

{
   "background": {
      "scripts": [ "background.js" ]
   },
   "content_scripts": [ {
      "js": [ "inject.js" ],
      "matches": [ "<all_urls>" ],
      "run_at": "document_start"
   }, {
      "matches": [ "http://*/*", "https://*/*"],
      "css": [ "Theme.css" ]
   } ],
   "description": "Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications.",
   "devtools_page": "devtoolsBackground.html",
   "icons": {
      "128": "img/webstore-icon.png",
      "16": "img/webstore-icon.png",
      "48": "img/webstore-icon.png"
   },
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hsXx3+F75DyGto3mkm0FB2sycQzyMqXQAySn2Qj67vIHFMSrVZ0ItPzGnWJwoRoaDI7cQF9c/WLDpLJQwGe5CV5z84MueOME3e45JJEwN+YsW5ufEavmp+pk1c9h/Wyi8bMoSWJGIrOG72wCTFOdnyN6nocA0dm4w7UWsxLLEQIDAQAB",
   "manifest_version": 2,
   "minimum_chrome_version": "21.0.1180.57",
   "name": "AngularJS Batarang",
   "page_action": {
      "default_icon": {
         "19": "img/icon19.png",
         "38": "img/icon38.png"
      },
      "default_title": "AngularJS Super-Powered"
   },
   "permissions": [ "tabs", "<all_urls>" ],
   "update_url": "https://clients2.google.com/service/update2/crx",
   "version": "0.10.6",
   "web_accessible_resources": [ "dist/hint.js" ]
}

Upvotes: 3

Views: 7734

Answers (2)

Elharony
Elharony

Reputation: 1001

You have a problem with your content_scripts key, you should wrap your matches, css and js together under content_scripts key, like this:

"content_scripts": [
    {
        "matches": ["http://*/*"],
        "css": ["./Theme.css"],
        "js": ["./inject.js"]
    }
],

Also, don't forget to write ./ before your CSS/JS File to point to your root directory!

Upvotes: 4

Daniel Herr
Daniel Herr

Reputation: 20508

You did not register any pages to apply the CSS file to. The matches section is required.

If you want to apply it to all pages, use "matches": ["<all_urls>"]

Upvotes: 2

Related Questions