内容脚本CSS不会覆盖原始内容 [英] Content Scripts CSS doesn't overwrite the original
问题描述
我想用我的自定义设置修改网站样式的问题。我尝试了内容脚本，但这种方式很有效，因为它们无法覆盖原始的css文件。这是一个例子：
foo / manifest.json
{
name：test，
version：1.0，
content_scripts：[
{
matches：[file： //*/*test.html]，
css：[main.css]
}
]
}
foo / main.css
body {
背景：＃0f0;
}
test.html
< HTML>
< head>
< title> foobar< / title>
< / head>
< body style =background：＃f00;>
< / body>
< / html>
然后我将扩展foo文件夹加载到我的谷歌浏览器中，然后打开test.html，但背景颜色仍为红色。我检查了这个元素，并且看到：
元素样式
用户样式表 如何修改现有的css文件与我的自定义css与内容脚本？ 内联样式规则具有比从样式表导入的任何规则更高的先例。您可以使用 My problem that I want to modify a style of a site with my custom settings. I tried with Content Scripts, but this dosent work, because they can't overwrite the original css files. Here is an example: foo/manifest.json foo/main.css test.html Then i loaded the the extension foo folder into my google chrome, and opened the test.html but the background color still red. I inspected the element and i saw that: Element Style user stylesheet How can I modify an existing css file with my custom css with Content Scripts? An inline style rule has higher precedent over any rules imported from a stylesheet. You could use the
这篇关于内容脚本CSS不会覆盖原始内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ body {
background：＃f00;
$ <$
$ b
body {
background：＃0f0;
}
如果这不可能，我怎么能自动修改现有的CSS与我的自定义页面加载时特别是在谷歌铬。！important 指令来颠覆这种行为：
body {
background：＃0f0！important;
}
{
"name": "test",
"version": "1.0",
"content_scripts": [
{
"matches": ["file://*/*test.html"],
"css": ["main.css"]
}
]
}
body {
background: #0f0;
}
<html>
<head>
<title>foobar</title>
</head>
<body style="background:#f00;">
</body>
</html>
body {
background: #f00;
}body {
background: #0f0;
}
If this not possible, how can i automatically modify an existing css with my custom when page loads in google chrome specially.!important directive to subvert this behavior:body {
background: #0f0 !important;
}
