Google chrome extension 如何删除注入的CSS文件？

我使用

chrome.tabs.insertCSS（null，{file:“style.css”}）

将css文件插入页面，效果良好

• 但是有没有办法删除该文件
• 另外，如果我插入另一个名为

  style.css

  的文件，它会覆盖第一个文件吗
• 顺便问一下，我在哪里可以看到注入的CSS文件？脚本可以在“源代码/内容脚本”（chrome开发者工具）中查看，但我找不到CSS文件

---

没有用于删除CSS文件的API

---

您的最佳选择可能是插入另一个文件，该文件将替换您插入的第一个文件中的所有CSS设置
我不确定这个问题的上下文是什么，但听起来您可能希望以某种方式突出显示页面的特定元素，并能够切换自定义突出显示。（而不是设置扩展将创建的元素的样式）
由于您实际上无法删除CSS文件或通过添加同名文件来删除它，因此我建议如下：
• 用类似于

  body.JMaylinCustomStyles

• 使用JavaScript将

  JMaylinCustomStyles

  类添加或删除到

  body

  元素
• 没有第三步
其好处是，它不会在现有的基础上增加太多工作，您不必找出如何在第二个样式表中覆盖您的自定义样式（它总是非常烦人且容易出错），而且您甚至可以获得一点，这样您的样式就更有可能被应用

---

请注意，“包装”样式的最佳方法是使用或，因为您可以直接在文件顶部添加

body.JMaylinCustomStyles{

，在底部添加

}

。
我刚刚遇到了同样的问题，我想与大家分享我的解决方案。我正在调用一个内容脚本，它将加载或卸载css，如下所示：

function loadCSS(file) {
  var link = document.createElement("link");
  link.href = chrome.extension.getURL(file + '.css');
  link.id = file;
  link.type = "text/css";
  link.rel = "stylesheet";
  document.getElementsByTagName("head")[0].appendChild(link);
}

function unloadCSS(file) {
  var cssNode = document.getElementById(file);
  cssNode && cssNode.parentNode.removeChild(cssNode);
}

根据

chrome.storage

中的数据，调用哪一个的逻辑也在内容脚本中。因此，您所需要做的就是注入脚本，它将添加/删除css

---

我的案例实际上有点复杂，所以我总是加载内容脚本并向其发送消息以加载或卸载css。但这会增加每次加载页面时加载文件的开销。
当我尝试插入空的

style.css

时，它不会覆盖上一个样式，您可能需要显式覆盖所有选项。例如，如果您将背景颜色更改为蓝色，则必须将其重新设置为白色。这是一个选项。但在我的例子中，它不起作用，因为我不应该知道默认值。另一个选项是用Javascript保存所有当前CSS设置，然后用Javascript设置新设置。这将需要更多的代码，但你有更多的控制权。是的，如果我没有找到其他解决方案，我可以这样做。谢谢Timothée，我会这样做的*谢谢分享David，这是一个有趣的问题solution@JMaylin我的荣幸。完成的扩展在这里，代码是原始的，所以您应该能够解包并检查我喜欢您的扩展，但我们是竞争对手，这里是我的一个问题：DI已经问了您的第三个问题，关于我遇到这个问题时为什么注入的CSS没有出现在开发工具中。看起来这里没有人试图回答这个问题，所以我会保持原样。