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

Answer 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.