Adding CSS file to Chrome extension manifest not working

Question

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" ]
}

@Xan Any webpage I visit should work since my `match` key-value pair include everything. — mellis481, Mar 07 '16 at 13:52
@Xan: What do you mean? I expect to be able to go to literally any web page (www.google.com) and see green text in `span` elements. — mellis481, Mar 07 '16 at 14:14
For the record, `www.google.com` has exactly 1 span element. I just want one fixed URL where the effect (or lack thereof) is very visible. — Xan, Mar 07 '16 at 14:16
@Teepeemm No that is what the manifest.json looks like. You can pull down the AngularJS Batarang extension to verify. — mellis481, Mar 07 '16 at 15:26

score 4 · Answer 1 · answered Oct 25 '18 at 20:40

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!

score 2 · Answer 2 · answered Mar 04 '16 at 20:28

2

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

answered Mar 04 '16 at 20:28

Daniel Herr

19,083
6
44
61

I just tried `{ "matches": [""], "css": [ "Theme.css" ] }`, but still not working. If by change you want me to fill in ``, I tried this previously also to no avail: `"matches": [ "http://*/*", "https://*/*"]`. – mellis481 Mar 04 '16 at 20:35
@im1dermike This is the only thing missing from the portion of the manifest you posted. If you're still having trouble, then it's your responsibility to post the entire manifest of your [mcve]. – Teepeemm Mar 05 '16 at 20:00

Adding CSS file to Chrome extension manifest not working

2 Answers2

Linked