Firefox extension: Updating the browser icon in background.js

Firefox Development
#1

Noob here writing a Firefox extension. The extension should change the icon depending on whether the url matches a certain string, google in this case. So for this example, I want the icon to turn red if the url is matched when the tab is clicked or updated. However, I’m having trouble getting it working. When I click on a new tab, no matter the url, it will always be the red icon, no matter what the url is. When I update the tab, it doesn’t matter what the url is, it will always be black. Apologies in advance if I’m making a simple or dumb mistake, I’m no programmer.

The background.js looks like this;

var alertError = function(arg){
                if(arg.url.match(/https:\/\/google\.com\/*/) == null){
                    alert('Something');
                }
            };
browser.browserAction.onClicked.addListener(alertError);
browser.tabs.onActivated.addListener(function(info){
browser.tabs.get(info.tabId, function(change){
        if(change.url == undefined){
            browser.browserAction.setPopup({tabId: info.tabId, popup: ''});
            browser.browserAction.setIcon({path: '../icons/class/icon-red.png', tabId: info.tabId});
            console.log('undefined');
        }
        else if(change.url.match(/https:\/\/google\.com\/*/) == null){
            browser.browserAction.setPopup({tabId: info.tabId, popup: ''});
            browser.browserAction.setIcon({path: '../icons/class/icon-red.png', tabId: info.tabId});
            console.log('not matching');
        }
        else{
            browser.browserAction.setPopup({tabId: info.tabId, popup: '../html/popup.html'});
            browser.browserAction.setIcon({path: '../icons/class/icon-black.png', tabId: info.tabId});
            console.log('matched');
        }
    });
});
browser.tabs.onUpdated.addListener(function (tabId, change, tab){
    if(tab.url == undefined){
        return;
    }
    else if(tab.url.match(/https:\/\/google\.com\/*/) == null){
        browser.browserAction.setPopup({tabId: tabId, popup: ''});
        browser.browserAction.setIcon({path: '../icons/class/icon-red.png', tabId: tabId});
        console.log('not matching');
    }
    else{
        browser.browserAction.setPopup({tabId: tabId, popup: '../html/popup.html'});
        browser.browserAction.setIcon({path: '../icons/class/icon-black.png', tabId: tabId});
        bconsole.log('matched');
    }
});
#2

I’m not sure you can define the “callback” that way. Could you try using .then() as in this example: