Chrome Расширение установленного состояния тумблера во всех вкладках

Question

Я делаю простое расширение Chrome, которое содержит простой выключатель, см. Ниже:

Всякий раз, когда я включаю этот переключатель Я хочу, чтобы новое состояние включения / выключения отражалось во всех других активных вкладках / новых вкладках / chrome экземплярах.

В данный момент этого не происходит, если я включаю его на одной вкладке, он все еще отключен на другой.

Мой подход был следующим:

1. Добавить прослушиватель событий на коммутатор

2. Переключить значение и сохранить новое значение в chrome .storage

3. Отправить chrome.runtime сообщение фоновому сценарию и обновление всех chrome экземпляров.

Проблема : всякий раз, когда я переключаю переключатель, я получаю следующую ошибку:

Кроме того, по какой-то причине мой фон. 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!')
    }
);

всплывающее окно. 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 (выполняется при переключении но нажата кнопка n, задается состояние хранилища и отправляется сообщение времени выполнения)

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. Почему мой фон. js никогда не выполняется?

Извините, если это что-то простое, я новичок в Chrome Extensions!

Для дополнительного контекста, вот content_scripts / background в моем манифесте. json

Спасибо за любую помощь

Answer 1

Нет необходимости для фона. js или обмена сообщениями, просто установите значение во всплывающем окне. 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 .

• Всплывающее окно также является отдельной страницей в отдельном окне, поэтому у него есть отдельные devtools: щелкните правой кнопкой мыши внутри всплывающего окна, затем нажмите «проверить».