Chrome 扩展后台页面和内容脚本同步

Question

假设我的 Chrome 扩展程序的后台页面中有以下代码。

var opts;
chrome.storage.local.get(options, function(result) {
    opts = result[options];
});

chrome.runtime.onMessage.addListener(function(request, sender, response) {
    if (request.message === 'getOpts')
        response(opts);
});

在我的内容脚本中，我通过消息传递访问opts。

chrome.runtime.sendMessage({'message': 'getOpts'}, function(response) {
    console.log(opts);
});

是否可以保证在内容脚本运行之前定义选项？例如，在启动浏览器时，后台页面会运行，想必对chrome.storage.local.get的回调会被添加到后台页面的消息队列中。 Chrome 会在注入内容脚本之前完成该队列的处理吗？

我可以从内容脚本中调用 chrome.storage.local.get，但我的问题更笼统，因为我的后台页面中有额外的异步处理。目前，我的内容脚本会检查后台页面以确保一切就绪（使用间隔继续检查），但我不确定是否有必要进行此类检查。

Answer 1

您实际上可以异步回复消息。

chrome.runtime.onMessage.addListener(function(request, sender, response) {
  if (request.message === 'getOpts') {
    chrome.storage.local.get('options', function(result) {
      response(result[options]);
    });
    return true; // Indicate that response() will be called asynchronously
  }
});

在chrome.storage 的情况下，这确实是愚蠢的，因为 API 专门设计用于解决在内容脚本中使用 localStorage + 消息传递的迂回性质；您可以直接从内容脚本中查询。

但在异步处理的一般情况下，您可以推迟对消息的回复。你只需要从监听器返回一个真值来表明你还没有完成。

Answer 2

不要依赖定义的变量，即使它在您的测试中。一般来说，由于正常的时间安排，你的 var 应该在它收到消息的时候设置，但是为了确保你应该在你的后台 onMessage 中检查。我已经通过在全局中记住我是否已经初始化了扩展并且如果需要从 onMessage 中这样做来处理这个问题。 xan 的回答显示了在这种情况下如何在异步初始化完成后使用“return true”来处理消息。

在my chrome extension 上查看此示例（搜索bCalled）

你可以看到我有一个 sendResponse 方法负责检测回调是否已被调用，如果没有，则返回 true（假设异步操作正在进行中，稍后将调用回调）

您还可以通过在加载该变量的后台代码中假装延迟来进行试验和测试。