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

Content Scripts CSS doesn't overwrite the original

本文关键字：覆盖 原始 CSS 脚本      更新时间：2023-09-26

我想使用自定义设置修改网站样式的问题。我尝试使用内容脚本，但这确实有效，因为它们无法覆盖原始的css文件。下面是一个示例：

foo/manifest.json

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

foo/main.css

body {
  background: #0f0;
}

测试.html

<html>
  <head>
    <title>foobar</title>
  </head>
  <body style="background:#f00;">
  </body>
</html>

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

元素样式


body {
background: #f00; }

用户样式表


body {
background: #0f0; }

如何使用带有内容脚本的自定义 css 修改现有 css 文件？
如果这是不可能的，我如何在页面加载时自动修改现有的 css，特别是当页面加载到谷歌浏览器时。

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

body {
  background: #0f0 !important;
}

使用 javascript，在正文标签或其他包含所有内容的标签中添加一个 ID。 然后你可以这样做：

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

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

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

相关文章：