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>

然后我loaded扩展foo文件夹进入我的谷歌浏览器，并打开test.html但背景颜色仍然是红色。我检查了元素，我看到了：

元素样式

body {
background: #f00;
}

用户样式表

body {
<击> background: #0f0;
}

如何使用带有内容脚本的自定义css修改现有的css文件？
如果无法做到这一点，如何在Google Chrome专门加载页面时自动修改现有的css。

Answer 1

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

body {
  background: #0f0 !important;
}

Answer 2

使用javascript，为body标签添加ID，或者包含所有内容的其他标签。然后你可以这样做：

// original rule
.someclass li a{
    color: blue;
}

// your rule
#cool-extension .someclass li a{
    color: red;
}

如果您使用原始完整选择器，并在其前面加上您的ID，则您的规则将始终优先。