javascript - Chrome 扩展 : Send Message from Background to Injected Script

Question

我目前正在使用 Chrome 扩展程序，但找不到一个方便的解决方案来将消息从后台上下文(我们称之为 BG)发送到注入(inject)脚本的上下文(让称之为INJ)。从 INJ 向 BG 发送消息就像一个魅力。但我希望 BG 执行一个 XMLHttpRequest，这可能需要一些时间，所以我想将此请求的评估发送给 INJ。 p>

不幸的是，我不允许在 INJ 的上下文中注册监听器。所以我能想到的最佳解决方案包括:

• 从 INJ 向 BG 发送消息，触发 XMLHttpRequest
• 一旦请求返回BG就将请求的结果存储在本地
• INJ 反复向 BG 发送更多消息询问结果，除非 BG 回答结果。

也许是这样的:

INJ:

function whaitForResult ()
{
  chrome.runtime.sendMessage ({method: "getResult"}, function (response)
  {
    if (response.finished === "true")
      // request finished, lets go on
    else
      setTimeout(whaitForResult, 100);
  }
}
chrome.runtime.sendMessage({method : "triggerRequest"}, function(response) {});
whaitForResult ();

背景:

chrome.runtime.onMessage.addListener (function(request, sender, sendResponse)
{
  if (request.method == "triggerRequest")
  {
    // startXMLHttpRequest ();
    sendResponse ({});
    return true;
  }
  else if (request.method == "getResult")
  {
    if (finishedXMLHttpRequest ())
      sendResponse ({finished:"true", result: resultFromXMLHttpRequest ()});
    else
      sendResponse ({finished:"false"});
    return true;
  }
});

我想这应该可行，但在我看来它相当困惑。所以我的问题是:有没有一种方便的方法可以向注入(inject)的脚本发送消息？

如果我的扩展概念很糟糕，请提出替代方案。但是要执行 XMLHttpRequest，我需要 localStorage 中的一些变量，因为这些数据非常敏感，所以我不想将这些变量传递给 INJ 的上下文。因此，在 INJ 中执行 XMLHttpRequest 不是一个选项。

Answer 1

在我继续之前，我想指出你只是在处理一个普通的内容脚本，而不是一个“注入(inject)的脚本”(根据 my definition )。

不要在第一次请求时发送响应 (sendResponse({}))。相反，在响应完成时调用 sendResponse:

// Content script
chrome.runtime.sendMessage({method: "getResultForRequest"}, function(response) {

});
// Background page
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.method == "getResultForRequest") {
        $.ajax({success: sendResponse}); // Example
        return true;
    }
});

如本答案顶部所述，您要处理的不是注入(inject)脚本，而是内容脚本。 script execution environment of the content script和页面严格分开，所以页面无法读取变量。换句话说，你的前提是有缺陷的；可以将凭据从后台页面传递到内容脚本。

我建议不要使用 localStorage，而是使用 chrome.storage应用程序接口(interface)。此异步 API 允许内容脚本直接读取扩展存储的持久变量。因此，您不再需要背景或事件页面。有关更详细的比较和示例，我引用了 this answer .

注意:有两种情况让后台页面处理 XHR 是有意义的:

• 该页面的内容安全策略阻止了目标 URL(此 affects Chrome extensions)
• 当前页面是通过 https 提供的，而请求的资源是通过 http 提供的。混合使用 http 和 https 会改变挂锁的外观，应尽可能避免。

但除此之外，我建议使用 chrome.storage API 并在您的内容脚本中执行跨域 http 请求。