How can I have my Chrome extension enable or disable via popup menu?

Question

I have looked at other questions that are similar to mine but most of them are for Manifest version 2. I am using Manifest version 3. Disable / Enable Chrome Extension Via Browser Action / Icon

I want users to be able to click on the extension button in the menu at the top of the chrome page and be able to enable or disable the extension by just clicking that button.

So far I have had no luck making this work because the service workers aren't alive all of the time. I have tried saving a loaded var to local storage that indicates whether the extension was loaded or not but that approach did not work.

What are my options here?

Answer 1

So after a few more hours of research I figured out how to make this work using Manifest V3.

//When the tab bar icon is clicked this code runs. It sets the state of the extension.
chrome.action.onClicked.addListener((tab) => {
  chrome.storage.local.get('state', function(data) {
    if(data.state == 'on') {
      //Save the state of the extension.
      chrome.storage.local.set({state: 'off'});
      console.log('The tab bar button was clicked for on...');
      chrome.scripting.executeScript({
        target: { tabId: tab.id },
        function: toggleExtOn
      });
    } else {
      //Save the state of the extension.
      chrome.storage.local.set({state: 'on'})
      console.log('The tab bar button was clicked for off...');
      chrome.scripting.executeScript({
        target: { tabId: tab.id },
        function: toggleExtOff
      });
    }
  });
});

Using this code snippet that I made will allow the extension to be turned of and on by clicking the icon in the tab bar.

This code goes inside your background.js service worker.