My CSS is not getting injected through my content script

Question

Can anyone explain this to me. I'm trying to inject a CSS file onto a webpage using the content_script with Google extensions, but my css file never gets added to the webpage. Can someone tell me what I'm doing wrong and help me fix it? thanks

Manifest:

{
  "name": "Extension",
  "version": "0",
  "description": "",


  "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"],
    "content_scripts": [
    {
        "matches": [ "http://*/*", "https://*/*", "file:///*/*"],
        "css": ["myStyles.css"],
        "js": ["myScript.js"],
        "all_frames": true
    }
  ]
}

myStyles.css

#test {
    margin: 0 10px;
    background: #fff;
    padding: 3px;
    color: #000;
}

Solution 1

The style sheet is actually injected, but not applied, because other styles override the rules. To get the rules to work, you have some options:

1. Increase the specificity of your CSS rules.

2. Suffix every rule with !important:

   #test {
       margin: 0 10px !important;
       background: #fff !important;
       padding: 3px !important;
       color: #000 !important;
   }
   

3. Inject the CSS via a content script:

   myScript.js:

   var style = document.createElement('link');
   style.rel = 'stylesheet';
   style.type = 'text/css';
   style.href = chrome.extension.getURL('myStyles.css');
   (document.head||document.documentElement).appendChild(style);
   

   manifest.json

   {
     "name": "Extension",
     "version": "0",
     "description": "",
     "manifest_version": 2,
     "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"],
     "content_scripts": [
       {
           "matches": [ "http://*/*", "https://*/*", "file:///*/*"],
           "js": ["myScript.js"],
           "all_frames": true
       }
     ],
     "web_accessible_resources": ["myStyles.css"]
   }
   

   The last key, web_accessible_resources is necessary when manifest version 2 is active, so that the CSS file can be read from a non-extension page.

Solution 2

If you want to target a specific website do:

"matches": ["https://*.google.com/*"]

That //* before .google is the real trick for me as using www doesn't works.

Comments

[Rob W]

For clarification: You do not have to use both methods. Using one of them will be fine. The first one is more reliable, the second one may cause a flicker.

[AGamePlayer]

#1 works for me but #2 not working. It's really weird. Is it possible that the original page trying to block the extension to change its style? On some websites (eg, appannie.com) it's ok but some are not (eg, facebook.com). Anyway, #1 is great. Thanks!

[Rob W]

@Xan It becomes the last stylesheet in the document, so if the specificity is at least as high as the existing stylesheets in the document, then the injected stylesheet takes precedence.