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

【问题标题】：Content Scripts CSS doesn't overwrite the original内容脚本 CSS 不会覆盖原始内容
【发布时间】：2011-08-29 23:11:55
【问题描述】：

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

foo/manifest.json

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

foo/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 文件？
如果这不可能，当页面在谷歌浏览器中加载时，如何使用我的自定义自动修改现有的 css。

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

这将需要等待 DOM 被加载，这可能会导致 FOUC。更好的方法是使用MutationObserver 来检测目标 DOM 元素何时加载，然后即时修改其 id。

【解决方案2】：

内联样式规则优先于从样式表导入的任何规则。你可以使用!important 指令来颠覆这种行为：

body {
  background: #0f0 !important;
}

【讨论】：