How can I make extension disabled when the link is not matched with content_script?

Question

  "content_scripts": [
    {
      "matches": [
        "https://www.google.com/*"
      ],
      "js": ["contentScript.bundle.js"],
      "css": ["styles.css"]
    }
  ],

How can I make extension turned off or not clickable if its not matched with content_script link?

Answer 1

You can implement something like this in the background file,

Steps

1. Create an Array of domains which has been specified in your content script.
2. Add a listener on the tab selection changed and tab updated.
3. Checkout the currently active tab is in your array or not.
4. Set a flag value true false using the above check.
5. On extension click now, check if the flag is true then perform the task else ignore the click.

let activeExtension = false;
const contentScriptMatchArray = ['https://www.google.com', 'https://www.youtube.com'];

chrome.tabs.onActivated.addListener(handleExtensionActiveState);
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    handleExtensionActiveState(tab);
});

function handleExtensionActiveState(tabs) {
    if (tabs.tabId) {
        chrome.tabs.get(tabs.tabId, (tab) => {
            activeExtension = checkWhiteListedOrigin(tab);
        });
    } else {
        activeExtension = checkWhiteListedOrigin(tabs);
    }
}

function checkWhiteListedOrigin(tab) {
    const tabURl = new URL(tab.url);
    return contentScriptMatchArray.includes(tabURl.origin);
}

chrome.browserAction.onClicked.addListener(function () {
    if (activeExtension) {
        console.log('Clicked');
    }
});

Note

• you can also change your extension icon, so your extension will look like it's actually disabled

References

• https://developer.chrome.com/docs/extensions/reference/tabs/#event-onActiveChanged