需要帮助来切换Google Chrome扩展程序的WebRequest监听器

Question

Hey guys I'm really new to making google chrome extensions. The first extension I decided to do was a simple website blocker. I have found some code from somebody's answer on here that can toggle the webRequest listener based on tab.id as seen below:

chrome.browserAction.onClicked.addListener(function(tab) {
if (listeners[tab.id]) { //If the ID already exists
    chrome.webRequest.onBeforeRequest.removeListener(listeners[tab.id]);
    delete listeners[tab.id];
    chrome.browserAction.setBadgeText({
        text: 'OFF',
        tabId: tab.id
    });
} else {
    listeners[tab.id] = function(details) {
        return {cancel: true};
    };
    chrome.webRequest.onBeforeRequest.addListener(listeners[tab.id], {
        urls: user,
        types: ['main_frame', 'sub_frame'],
        tabId: tab.id
    }, ['blocking']);
    // Show indicator to show that the extension is active.
    chrome.browserAction.setBadgeText({
        text: 'ON',
        tabId: tab.id
    });
}
});

This works great for each tab, however I would like to toggle the listener for ALL tabs. How I would like it to work:

• Click Extension Icon
• Blocks all URLs that are in my 'user' array no matter if I switch tabs or not
• Can click icon again to disable no matter if tab is different from the tab I originally enabled the extension.

I have tried many times to recreate this method, however I cannot remove the listen once it is enabled. Because my implementation always calls an anonymous function, and from what I've read you cannot remove a listener where the call back function was anonymous.

Here is some basic implementation I tried on my own:

chrome.browserAction.onClicked.addListener(function(tab){
if(toggle===true)
    toggle = false;
else if(toggle===false)
    toggle = true;

if(toggle===true){
    chrome.webRequest.onBeforeRequest.addListener(
    function deny(request) {
        return {cancel: true}; 
    }, { urls: user, types: [] }, ["blocking"]);

    chrome.browserAction.setBadgeText({
        text: 'ON'
    });
}
else{
    chrome.webRequest.onBeforeRequest.removeListener();
    chrome.browserAction.setBadgeText({
        text: 'OFF'
    });
}

});

Basically I would like some help converting the first code segment into one that works for all tabs. Thank you! :)

Answer 1

You've successfully identified the problem: you cannot remove a listener if the callback function is anonymous. Great! This is because you need to pass the exact same object to addListener and removeListener .

All you have to do, then, is instead of using an anonymous function, keep that function somewhere you can access it. For example, you could define the function deny outside of the onClicked listener, then pass deny to both onBeforeRequest.addListener and onBeforeRequest.removeListener .

(A note about your code: you can flip the value of toggle with toggle = !toggle , and test if toggle is true by using if (toggle) rather than if (toggle === true) . These are just common idioms.)