Javascript 如何实现从（纽约）网页到Chrome扩展的安全通信

我想在网页和Chrome扩展之间进行安全通信。经过相当多的检查和黑客攻击，这似乎至少是不平凡的，如果不是完全不可能的话

我想在扩展从网页中的某个JavaScript运行时向其后台页面发送消息。请注意，该网页会启动通信，这是非常不典型的！。我向分机发送了一些凭据，因此需要一个安全通道！然后，如果这些凭证是由后台页面中的逻辑确定的有效凭证，那么后台页面应该返回一些JSON值，然后web页面可以显示这些值

我已经有了一些代码，可以检查当前浏览器是否是Chrome，用户是否安装了所述扩展，如果不是，还可以安装一些UI，等等

我还使用window.postMessage运行了一些通信。它将一条消息从网页脚本发布到扩展内容脚本，然后从那里传播到后台页面。但是，作为报价，这是不安全的：

。。建议暂时不要使用postMessage与chrome:pages进行通信；当窗口打开时，使用不同的方法（如查询字符串）与Chrome窗口通信

此注释位于页面底部附近扩展名中使用window.postMessage的部分

这似乎是一个合理的建议，因为似乎没有办法排除使用postMessage发送的数据可能被浏览器中的另一个窗口/选项卡截获，而不是进入扩展。因此，可以利用此漏洞

在我的情况下，使用MDN文章所建议的查询字符串是不可能的，因为背景页是在开始时加载的，并且还没有URL参数

我的推理正确/清楚吗？有没有Chrome扩展专家有什么建议

注意：建议使用外部可连接的文档，但如“指定网站的匹配”部分中所述，仅允许子域通配符，问题域要求允许动态网站列表，不能在扩展的清单中硬编码。

您需要使用通信方法

如果您的扩展声明它希望与您需要在清单中列出的特定域通信，则chrome.runtime.sendMessage将暴露在页面上下文中

然后，在您的页面上，您可以通过以下方式传递信息：

var extensionID = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";

if(chrome && chrome.runtime && chrome.runtime.sendMessage) {
  // There is an extension that declared this page in externally_connectable
  chrome.runtime.sendMessage(extensionID, data);
} else {
  // Either this is not Chrome, or no extension wants to listen
}

在扩展端，您将在中获取数据

如果愿意，您可以使用chrome.runtime.connect建立双向长期连接

Chrome将确保只有具有给定ID的分机才能收到您的消息。这将保护您免受其他网页的窃听，但请注意，任何扩展都有足够的能力连接/修改页面脚本并获取数据

由于该问题已更新，没有固定的场地清单要求，因此有另一种解决方案。内容脚本可以使用DOM事件与页面脚本通信。它们不会泄漏到其他页面，但同样，这不能防止其他扩展

有关更多详细信息，请参阅；我将在这里留下一个代码片段作为示例

// Content script
//Listen for the event
window.addEventListener("PassToBackground", function(evt) {
  chrome.runtime.sendMessage(evt.detail);
}, false);

// Page context
var message = {/* whatever */};
var event = new CustomEvent("PassToBackground", {detail: message});
window.dispatchEvent(event);

你需要使用沟通的方法

如果您的扩展声明它希望与您需要在清单中列出的特定域通信，则chrome.runtime.sendMessage将暴露在页面上下文中

然后，在您的页面上，您可以通过以下方式传递信息：

var extensionID = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";

if(chrome && chrome.runtime && chrome.runtime.sendMessage) {
  // There is an extension that declared this page in externally_connectable
  chrome.runtime.sendMessage(extensionID, data);
} else {
  // Either this is not Chrome, or no extension wants to listen
}

在扩展端，您将在中获取数据

如果愿意，您可以使用chrome.runtime.connect建立双向长期连接

Chrome将确保只有具有给定ID的分机才能收到您的消息。这将保护您免受其他网页的窃听，但请注意，任何扩展都有足够的能力连接/修改页面脚本并获取数据

由于该问题已更新，没有固定的场地清单要求，因此有另一种解决方案。内容脚本可以使用DOM事件与页面脚本通信。它们不会泄漏到其他页面，但同样，这不能防止其他扩展

有关更多详细信息，请参阅；我将在这里留下一个代码片段作为示例

// Content script
//Listen for the event
window.addEventListener("PassToBackground", function(evt) {
  chrome.runtime.sendMessage(evt.detail);
}, false);

// Page context
var message = {/* whatever */};
var event = new CustomEvent("PassToBackground", {detail: message});
window.dispatchEvent(event);

---

感谢您快速而详细的回复！我读了Chrome扩展文档中的“消息”部分，我想我还记得这样的事情。但遗憾的是，没有一个固定的网站列表，我们希望能够与我们的扩展通信。这必须是可配置的，因为它会随着时间的推移不断增加。所以我们不能在清单中静态列出它们。也许我应该在我的问题陈述中提到这一点，但是现在你的答案对于其他没有这个限制的人来说当然是有价值的。我可能会爱上你

---

请在POC阶段完成此操作。感谢您快速而详细的回复！我读了Chrome扩展文档中的“消息”部分，我想我还记得这样的事情。但遗憾的是，没有一个固定的网站列表，我们希望能够与我们的扩展通信。这必须是可配置的，因为它会随着时间的推移不断增加。所以我们不能在清单中静态列出它们。也许我应该在我的问题陈述中提到这一点，但是现在你的答案对于其他没有这个限制的人来说当然是有价值的。我可能会在POC阶段使用这个。