草庐IT

javascript - 在 chrome 扩展中,如何将跨源消息从父内容脚本发送到特定子 iframe 中的内容脚本

coder 2025-03-23 原文

我正在开发一个带有 list 的 Chrome 扩展程序,目前可以访问所有主机。后台脚本将内容脚本注入(inject)所有框架。 DOM 加载完成后,顶部页面/框架中的内容脚本开始遍历 DOM 树。当 walker 遇到 iframe 时,它​​需要向与该 iframe 窗口相关联的特定内容脚本发送消息(可能是跨源)以开始其工作,并在此消息中包含一些序列化数据。父窗口暂停执行并等待子窗口完成它的行走,并发送回一条消息,表明它已完成并连同序列化数据。 parent 然后继续其工作。我已经尝试了两种方法来解决这个问题:

  1. frameElement.contentWindow.postMessage:这在大多数情况下都有效,但并非总是如此。有时,与 iframe 窗口关联的内容脚本消息事件监听器永远不会收到消息。我无法确认原因,但我认为这是在我的监听器调用 event.stopImmediatePropagation() 之前附加的监听器。例如,在雅虎主页 ( https://www.yahoo.com ) 上,当向与 iframe 源 https://s.yimg.com/rq/darla/2-9-9/html/r-sf.html 关联的内容脚本发布消息时, 永远不会收到消息。这是一个与广告相关的 iframe。也许阻止消息是故意的。发布消息时没有错误,我使用“*”的 targetOrigin。
  2. chrome.runtime.sendMessage:我可以向后台页面发送消息,但不知道如何告诉后台页面将消息中继到哪个框架。父窗口内容脚本不知道与它在 DOM 遍历中遇到的子框架元素关联的 chrome 扩展 frameId。所以它无法告诉后台页面如何定向消息。

对于第 2 点,我尝试了两种在 stackoverflow 上找到的技术:

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

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

最佳答案

当您调用 chrome.runtime.sendMessage 时来自内容脚本,chrome.runtime.onMessage 的第二个参数listener ("sender") 包括属性 urlframeId。 您可以使用 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() 取消它。但是,不要盲目相信来自其他框架的信息,并始终验证消息(例如通过后台页面与其他框架通信)。

结合两种方法

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

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

  1. A 中的内容脚本:

    1. 向后台页面发送消息(例如包含框架B索引的消息)。
  2. 背景页面:

    1. 收到来自A的消息。
    2. 生成一个随机数,比如 R ( crypto.getRandomValues )。
    3. 存储从 RframeId 的映射(以及可选的包含在来自 A 的消息中的其他信息)。
    4. 使用这个随机值调用响应回调。
  3. A 中的内容脚本:

    1. 从后台页面接收R
    2. 在帧 B 上调用 postMessage 并传递 R
  4. B 中的内容脚本:

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

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

关于javascript - 在 chrome 扩展中,如何将跨源消息从父内容脚本发送到特定子 iframe 中的内容脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38103534/

有关javascript - 在 chrome 扩展中,如何将跨源消息从父内容脚本发送到特定子 iframe 中的内容脚本的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法? - 2

    总的来说,我对ruby​​还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby - 其他文件中的 Rake 任务 - 2

    我试图在一个项目中使用rake,如果我把所有东西都放到Rakefile中,它会很大并且很难读取/找到东西,所以我试着将每个命名空间放在lib/rake中它自己的文件中,我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题,但没有任务。我现在只有一个.rake文件作为测试,名为“servers.rake”,它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

  3. ruby-on-rails - Ruby net/ldap 模块中的内存泄漏 - 2

    作为我的Rails应用程序的一部分,我编写了一个小导入程序,它从我们的LDAP系统中吸取数据并将其塞入一个用户表中。不幸的是,与LDAP相关的代码在遍历我们的32K用户时泄漏了大量内存,我一直无法弄清楚如何解决这个问题。这个问题似乎在某种程度上与LDAP库有关,因为当我删除对LDAP内容的调用时,内存使用情况会很好地稳定下来。此外,不断增加的对象是Net::BER::BerIdentifiedString和Net::BER::BerIdentifiedArray,它们都是LDAP库的一部分。当我运行导入时,内存使用量最终达到超过1GB的峰值。如果问题存在,我需要找到一些方法来更正我的代

  4. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情? 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中,使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件,我们在StackOverflow上找到一个类似的问题

  5. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  6. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值,但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗?ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值,你可以这样做:values=@input[x]

  7. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前,我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它,但这似乎不是“ruby方式”,我将需要在不久的将来访问更多模型。这可能会变得很脏,是否有针对这种情况的任何技术?注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展,本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向,这似乎很麻烦。最终从任何

  8. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他,以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时,出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  9. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗? - 2

    刚入门rails,开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗?有哪些用例。您如何为Rails应用程序使用应用程序Controller?我不想在那里放太多代码,因为据我了解,每个请求都会调用此Controller。这是真的? 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度,尽管在某些情况下ApplicationContr

  10. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数,它是一个简单的复选框,但我不知道如何在模型的form_for中引入它,这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框,但我该怎么做,模型中没有一个对象,而是一个要检查的对象,以便在Controller中创建一个ifelse,如果没有检查,请帮助我,非常感谢,谢谢

随机推荐