Javascript 内容脚本CSS不'；不要改写原文_Javascript_Css_Google Chrome_Google Chrome Extension

Javascript 内容脚本CSS不'；不要改写原文

javascript css google-chrome google-chrome-extension

Javascript 内容脚本CSS不'；不要改写原文,javascript,css,google-chrome,google-chrome-extension,Javascript,Css,Google Chrome,Google Chrome Extension,我的问题是，我想用我的自定义设置修改网站的样式。我试过了，但这不管用，因为它们无法覆盖原始css文件。以下是一个例子： foo/manifest.json { "name": "test", "version": "1.0", "content_scripts": [ { "matches": ["file://*/*test.html"], "css": ["main.css"] } ] } foo/main.css body {

我的问题是，我想用我的自定义设置修改网站的样式。我试过了，但这不管用，因为它们无法覆盖原始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>


福巴

然后，我将扩展名foo文件夹插入我的谷歌浏览器，打开test.html，但背景颜色仍然是红色。我检查了元件，发现：

元素样式

正文{

背景：#f00；

用户样式表

正文{

背景：#0f0；

如何使用内容脚本自定义css修改现有css文件？

如果这是不可能的，那么当在google chrome中加载页面时，我如何使用我的自定义自动修改现有css。

内联样式规则比从样式表导入的任何规则具有更高的先例。您可以使用

！重要的

指令，用于破坏此行为：

body {
  background: #0f0 !important;
}

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

//原始规则
.李a班{
颜色：蓝色；
}

//您的规则
#很酷的分机，李a班{
颜色：红色；
}

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