我使用chrome.tabs.insertCSS(null, {file: "style.css"});
将css文件插入页面,它能正常工作。
- 但是是否有一种方法可以删除这个文件?
- 另外,如果我注入了另一个名为
style.css
的文件,它会覆盖第一个文件吗? - 顺便问一下,我在哪里可以看到被注入的CSS文件?脚本可以在“Sources/Content Scripts”(chrome开发者工具中)查看,但我找不到CSS文件。
我使用chrome.tabs.insertCSS(null, {file: "style.css"});
将css文件插入页面,它能正常工作。
style.css
的文件,它会覆盖第一个文件吗?我不确定这个问题的背景是什么,但似乎您想以一定的方式突出网页的特定元素,并能够切换自定义高亮。 (而不是样式化扩展创建的元素)
由于您无法实际删除CSS文件或通过添加相同名称的文件来擦除它,因此建议采取以下措施:
body.JMaylinCustomStyles
的东西中body
元素添加或删除 JMaylinCustomStyles
类。好处是它不会增加太多工作量,您不必弄清如何在第二个样式表中覆盖自定义样式(这总是非常烦人和容易出错),甚至可以在CSS优先级上获得一些优势,从而更有可能应用您的样式。
请注意,最好的“包装”样式的方法是使用Sass或LESS,因为您只需在文件顶部添加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
时,它无法覆盖先前的样式。 - JMaylin