20

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;
}
user1255276
  • 541
  • 2
  • 5
  • 20

2 Answers2

52

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.

Vladyslav Zavalykhatko
  • 15,202
  • 8
  • 65
  • 100
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • 3
    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. – Rob W Mar 15 '12 at 14:22
  • #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! – AGamePlayer Sep 30 '13 at 08:11
  • @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. – Rob W Dec 07 '15 at 16:23
1

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.

R. Gurung
  • 1,356
  • 1
  • 14
  • 34