Google chrome 对于Google Chrome扩展，如何在弹出窗口中定义样式表切换？

当用户单击扩展的浏览器图标时，会弹出已定义的弹出窗口

我需要创建一个切换按钮，当用户单击弹出窗口中的按钮时，可以打开/关闭特定页面/域的样式表

例如，当用户使用Adblock扩展时，当用户单击浏览器图标时，会弹出一个包含一系列链接的弹出窗口。其中一个链接是“请勿在此页面上运行”，然后将其更改为“启用”，用户可以单击该链接将其重新打开

另一个例子（更好的例子）：经典的弹出窗口拦截器在弹出窗口上有一个按钮，上面写着“将此页面添加到黑名单”，单击后更改为“从黑名单中删除”

经典的弹出窗口拦截器通常是我想要的扩展功能（它不做任何广告或弹出窗口拦截器，这只是一个例子），因此当用户单击弹出窗口上的按钮时，它将打开或关闭我编写并保存为扩展中的.css文件的样式表

我希望我已经说得够清楚了，能理解

---

屏幕

这是我制作的一张经过Photoshop处理的照片，这样你就可以清楚地看到我正在做的事情：

---

然后再次进行Photoshop，查看单击按钮后会发生什么：

---

您可以使用该方法动态插入/删除CSS（需要

manifest.json

中的

选项卡

权限）：

在

myscript.js

中，检测是否已插入CSS。如果没有，则添加一个新的

或

链接

元素，并为其分配一个

id

。否则，请替换样式表

myscript.js

的示例：

var selectedStyle = document.documentElement.getAttribute('RWchooseStyle');
var id, link;
if (selectedStyle) {
    id = 'RW_style_' + selectedStyle.replace(/\W/g,'');   // Sanitize id
    // Remove previous sheet, if available.
    link = document.getElementById(id);
    if (link) {
        link.parentNode.removeChild(link);
    }
}
if (id) {
    // Insert new sheet
    link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = chrome.extension.getURL(selectedStyle);
    link.id = id;
    (document.head||document.documentElement).appendChild(link);
}

// Remove temporary attribute
document.documentElement.removeAttribute('RWChooseStyle');

在本例中，CSS文件必须在extensions目录中定义。当然，如果

，也可以使用

，并动态设置样式的内容

---

注意：别忘了将样式表添加到清单文件的部分。

我将尝试一下。如果成功的话，我会接受你的回答！谢谢你的帮助！如何使链接在单击时执行此操作？如中所示，我在popup.HTML上的HTML中到底放了什么？我的答案的第一部分是JavaScipt，应该在您想要加载

style1.css

时执行。我回答的第二部分是一个独立的JavaScript文件。这两者都应包含在扩展中。我当前的示例当前只允许一个扩展。只需将

'RW\u someStyleElement'

替换为

document.rwhoosestyle

。这样如何：

当然可以将rwhoosestyle更改为我喜欢的名称。正确吗？或者说：

var selectedStyle = document.documentElement.getAttribute('RWchooseStyle');
var id, link;
if (selectedStyle) {
    id = 'RW_style_' + selectedStyle.replace(/\W/g,'');   // Sanitize id
    // Remove previous sheet, if available.
    link = document.getElementById(id);
    if (link) {
        link.parentNode.removeChild(link);
    }
}
if (id) {
    // Insert new sheet
    link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = chrome.extension.getURL(selectedStyle);
    link.id = id;
    (document.head||document.documentElement).appendChild(link);
}

// Remove temporary attribute
document.documentElement.removeAttribute('RWChooseStyle');