Сохранить переключение между разными вкладками

Question

Я работаю над расширением Google Chrome, которое вы должны включать и выключать с помощью символа на панели инструментов расширения. Этот переключатель должен быть универсальным, а это означает, что независимо от того, где вы его включаете или выключаете, текущее состояние сохраняется везде. Неважно, на какой вкладке или в каком окне вы находились, статус доступен везде.

Давайте просто скажем, для нашего примера, он должен написать "Я в сети!" в консоли, когда он включен, и вы нажимаете клавишу А. Если он выключен и вы нажимаете A, он говорит: «Я выключен!».

manifest.json:

{
  "name": "Test Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Just a test for Stack Overflow.",
  "browser_action": {
    "default_icon": "images/icon.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

background.js:

var extensionMode = true;

chrome.browserAction.onClicked.addListener(function(tab) {

  extensionMode = !extensionMode;

  if(extensionMode) {
    chrome.browserAction.setIcon({
      path : "images/icon.png"
    });
  } else {
    chrome.browserAction.setIcon({
      path : "images/icon_disabled.png"
    });
  }

  let msg = {
    extensionMode: extensionMode
  }

  chrome.tabs.sendMessage(tab.id, msg);
});

content.js:

var extensionMode = true;

chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendResponse) {
  extensionMode = message.extensionMode;
}

onkeydown = onkeyup = function(e){
  if(extensionMode) {
    if(event.keyCode == 65) { // A
        console.log("I'm on!");
    }
  } else {
    if(event.keyCode == 65) { // A
        console.log("I'm off!");
    }
  }
}

Приведенный выше код работает, когда вы находитесь на вкладке, но не при переключении ... значок останется отключенным, но extensionMode фактически вернется к значению true.

Что я здесь не так делаю? Это неправильный подход к тому, что я пытаюсь сделать?

Answer 1

chrome.tabs.sendMessage предназначается только для одной вкладки, поэтому вам нужно получить список всех вкладок, используя chrome.tabs.query и отправить сообщение каждой из них:

const ignoreRuntimeError = () => chrome.runtime.lastError;
chrome.tabs.query({}, tabs => {
  tabs.forEach(tab => chrome.tabs.sendMessage(tab.id, msg, ignoreRuntimeError));
});

Вам также потребуется запросить состояние в сценариях содержимого на вкладках, которые будут открываться / открываться позже:

chrome.runtime.sendMessage('getState', state => extensionMode = state);

Для которого фоновый сценарий должен иметь прослушиватель:

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg === 'getState') {
    sendResponse(extensionMode);
  }
});

Ещеэффективный подход для рассмотрения:

• использование страницы непостоянных событий и сохранение состояния в chrome.storage.local
• запуск сценариев содержимого только при включениииспользование chrome.tabs.executeScript и регистрация / отмена регистрации прослушивателей DOM при переключении