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

我正在为 'paste' 事件添加事件处理程序，如下所示：

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

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

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

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

我试图在设置检索的回调中编写我的逻辑。但这不起作用，因为处理程序函数 returns 在注册回调后，其他处理程序在异步操作进行时继续运行，使得以后无法取消事件。
我已经尝试用window.setTimeout和其他类似的解决方案等待加载设置，但无济于事。
我突然想到，当我保存设置时，我可以从选项页面发送某种消息到内容脚本运行让它们现在关于的所有页面更改的设置。我还没有尝试实现这个，我不确定这是否可能。
我试过以某种方式克隆事件，然后取消它，并在加载设置时重新触发克隆事件（如有必要）。但是我一开始就很难克隆粘贴事件。

我该如何解决这个问题？非常感谢任何帮助，请记住这是我的第一个 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() 回调函数中，以便在初始化设置变量之前无法调用它。

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

Chrome extension wait for settings to be loaded in an event handler

javascript

jquery

google-chrome

google-chrome-extension

jquery-events