Question

我发现了另一个问题是哪种答案却没有。我非常想做同样的事情。

但该问题的答案并非永久更改样式表，因为在页面重新加载时，样式表将被还原，并且不会更改任何内容。

For a Google Chrome extension, how do I define a stylesheet toggle within the Popup?

当用户点击扩展程序的浏览器图标时，它会显示出来   已定义的弹出窗口。

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

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

另一个例子（更好的例子）：Classic Popup拦截器有一个   弹出窗口上的“将此页面添加到黑名单”的按钮和一次   点击更改为“从黑名单中删除”。

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

Answer 1

您可以根据各种类型的切换进行操作，而不是根据用户交互进行注入。只需为chrome.tabs.onUpdated事件添加一个监听器并为您想要受影响的网站过滤它，然后在您的toggle设置为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"});
  }
});

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

<强>的manifest.json

"options_page": "options.html",

<强> options.html

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

<强> options.js

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

<强> background.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},...]

如何设置永久禁用/启用Chrome扩展程序样式表的选项？

1 个答案: