How I can make a browser action button that looks and acts like a toggle
<p>The target is get a WebExtension for Firefox that can be activated/deactivated by a user in the toolbar, like an on/off switch.</p>

<p>I'm using a <em>background.js</em> with this code:</p>

<pre class="lang-js prettyprint-override"><code>browser.browserAction.onClicked.addListener(function (tab) {
    switch (button) {
        case 'turn-on':
            enable();
            break;
        case 'turn-off':
            disable();
            break;
    }
});
function enable() {
    browser.browserAction.setIcon({ path: '/ui/is-on.png', });
    browser.browserAction.setPopup({ popup: '/ui/turn-off.js', });
    browser.webNavigation.onCommitted.addListener(onTabLoad); 
} 
function disable() {
    browser.browserAction.setIcon({ path: '/ui/is-off.png', });
    browser.browserAction.setPopup({ popup: '/ui/turn-on.js', });
    browser.webNavigation.onCommitted.removeListener(onTabLoad); 
}
function onTabLoad(details) {
    browser.tabs.executeScript(details.tabId, {
        file: '/gc.js',
        allFrames true,
    }); 
}
enable(); // enable or disable by default
</code></pre>

<p>Obviously I'm doing something wrong. I'm kind newbie in coding. This is a personal project I'm trying to finish.</p>