Javascript 所有选项卡中的Chrome扩展设置切换开关状态

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

每当我启用此开关时，我希望它的新开/关状态反映在所有其他活动选项卡/新选项卡/浏览器实例中

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

我的做法如下：

将事件侦听器添加到交换机

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

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

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

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

这是我的

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

因此，我的问题如下：

我的方法是否正确，可以在选项卡之间保持切换开关的状态？如果没有，我应该改变什么？ 上面显示的错误的原因可能是什么？ 为什么我的background.js从不执行？ 对不起，如果这是一些简单的，我是新的铬扩展

对于其他上下文，以下是my manifest.json中的内容\u脚本/背景

---

感谢您的帮助

不需要background.js或消息，只需在popup.js中设置值，并在内容脚本中使用chrome.storage.onChanged listener即可

popup.js：

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

background.js：没有必要

content.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
}

注:

后台脚本运行在单独的隐藏后台页面中，该页面具有

弹出窗口也是一个单独窗口中的单独页面，因此它有单独的devtools：右键单击弹出窗口内部，然后单击“检查”

---

不需要background.js或消息，只需在popup.js中设置值，并在内容脚本中使用chrome.storage.onChanged listener

popup.js：

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

background.js：没有必要

content.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
}

注:

后台脚本运行在单独的隐藏后台页面中，该页面具有

弹出窗口也是一个单独窗口中的单独页面，因此它有单独的devtools：右键单击弹出窗口内部，然后单击“检查”

---

感谢@grateful user，它导致了一个新的错误：无法建立连接。接收端不存在。我肯定是在用chrome.extension.onMessage发送消息。我刚刚了解了如何调试background.js，没有错误，正在加载background js！Firing我想我在找到背景调试后找到了答案，顺便说一句，你的回答让我找到了答案！如果你想回答的话，谢谢你修改后的问题@优雅用户。你认为我应该切换Background.js中的按钮吗？或者我应该在content-script.js中这样做。请随意发布一个答案作为回应，这样我就可以接受，而不是在我的popout.js或我的内容脚本中切换按钮。不确定此处的最佳做法是什么Chrome.extension.onMessage已在5年前被弃用，请不要传播过时的信息。谢谢@grateous，这会导致一个新错误：无法建立连接。接收端不存在。我肯定是在用chrome.extension.onMessage发送消息。我刚刚了解了如何调试background.js，没有错误，正在加载background js！Firing我想我在找到背景调试后找到了答案，顺便说一句，你的回答让我找到了答案！如果你想回答的话，谢谢你修改后的问题@优雅用户。你认为我应该切换Background.js中的按钮吗？或者我应该在content-script.js中这样做。请随意发布一个答案作为回应，这样我就可以接受，而不是在我的popout.js或我的内容脚本中切换按钮。不确定什么是最佳做法Chrome.extension.onMessage在5年前就被弃用了，请不要传播过时的信息。这是一个非常简洁的答案，它消除了我的许多误解。我还在调查自己，但我根据你的建议编辑了这个主题。遇到了这样一个问题：每当我在扩展之外单击时，状态都会重置，而其他选项卡仍然没有更新。再次感谢您的帮助。您需要在popup.js的开头读取当前状态，并相应地设置DOM元素。弹出窗口的执行环境在每次显示时都会重新创建，隐藏时会被销毁。这是一个非常简洁的答案，它消除了我的许多误解。我还在调查自己，但我根据你的建议编辑了这个主题。遇到了一个问题，每当我在ex之外单击时，状态就会重置

---

张力和其他选项卡仍不更新。再次感谢您的帮助。您需要在popup.js的开头读取当前状态，并相应地设置DOM元素。弹出窗口的执行环境将在每次显示时重新创建，并在隐藏时销毁。