在 chrome 扩展中，如何将 cross-origin 消息从 parent 内容脚本发送到特定 child iframe 中的内容脚本

Question

我正在开发一个带有清单的 Chrome 扩展，目前允许访问所有主机。后台脚本将内容脚本注入所有框架。 DOM 加载后，顶部 page/frame 中的内容脚本开始遍历 DOM 树。当 walker 遇到 iframe 时，它​​需要向与该 iframe 的 window（可能是 cross-origin）关联的特定内容脚本发送消息以开始其工作，并在此消息中包含一些序列化数据。 parent window 暂停执行并等待 child 完成它的遍历并发回一条消息，表明它已完成，连同序列化数据。 parent 然后继续它的工作。我已经尝试了两种方法来解决这个问题：

1. frameElement.contentWindow.postMessage：这在大多数情况下都有效，但并非总是如此。有时，与 iframe window 关联的内容脚本消息事件侦听器永远不会收到消息。我无法确认原因，但我认为是在我的听众调用 event.stopImmediatePropagation() 之前附加了听众。比如在yahoo首页(https://www.yahoo.com), when posting a message to my content script associated with iframe source https://s.yimg.com/rq/darla/2-9-9/html/r-sf.html，一直收不到消息，这是一个ad-related iframe，可能是故意屏蔽消息，当消息是[=63时，没有报错=]ed 并且我使用了“*”的 targetOrigin。
2. chrome.runtime.sendMessage: 我可以向后台页面发送消息，但不知道如何告诉后台页面将消息转发到哪个框架。 parent window 内容脚本不知道 chrome 扩展 frameId 与它在 DOM 行走中遇到的 child 框架元素关联。所以它无法告诉后台页面如何引导消息。

对于第 2 点，我尝试了两种在 Whosebug 上找到的技术：

1. 使用此question中描述的概念：在parentwindow中，确定iframe在window.frames数组中的位置，并post向后台发送消息具有此索引的页面。后台页面 post 向消息数据中具有所需索引的所有框架发送一条消息。只有找到它在 window.parent.frames 数组中的 window object 位置的 iframe 与从消息中接收到的索引相匹配，它才会继续执行它的遍历。这工作正常，但在异步消息传递过程中容易受到 window.frames 数组更改的影响（如果在发送消息后删除 iframe，索引值可能不再匹配所需的框架）。
2. 在 parent window 中使用 frameElement.name 而不是第 1 点的索引值。使用相同的消息传递技术，将名称发送到 child iframe 以与其 window.name 值进行比较。我相信 window.name 在创建 iframe 元素时从 frameElement.name 获取它的值。但是，由于我不控制 frame 元素的创建，name 属性通常是一个空字符串，不能依赖它来唯一匹配 iframe 元素到它们的 windows.

有没有办法让我可靠地将消息发送到与行走 DOM 树时发现的 iframe 元素关联的内容脚本？

Answer 1

当您调用 chrome.runtime.sendMessage from a content script, the second parameter of the chrome.runtime.onMessage 时，侦听器 ("sender") 包含属性 url 和 frameId。 您可以使用 chrome.tabs.sendMessage 和给定的 frameId.

将消息（从扩展页面，例如后台页面）发送到特定框架

如果您想随时了解所有帧（及其帧 ID）的列表，请使用 chrome.webNavigation.getAllFrames。如果这样做，那么您可以在选项卡中构造一棵框架树，然后将此信息发送到所有框架以进行进一步处理。

靠谱postMessage / onMessage

frameElement.contentWindow.postMessage: this works most of the time, but not always. Sometimes the message is never received by the content script message event listener associated with the iframe window. I have not been able to confirm the cause but I think it is listeners attached before my listener calling event.stopImmediatePropagation()

这可以通过 运行 您在 "run_at":"document_start" 的脚本来解决，并立即注册 message 事件侦听器。那么你的处理程序将始终首先被调用，页面无法通过 event.stopImmediatePropagation() 取消它。但是，不要盲目相信来自其他框架的信息，并始终验证消息（例如通过后台页面与其他框架通信）。

结合两种方法

第一种方法提供了一种在帧之间交换数据的安全方法，但没有提供将帧 link 到特定 DOM 元素的通用方法。
第二种方法允许您定位特定的 (i)frame 元素，但任何网页都可以这样做，因此该方法本身并不可靠。 通过结合两者，您将获得一个安全的通信通道，该通道 linked 到 DOM 元素。

这是应用上述方法在框架A和B之间进行通信的基本示例：

1. A中的内容脚本：

   1. 向后台页面发送消息（例如包含框架B索引的消息）。

2. 背景页：

   1. 收到来自A的消息
   2. 生成一个随机数，例如 R (crypto.getRandomValues).
   3. 存储从 R 到 frameId 的映射（以及可选的包含在来自 A 的消息中的其他信息）。
   4. 用这个随机值调用响应回调。

3. A中的内容脚本：

   1. 从后台页面接收R
   2. 在帧 B 上调用 postMessage 并传递 R。

4. B 中的内容脚本:

   1. 从 A.
   收到 R
   2. 向后台页面发送消息以检索 frameId（以及可选的来自 A 的其他信息）。

注意：对于坚如磐石的应用程序，您需要考虑在任何这些步骤中框架被移除的事实。如果您忽略此过程的异步性质，您的应用程序可能会处于不一致状态。