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