Google chrome extension Chrome扩展插件'；s浏览器操作，带有插入/删除CSS的弹出窗口

我想问一个方法注入css或删除注入css通过浏览动作弹出窗口的铬扩展。我试着在几个地方寻找理想的方法，但我没能理解它们

我想做一个类似于的扩展，但是点击popup.html中的div来加载或卸载创建的css文件

---

这是我目前的工作（）使用内容脚本直接插入css。现在，我想让它能够以不同的方式加载或卸载，而不是一次性全部加载。

Chrome API无法删除通过manifest.json注入的CSS

像插入一样插入代码，但使用带有内容脚本名称的

文件

参数，该参数将在

document.documentElement

下添加或删除

链接

元素，该元素的

id

等于

chrome.runtime.id

和

href

指向CSS文件

从manifest.json中删除

“内容脚本”

向manifest.json添加

“web可访问资源”：[“*.css”]

为popup.js中的

div

添加一个单击处理程序

在点击处理程序中：

chrome.tabs.executeScript（{file:'content.js'}）

content.js：

（函数（）{
var styleElement=document.getElementById（chrome.runtime.id）；
if（样式元素）{
styleElement.remove（）；
返回；
}
变量css=({
“www.youtube.com”：“app_yt_HoveredImg.css”，
“www.messenger.com”：“fb_messenger_styles.css”，
“www.google.com”：“google_styles.css”，
“translate.google.com”：“google_styles.css”，
'api.google.com'：'google_styles.css'，
})[location.hostname]；
如果（！css）{
返回；
}  
styleElement=document.createElement（'link'）；
styleElement.id=chrome.runtime.id；
styleElement.rel='stylesheet'；
styleElement.href=chrome.runtime.getURL（css）；
document.documentElement.appendChild（styleElement）；
})();

---

注意，在此工作流中，您只需要而不是

“tabs”

：优点是

activeTab

在安装扩展时不需要请求权限。

在应用解决方案时解决了一些愚蠢的错误后，它终于起作用了。谢谢我想进一步了解一下，是否有办法对此进行检查或调试？添加

调试器并在网页上打开devtools：当注入脚本时，devtools调试器将激活。对于弹出窗口，它有自己的devtools：右键单击弹出窗口并单击Inspect。