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:
- Increase the specificity of your CSS rules.
-
Suffix every rule with
!important
:#test { margin: 0 10px !important; background: #fff !important; padding: 3px !important; color: #000 !important; }
-
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.