Chrome 扩展后台页面应该如何与多个内容脚本进行通信？

Question

我在与后台页面的多个内容脚本进行通信时遇到问题。我的后台页面有如下代码：

chrome.tabs.sendRequest(tabId, { targetScript:"content1" }, function (resp) {
  if (resp.fromCorrectScript) {
    DoMoreStuff();
  }
});

我有如下内容脚本：

// content1.js
chrome.extension.onRequest.addListener(function (sender, request, sendResponse) {
  if (request.targetScript === "content1") {
    sendResponse({ fromCorrectScript:true });
  } else {
    sendResponse({});
  }
}); 

我的理解是

// content2.js
chrome.extension.onRequest.addListener(function (sender, request, sendResponse) {
  if (request.targetScript === "content2") {
    sendResponse({ fromCorrectScript:true });
  } else {
    sendResponse({});
  }
});

，我在后台页面中的回调应该被调用两次，每个内容脚本调用一次。看起来有时它只被调用两次，而且几乎只有当我在 if 子句中有断点时才被调用。我在这里做错了什么吗？

谢谢，

-格雷格

Answer 1

好吧，看起来只要我确保只有一个内容脚本响应该消息，它就可以正常工作。所以我的内容脚本代码应该更像是：

// content1.js
chrome.extension.onRequest.addListener(function (sender, request, sendResponse) {
  if (request.targetScript === "content1") {
    sendResponse({ fromCorrectScript:true });
  }
});

和

// content2.js
chrome.extension.onRequest.addListener(function (sender, request, sendResponse) {
  if (request.targetScript === "content2") {
    sendResponse({ fromCorrectScript:true });
  }
});

Answer 2

我不知道问题的根源是什么，只能猜测首先运行回调的脚本会销毁其余的脚本。

不过我可以建议解决方法。您可以双向发送请求，而不仅仅是从后台页面到脚本。所以你的背景页面可能看起来像：

chrome.tabs.sendRequest(tabId, { targetScript:"content1" });

chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
  if (request.fromCorrectScript) {
    DoMoreStuff();
  }
}); 

在脚本中：

chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
  if (request.targetScript === "content1") {
    chrome.extension.sendRequest({fromCorrectScript:true});
  } else {
    chrome.extension.sendRequest({fromCorrectScript:false});
  }
}); 

这不应该令人窒息。