chrome.browserAction, disabling Icon - google-chrome-extension

Question

I am attempting to disable or enable my chrome extension based on the matches of the content scripts, but I think there is a better way. Below is my code. Seems like what I am attempting to accomplish could be achieved by chrome.declarativeContent.onPageChanged but that does not seem to fire consistently.
const IsMatch = (tab, matches) => {
if (tab ==undefined && tab == null && tab.url == undefined){
return false;
}
for(var ctr = 0; ctr < matches.length ; ctr ++){
var match = matches[ctr].substring(0, matches[ctr].length - 1);
if (tab.url.startsWith(match) ) {
return true;
}
}
return false;
}
const updateIcon = tabId => {
chrome.browserAction.disable();
chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
var contentScripts = chrome.runtime.getManifest().content_scripts;
for(var i = 0; i < contentScripts.length ; i ++){
var contentScript = contentScripts[i];
if ( IsMatch(tabs[0], contentScript.matches) ) {
chrome.browserAction.enable();
console.log('chrome.tabs.query');
console.log(tabs[0]);
return;
}
}
});
};
chrome.tabs.onUpdated.addListener(updateIcon);
After the changes recommended by #wOxxOm I am now in a race condition here is the updated code
browser.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.message === 'enableIcon') {
console.log(sender.tab.id + ' ' + request.message);
chrome.browserAction.setIcon({tabId: sender.tab.id, path: 'icon-16.png'});
browser.browserAction.enable();
}
return true;
});
browser.tabs.onUpdated.addListener(function(tabId) {
console.log(tabId + ' disableIcon');
chrome.browserAction.setIcon({tabId: tabId, path: 'icon-16-Disabled.png'});
chrome.browserAction.disable();
});
Here is the ouput:
- 6: backgroundIcon.js:31 39 disableIcon
- 1: backgroundIcon.js:22 39 enableIcon
- 2: backgroundIcon.js:31 39 disableIcon