Question

我使用chrome.tabs.insertCSS(null, {file: "style.css"});将css文件插入页面，它工作正常。

但有没有办法删除文件？
另外，如果我注入另一个名为style.css的文件，它会覆盖第一个吗？
顺便说一句，我在哪里可以看到注入的CSS文件？脚本可以在“源代码/内容脚本”（chrome开发人员工具）中查看，但我找不到CSS文件。

Answer 1

我不确定这个问题的上下文是什么，但听起来好像你想以某种方式突出显示页面的特定元素，并能够切换自定义突出显示。（而不是你的扩展会创建的样式元素）

由于您无法实际删除CSS文件或仅通过添加具有相同名称的文件来删除它，我建议如下：

将您的自定义样式包装在body.JMaylinCustomStyles
使用JavaScript在JMaylinCustomStyles元素中添加或删除body类。
没有第3步。

它的好处是它不会在你拥有的东西上添加太多的工作，你不必弄清楚如何在第二个样式表中覆盖你的自定义样式（它总是非常烦人且容易出错）并且您甚至可以在CSS specificity中获得一点点，因此您的样式更有可能被应用。

请注意，“换行”样式的最佳方法是使用Sass或LESS，因为您只需在文件顶部添加body.JMaylinCustomStyles {并{{1在底部。

Answer 2

我刚刚遇到同样的问题，并认为我会分享我的解决方案。我正在调用一个内容脚本，然后像这样加载或卸载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。但这会产生在每次加载页面时加载文件的开销。

Answer 3

没有用于删除CSS文件的API https://developer.chrome.com/extensions/tabs.html

您最好的选择可能是插入另一个文件，该文件将替换您插入的第一个文件中的所有CSS设置。

如何删除注入的CSS文件？

3 个答案: