需要帮助使用 chrome.webRequest 来阻止使用 Chrome 扩展程序的网站

Question

我已经做了一段时间的扩展，我遇到了一个问题... 我使用以下代码制作了一个按钮来切换网站的阻止：

$('#togglesafety').click(function(){
        chrome.storage.sync.get(['toggle'],function(website){

            var newTotal = "";
            if(!(website.toggle)){
                newTotal = "Enabled";
            }
            else{
                if(website.toggle == "Enabled"){
                    newTotal = "Disabled";
                }
                else{
                    newTotal = "Enabled";
                }
            }
            chrome.storage.sync.set({'toggle': newTotal}, function(){},)
            $('#toggled').text(newTotal);
        });
    });

然后使用此代码阻止列入黑名单的网站列表：

const blockedWebsitesUrl = [
    "https://*.example.com/*"
]

chrome.storage.sync.get(["toggle"],function(website){
    if(website.toggle == "Enabled") {
        chrome.webRequest.onBeforeRequest.addListener(     
            function(details) {
                return {cancel: true};
            },
            {urls: blockedWebsitesUrl},
            ["blocking"]
        );
    }
    else {
        //
    }
})

但问题是，如果我在启用阻止的情况下刷新扩展，当我更改它时，它不会更改，直到下一次刷新。谁能帮助我了解如何解决此问题？

Answer 1

使 webRequest 侦听器成为一个命名的全局函数，这样它的引用将是持久的，并在存储更改时重新注册它：

const blocker = {
  toggle: null,
  urls: [],
  listener() {
    return {cancel: true};
  },
};

function registerBlocker(toggle = blocker.toggle, urls = blocker.urls) {
  blocker.toggle = toggle;
  blocker.urls = urls;
  chrome.webRequest.onBeforeRequest.removeListener(blocker.listener);
  if (toggle === 'Enabled' && urls.length) {
    chrome.webRequest.onBeforeRequest.addListener(blocker.listener, {urls},
      ['blocking']);
  }
},

chrome.storage.sync.get(['toggle', 'urls'], data => {
  registerBlocker(data.toggle, data.urls);
});

chrome.storage.onChanged.addListener(({ toggle, urls }) => {
  if (toggle || urls) {
    registerBlocker(toggle?.newValue, urls?.newValue);
  }
});

需要帮助使用 chrome.webRequest 来阻止使用 Chrome 扩展程序的网站

Need help using chrome.webRequest to block a website using a Chrome Extension

javascript

google-chrome

google-chrome-extension