Chrome扩展程序在所有标签中设置了切换开关状态 [英] Chrome Extension set toggle switch state in all tabs

问题描述

我正在制作一个简单的Chrome扩展程序，其中包含一个简单的开/关开关，如下所示:

I am making a simple Chrome Extension that contains a simple on/off switch, see below:

无论何时启用此开关，我都希望它具有新的开/关状态，以反映在所有其他活动选项卡/新选项卡/chrome实例中.

Whenever I enable this switch, I want it the new on/off state to reflect in all other active tabs/new tabs/chrome instances.

目前还没有发生，如果我在一个选项卡中启用了它，则在另一个选项卡中仍然禁用了它.

This is not currently happening, if I enable it in one tab, it is still disabled in another.

我的方法如下:

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

1. Add an event listener to the switch

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

Toggle the value, and store the new value in chrome.storage

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

Send a chrome.runtime message to the background script, and update all chrome instances.

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

The problem: Whenever I toggle the switch, I receive the following error:

而且，由于某种原因，我的background.js从未初始化，可能与上述错误有关.

Also, for some reason my background.js never initializes, perhaps related to the error above.

这是我的

background.js (侦听要发送的消息，以便我可以更新其他标签)

background.js (listen for message to be sent, so that I can update other tabs)

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切换值的脚本)

popup.js (listens for click events, executes the script that toggles the chrome.storage toggle value)

// 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 (在单击切换按钮，设置存储状态并发送运行时消息时执行)

content-script.js (executes when the toggle button is clicked, setting storage state, and sending runtime message)

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扩展程序的新手！

Sorry if it is something simple, I am new to Chrome Extensions!

有关其他上下文，请参阅我的 manifest.json 中的content_scripts/背景

For additional context, here are the content_scripts/background in my manifest.json

谢谢您的帮助

推荐答案

不需要background.js或消息传递，只需在popup.js中设置值，然后在内容脚本中使用chrome.storage.onChanged侦听器即可.

There's no need for background.js or messaging, simply set the value in popup.js and use chrome.storage.onChanged listener in the content script.

popup.js:

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

background.js:没有必要

background.js: not necessary

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

该弹出窗口在单独的窗口中也是一个单独的页面，因此具有单独的devtools:在弹出窗口内部右键单击，然后单击检查".

The popup is also a separate page in a separate window so it has separate devtools: right-click inside the popup, then click "inspect".

这篇关于Chrome扩展程序在所有标签中设置了切换开关状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！