How to toggle switch chrome extension

user_6809098 0
Viewed 170

I am new to developing chrome extensions. I am trying to build a simple extension and I want that extension to be toggle between on and off states via the icon.

Here is the code I am using so far for achieving this:

(background.js)

var enabled = 1;
chrome.action.onClicked.addListener(function () {
    console.log(enabled);
    if (enabled == 0) {
        enabled = 1;
        chrome.action.setIcon({
            path: "images/on.png"
        });
    } else {
        enabled = 0;
        chrome.action.setIcon({
            path: "images/off.png"
        });
    }
});

And then in the same file, I am doing the stuff I want to do. This works so far but the problem is, yes the thing works with an if statement:

if(enabled == 1){
do this...}

But after a while because of a reason that I couldn't understand (I've done console log debugs with the "enabled" variable, it works fine), the extension keeps working since its in the disabled state and the icon shows its disabled...

google-chrome-extension google-chrome javascript
1 Answers

The background script is terminated after 30 seconds since the last event such as onClicked, so you can't rely on global variables as they will be reset when the background script starts again for a new event after it was terminated.

One solution is to change the hash part of the popup's file name, meaning that the same popup file will be shown, however its location.hash will be different:

background script:

chrome.action.onClicked.addListener(async () => {
  const popup = await chrome.action.getPopup({});
  const enabled = popup.includes('#off'); // new value of `enabled`
  const newPopup = popup.split('#')[0] + (enabled ? '' : '#off');
  chrome.action.setIcon({path: `images/${enabled ? 'on' : 'off'}.png`});
  await chrome.action.setPopup({popup: newPopup});
});

popup script:

const enabled = !location.hash.includes('#off');
//document.body.prepend('Enabled: ' + enabled);

Another solution is to store the state in chrome.storage.local:

chrome.action.onClicked.addListener(async () => {
  const enabled = !(await chrome.storage.local.get('enabled')).enabled;
  const path = `images/${enabled ? 'on' : 'off'}.png`;
  chrome.action.setIcon({path});
  await chrome.storage.local.set({enabled});
});

manifest.json:

  "permissions": ["storage"]
user_39598750
Related