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

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

本文关键字：程序 事件处理 加载 等待 扩展 Chrome 设置      更新时间：2023-09-26

我正在开发一个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扩展程序（我正在开发它供个人使用）。

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

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() 回调函数中，以便在初始化设置变量之前无法调用它。

相关文章：