2

我发现this other question是哪种答案但没有。我很想做同样的事情。

但是该问题的答案不会永久更改样式表，因为在页面重新加载时，样式表会恢复并且没有任何更改。

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

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

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

例如，当用户使用 Adblock 扩展程序时，当用户单击浏览器图标时，它会弹出包含一系列链接的弹出窗口。一个这样的链接是“不要在这个页面上运行”，然后它会变成“启用”，用户可以点击它来重新打开它。

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

image1 i.stack.imgur.com/92gVx.jpg

image2 i.stack.imgur.com/Xvyyp.jpg

这是我目前在 HTML 文件中的内容。通过这种方式，有一个简单的复选框，如果选中它，它将运行 javascript：

<script type="text/javascript">
  $("#button").click(function(){
    chrome.extension.sendRequest({ msg: "toggle" });
    });
</script>
<input type="checkbox" checked="checked" id="button" /> TOGGLE IT
4

1 回答 1

2

您可以基于某种切换来注入它，而不是基于用户交互来注入它。只需为该chrome.tabs.onUpdated事件添加一个侦听器并针对您想要受影响的网站过滤它，然后如果您的切换设置为 true，则注入 css。例如：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
  //assuming `cssToggle` is defined
  if(tab.url && cssToggle == "true"){
    // assuming `url` is the url you want to change
    if(tab.url.indexOf(url) >-1)
      chrome.tabs.insertCSS(tabId, {file:"style.css", runAt: "document_start"});
  }
});

使用选项页面切换样式表的示例：

清单.json

"options_page": "options.html",

选项.html

<script src="options.js"></script>
[...]
<select id="cssSelect">
  <option value="true">Enabled</option>
  <option value="false">Disabled</option>
</select>

选项.js

$('#cssSelect').change(function(){
  chrome.runtime.sendMessage({method: 'setCSS', css:$(this).val()});
});

背景.js

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
  if(message.method == 'setCSS')
    cssToggle = message.css;
});

原谅我使用的 jQuery，我不想将它转换为纯 JS 并给你不正确的代码。所以我在清单中定义了一个选项页面，在该选项页面上我有一个带有启用/禁用选项的选择。当它发生变化时，我将新值发送到我的后台页面并cssToggle相应地更新 var。请注意，我现在正在针对字符串进行测试，因为那是我在消息中发送的内容，它只会减少代码。

至于有多个样式切换。如果只是几个，那么你可以只拥有多个，但如果不止于此，我建议做一些不同的事情。也许将它定义为一个带有 url、toggle 和要注入的文件的对象数组，如下所示：

[{url:url1,toggle:toggle1,file:file1},{url:url2, toggle:toggle2, file:file2},...]
于 2013-04-21T06:56:11.097 回答