如何切换开关 chrome 扩展

Question

我是开发 chrome 扩展的新手。我正在尝试构建一个简单的扩展，我希望该扩展可以通过图标在打开和关闭状态之间切换。

这是我目前使用的代码：

(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"
        });
    }
});

然后在同一个文件中，我正在做我想做的事情。到目前为止这是可行的，但问题是，是的，它适用于 if 语句：

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

但过了一会儿，由于我无法理解的原因（我已经使用“enabled”变量完成了控制台日志调试，它工作正常），扩展一直在工作，因为它处于禁用状态并且该图标显示其已禁用...

Answer 1

后台脚本在最后一个事件（例如 onClicked）后 30 秒后终止，因此您不能依赖全局变量，因为当后台脚本在终止后为新事件再次启动时它们将被重置。

一个解决方案 是更改弹出窗口文件名的散列部分，这意味着将显示相同的弹出文件，但其 location.hash 会有所不同：

后台脚本：

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});
});

弹出脚本：

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

另一种解决方案是将状态存储在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"]

如何切换开关 chrome 扩展

How to toggle switch chrome extension

javascript

google-chrome

google-chrome-extension