内容脚本CSS不会覆盖原始脚本

Question

我的问题是我想用我的自定义设置修改网站的样式.我尝试使用Content Scripts,但这种剂量有效,因为它们无法覆盖原始的css文件.这是一个例子:

富/ manifest.json的

{
  "name": "test",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["file://*/*test.html"],
      "css": ["main.css"]
    }
  ]
}

富/ main.css的

body {
  background: #0f0;
}

的test.html

<html>
  <head>
    <title>foobar</title>
  </head>

  <body style="background:#f00;">

  </body>
</html>

然后我将扩展foo文件夹加载到我的谷歌浏览器中,并打开test.html但背景颜色仍然是红色.我检查了元素,我看到了:

元素风格

body {
background: #f00;
}

用户样式表

body {
~~background: #0f0;~~
}

如何使用带有内容脚本的自定义css修改现有的css文件？
如果这不可能,当网页加载谷歌浏览器时,如何使用我的自定义自动修改现有的CSS.

Answer 1

内联样式规则比从样式表导入的任何规则具有更高的先例.您可以使用该!important指令来破坏此行为:

body {
  background: #0f0 !important;
}