javascript - Chrome 扩展程序等待将设置加载到事件处理程序中

Question

我正在开发一个 Chrome 扩展程序，其设置(基本上是两个标志)保留在 Chrome 本地存储中。我可以在选项页面上保存和检索保存的设置，如下所示:

保存:

function save_options() {
  var checkbox1checked = $("#checkbox1").prop("checked");
  var checkbox2checked = $("#checkbox2").prop("checked");
  chrome.storage.sync.set({
    checkbox1: checkbox1checked,
    checkbox2: checkbox2checked 
  }, function() {
    $("#status").text("Settings saved.");
    window.setTimeout(function() {
       $("#status").text("");
    }, 2000);
  });
}

检索:

function restore_options() {
  chrome.storage.sync.get({
    checkbox1: true,
    checkbox2: false
  }, function(items) {
    $("#checkbox1").prop("checked", items.checkbox1);
    $("#checkbox2").prop("checked", items.checkbox2);
  });
}

然后在我的内容脚本中，我编写了一个函数来检索设置，如下所示:

var checkbox1Checked = true;
var checkbox2Checked = false;
    function getSettings() {
      chrome.storage.sync.get({
        checkbox1: true,
        checkbox2: false
      }, function(items) {
        checkbox1Checked = items.checkbox1;
        checkbox2Checked = items.checkbox2;
      });
    }

我正在为“粘贴”事件添加一个事件处理程序，如下所示:

window.addEventListener('paste', handlePaste, true);

在 handlePaste 函数中，我正在调用 getSettings() 函数。但问题是，事件的进一步逻辑根据扩展设置来决定是否取消该事件。

我的逻辑是在 getSettings() 调用之后，但显然它在使用更新值初始化变量之前运行，因为我只能从第二次发生粘贴事件时看到正确的功能。

因此，我正在寻找一种方法来以某种方式等待加载设置，然后继续执行事件处理程序。我已经尝试过的事情:

1. 我尝试在回调中编写我的逻辑以进行设置检索。但这不起作用，因为处理程序函数在注册回调后返回，并且在异步操作正在进行时其他处理程序继续运行，使得稍后无法取消事件。

2. 我尝试使用 window.setTimeout 和其他类似解决方案等待设置加载，但无济于事。

3. 我想到，当我保存设置时，我可以从选项页面向所有运行内容脚本的页面发送某种消息，让它们立即了解更改的设置。我还没有尝试实现这一点，我不确定这是否可能。

4. 我尝试以某种方式克隆该事件，然后取消它，并在加载设置时，在必要时重新触发克隆的事件。但我一开始就在克隆粘贴事件时遇到了困难。

我该如何解决这个问题？非常感谢任何帮助，请记住，这是我的第一个 Chrome 扩展程序(我正在开发它供个人使用)。

Answer 1

内容脚本应在启动后立即检索设置，然后退出。应在 chrome.storage.sync.get() 调用的回调函数中继续执行，该函数应使用 chrome.storage.onChanged.addListener() 来添加事件chrome.storage.onChanged 事件的处理程序，以便检索到的设置可以保持最新。检索到的设置应存储在可由粘贴事件处理程序访问的变量中，以便它始终可以访问设置的当前值。例如

var checkbox1Checked, checkbox2Checked;
chrome.storage.sync.get({
    checkbox1: true,
    checkbox2: false
}, function(items) {
    checkbox1Checked = items.checkbox1;
    checkbox2Checked = items.checkbox2;
    chrome.storage.sync.onChanged.addListener(function(changes, area) {
        if (area !== "sync") return;
        if (changes.checkbox1) {
            checkbox1Checked = changes.checkbox1.newValue;
        }
        if (changes.checkbox2) {
            checkbox2Checked = changes.checkbox2.newValue;
        }
    });
    window.addEventListener('paste', handlePaste, true);
});

现在，粘贴事件处理程序可以立即访问变量 checkbox1Checked 和 checkbox2Checked 中的设置，而无需调用 chrome.storage.sync.get()。该处理程序被添加到 chrome.storage.sync.get() 回调函数中，以便在初始化设置变量之前无法调用它。