Use different popups in your Chrome extension

background.js

/* 
    This is a workaround for the `chrome.action.openPopup()` which is not (yet) available in the current Chrome APIs.
    https://github.com/GoogleChrome/developer.chrome.com/issues/2602#issuecomment-1110937788
    https://developer.chrome.com/docs/extensions/reference/action/#method-openPopup
 */

// use this in your `background.js` service worker
// here, we check if we are on the Google home page or not and then show the appropriate popup
function setPopupForTab(tab) {
  if (tab.url.startsWith('https://www.google.com/')) {
    chrome.action.setPopup({ tabId: tab.id, popup: 'popup.html' });
  } else {
    chrome.action.setPopup({ tabId: tab.id, popup: 'errorPopup.html' });
  }
}

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete') {
    setPopupForTab(tab);
  }
});

chrome.tabs.onActivated.addListener((activeInfo) => {
  chrome.tabs.get(activeInfo.tabId, (tab) => {
    setPopupForTab(tab);
  });
});