任何人都可以向我解释.我正在使用带有Google扩展程序的content_script将CSS文件注入到网页上,但是我的css文件永远不会添加到网页.有人可以告诉我我做错了什么,帮我解决吗？谢谢
表现：
{
"name": "Extension","version": "0","description": "","permissions": ["tabs","http://*/*","https://*/*","file:///*/*"],"content_scripts": [
{
"matches": [ "http://*/*","css": ["myStyles.css"],"js": ["myScript.js"],"all_frames": true
}
]
}
myStyles.css
#test {
margin: 0 10px;
background: #fff;
padding: 3px;
color: #000;
}
解决方法
样式表实际上是注入的,但不被应用,因为其他样式会覆盖规则.要使规则正常工作,您有一些选择：
>增加你的CSS规则的specificity.
>后缀每个规则！重要：
#test {
margin: 0 10px !important;
background: #fff !important;
padding: 3px !important;
color: #000 !important;
}
>通过内容脚本注入CSS：
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","manifest_version": 2,"all_frames": true
}
],"web_accessible_resources": ["myStyles.css"]
}
当manifest version 2处于活动状态时,最后一个关键字web_accessible_resources是必需的,以便可以从非扩展页面读取CSS文件.
