如何删除注入的CSS文件？

Question

我用来chrome.tabs.insertCSS(null, {file: "style.css"});在页面中插入一个css文件,它工作正常.

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

Answer 1

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

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

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

好处是它不会在你拥有的东西之上添加太多的工作,你不必弄清楚如何在第二个样式表中覆盖你的自定义样式(它总是非常烦人且容易出错)并且你甚至可以获得一些CSS特异性,这样你的样式就更有可能得到应用.

请注意,"包装"样式的最佳方法是使用Sass或LESS,因为您可以直接添加body.JMaylinCustomStyles {到文件的顶部和}底部.

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.但这会产生在每个页面加载时加载文件的开销.