javascript - Chrome 扩展程序在所有选项卡中设置切换开关状态

Question

我正在制作一个简单的 Chrome 扩展程序，其中包含一个简单的开/关开关，请参见下文:

每当我启用此开关时，我都希望它的新开/关状态能够反射(reflect)在所有其他事件选项卡/新选项卡/chrome 实例中。

目前还没有发生这种情况，如果我在一个选项卡中启用它，它在另一个选项卡中仍然被禁用。

我的方法如下:

1. 向交换机添加事件监听器

2. 切换值，并将新值存储在 chrome.storage 中

3. 向后台脚本发送 chrome.runtime 消息，并更新所有 chrome 实例。

问题:每当我切换开关时，我都会收到以下错误:

此外，由于某种原因，我的background.js从未初始化，可能与上面的错误有关。

这是我的

background.js(监听要发送的消息，以便我可以更新其他选项卡)

console.log('?! loading background js !?') // this never fires :(

// Whenever a message has been passed, such as toggling the enable/disable switch, communicate that with other Chrome tabs/instances.
chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        // todo: update all chrome tabs with new switch state
        console.log('reached Background message handler!')
    }
);

popup.js(监听点击事件，执行切换 chrome.storage 切换值的脚本)

// when the toggle is updated, run our script
document.getElementById('enable-site-blocking').onclick = executeBlocking;

function executeBlocking() {
    chrome.tabs.executeScript({
        code: "setToggleState()"
    });
}

content-script.js(单击切换按钮时执行，设置存储状态并发送运行时消息)

setToggleState();

function setToggleState() {
    chrome.storage.sync.get(['isExtensionActive'], function (storage) {
        const invertedState = !storage.isExtensionActive;
        chrome.storage.sync.set({
            isExtensionActive: invertedState
        });

        console.log('sending message')

        // send an update to all other Chrome processes
        chrome.runtime.sendMessage({
            greeting: "hello"
        }, function (response) {
            console.log("done sending message");
        });
    });
}

所以，我的问题如下:

1. 对于维护跨选项卡切换开关的状态，我的方法是否正确？如果不是，我应该改变什么？
2. 导致上述错误的原因可能是什么？
3. 为什么我的background.js永远不会执行？

抱歉，如果问题很简单，我是 Chrome 扩展的新手!

有关其他上下文，请参阅我的 ma​​nifest.json 中的 content_scripts/background

感谢您的帮助

Answer 1

不需要background.js或消息传递，只需在popup.js中设置值并在内容脚本中使用chrome.storage.onChanged监听器。

popup.js:

function setToggleState() {
  chrome.storage.sync.get('isExtensionActive', storage => {
    chrome.storage.sync.set({
      isExtensionActive: !storage.isExtensionActive,
    });
  });
}

background.js:不需要

内容.js:

chrome.storage.sync.get('isExtensionActive', storage => {
  toggleSomething(storage.isExtensionActive);
});

chrome.storage.onChanged.addListener(changes => {
  if (changes.isExtensionActive) {
    toggleSomething(changes.isExtensionActive.newValue);
  }
});

function toggleSomething(state) {
  console.log('new state:', state);
  // ........... do something
}

注释:

• 后台脚本在单独的隐藏后台页面中运行，该页面具有 its own devtools .

• 弹出窗口也是单独窗口中的单独页面，因此它具有单独的开发工具:在弹出窗口内右键单击，然后单击“检查”。