Disable / Enable Chrome Extension Via Browser Action / Icon

Question

The chrome extension I am developing inserts content scripts and css onto every page of a website. However, the user may have a certain page or pages he or she does not want the extension to run on, so it would be great if I could set up the browser action as basically a toggle on / off.

What I'd like to do is something like this:

chrome.browserAction.onClicked.addListener(function(tab) {

    //IF ENABLED THEN DISABLE

    //IF DISABLED THEN ENABLE

}

Any help would be greatly appreciated!

score 6 · Accepted Answer · edited Aug 31 '21 at 12:12

Such API is not provided. But two possible workarounds exist:

I. You can use the "disabled" flag variable and update it from your background page.

Background page:

function disableExtension(disabled)
{
    chrome.windows.getAll({populate : true}, function (window_list)
    {
        for (var i = 0; i < window_list.length; ++i)
        {
            var window = window_list[i];
            for (var j = 0; j < window.tabs.length; ++j)
            {
                var tab = window.tabs[j];
                if (checkContentScriptExists(tab))
                {
                    chrome.tabs.executeScript(tab.id, {code : "disabled = " + disabled + ";"}, allTabs: true) 
                }
            }
        }
        // No matching url found. Open it in the new tab
        chrome.tabs.create({ url : url, selected: true });
    });
}

And content script should check the condition before the run

if (!disabled) doSomething();

II. A controversial approach to save disable variable within background page content

Background page:

function disableExtension(disabled)
{
    global.disabled = disabled;
}
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.msg == "getDisabled") {
        sendResponse({disabled: global.disabled});
        return true;
    }
});

and the content script should query currently disabled status before execution

chrome.runtime.sendMessage({msg: "getDisabled"}, function(response) {
   if (!response.disabled) doSomething();
});

Can you explain why is "II" controversial? (I would store it in "storage" instead of "global" but it seems to be good way to go) — nez, Jul 15 '18 at 06:57
Because it adds additional complexity to the content script code. I'm not sure about storage now. At least it was not available within content scripts at the time of the answer writing. — Andrey, Jul 15 '18 at 15:01
Copy/paste of the second code snippet in II does not work as there is a typo: getDi**as**bled. Could not improve the post as at least 6 chars needs to change — user8472, Oct 10 '19 at 22:24

score -2 · Answer 2 · answered Sep 11 '13 at 12:42

-2

Chrome extensions have APIs of their own. You can invoke them via content scripts. Not sure if you can invoke them via any third party JS. Refer this ink

Hope it helps.

answered Sep 11 '13 at 12:42

Rajat Sharma

502
4
8
17

I could inject CSS and JS onto the page this way, but that would require the user to click the Browser Action Icon every single time they wanted to apply the Extension's code to a website. I want the extension to always apply the CSS / JS unless they toggle it to "off", and then never apply it until they toggle it back to "on". – TyGoss Sep 11 '13 at 12:56

Disable / Enable Chrome Extension Via Browser Action / Icon

2 Answers2

Linked