My CSS is not getting injected through my content script

user1255276 picture user1255276 · Mar 15, 2012 · Viewed 18k times · Source

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

Rob W picture Rob W · Mar 15, 2012

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.