Search code examples
javascriptgoogle-chromegoogle-chrome-extension

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

  "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?

Solution

  • 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