我正在开发一个 Chrome devtools 扩展,它根据当前选定的节点在元素侧边栏窗格中显示内容。如文档中所述,使用选定节点的机制是调用chrome.devtools.inspectedWindow.eval
eval'd 代码,包括$0
指向最近选定节点的变量。例如,要在控制台中显示当前选择的节点,我可以调用eval('console.log($0)')
. 有关此问题的背景信息,请参阅此stackoverflow 问题。
我遇到的问题涉及包含 iframe 的页面。eval 调用采用带有 frameURL 属性的选项对象。例如:
eval('console.log($0)',{frameURL: 'http://www.iframeexample.com'})
.
这允许调用者评估特定帧中的代码。但是,每个帧(about:blank
srcs 除外)都有自己的$0
变量,指向该帧窗口中最近选择的节点。如果一个页面有五个框架,则 有五个不同的值$0
,每个框架一个。当我的扩展收到onSelectionChanged事件时,我如何知道用户当前在 devtools 元素面板中选择了哪个节点,即哪个框架的窗口 $0 指向正确的节点?我怎样才能为正确的节点提供内容?
我的第二个相关问题涉及具有相似来源的 iframe。例如,frames.com页面有两个相同的 iframe 元素src
(不包括src
哈希值的差异)。使用重复的 src 值调用 eval 将在其中一个帧中执行,但不会在另一个帧中执行。我找不到检查当前选定节点的两个帧的方法,$0
. 在这种情况下,如果用户在框架中选择了我无法通过 eval 调用访问的节点,则无法提供与该节点相关的内容。
提供与当前选定节点相关的内容或功能是添加 devtools 扩展元素侧边栏面板的关键用例。onSelectionChanged事件在扩展程序应该检查新选择时触发,但事件回调没有收到有关所选节点的信息。鉴于上述问题,似乎不可能在多帧页面上可靠地定位用户的节点选择。我在我的方法中遗漏了一些基本的东西吗?