My understanding of your requirements, as you nicely described them, are comprised of 2 components that can be addressed in the background scope using the following Crossrider methods:
- To detect tab changes use appAPI.tabs.onTabSelectionChanged.
- To monitor URL changes use appAPI.webRequest.onBeforeNavigate
To simplify the code, I would use a common function for the button updates. So for example, in the background.js file your code would look like:
appAPI.ready(function($) {
// Monitor tab selection changes
appAPI.tabs.onTabSelectionChanged(function(tabInfo) {
// tabInfo.Id = Tab Id
// tabInfo.tabUrl = URL in tab
updateButton(tabInfo.tabUrl);
});
appAPI.webRequest.onBeforeNavigate.addListener(function(details, opaqueData) {
// details.pageUrl = URL of the tab requesting the page
// opaqueData = data passed to the context of the callback function
updateButton(details.pageUrl);
});
function updateButton(url) {
// Your code to update the button based on URL
}
});
[Disclosure: I am a Crossrider employee]