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（）调用之后，但显然它在使用更新的值初始化变量之前运行，因为我只能在粘贴事件的第二次出现时看到正确的功能。

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

我试图在回调中编写我的逻辑以进行设置检索。但这不起作用，因为处理程序函数在注册回调后返回，并且在异步操作正在进行时其他处理程序继续运行，从而使事件取消后来不可能。
我试图等待使用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扩展程序等待在事件处理程序中加载设置

1 个答案: