任何人都可以向我解释这个。我正在尝试使用带有Google扩展的content_script将CSS文件注入网页,但我的css文件永远不会添加到网页中。有人能告诉我我做错了什么并帮我解决了吗?感谢
清单:
{
"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;
}
答案 0 :(得分:37)
样式表实际上已注入,但未应用,因为其他样式会覆盖规则。要使规则起作用,您有一些选择:
使用!important
后缀每个规则:
#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",
"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"]
}
当manifest version 2处于活动状态时,最后一个密钥web_accessible_resources
是必需的,以便可以从非扩展页面读取CSS文件。
答案 1 :(得分:0)
如果要定位到特定网站,请执行以下操作:
"matches": ["https://*.google.com/*"]
在//*
之前的.google
是我真正的把戏,因为使用www
不起作用。