如何从 Google Chrome 扩展程序访问网页的事件侦听器答案

【问题标题】：How can you gain access to a web page's event listeners from a Google Chrome extension如何从 Google Chrome 扩展程序访问网页的事件侦听器
【发布时间】：2011-03-14 17:17:26
【问题描述】：

我正在编写一个 Chrome 扩展程序来列出每个事件处理程序的源代码，这些事件处理程序附加到<a/> 标记，当您滚动它时。

目前，我已经打印出 href 属性 - $(this).attr("href") - 这很好用。源代码在github上http://github.com/grantyb/Google-Chrome-Link-URL-Extension。

当我扩展它以访问事件处理程序时，$(this).data("events") returns null。我确定我的<a/> 标签有一个 click() 处理程序，因为当我在我的网页中输出$("a").data("events") 时，它会正确列出处理程序。

似乎 jQuery 的 data() 方法正在检查沙盒数据，所以我无法从我的扩展中访问它。这是有道理的，因为我猜它存储在 jQuery 全局变量中，这显然是与位于我的扩展中的 jQuery 全局变量不同的变量。

是否有另一种方法可以访问 DOM 中对象的事件处理程序列表。事件处理程序甚至存储在 DOM 中吗？

【问题讨论】：

标签： javascript dom google-chrome-extension dom-events sandbox

【解决方案1】：

解决了一个了不起的黑客！

查看 GitHub 上的代码了解详情：http://github.com/grantyb/Google-Chrome-Link-URL-Extension。

内容脚本使用 jQuery 将 <script> 标记直接附加到主机页面（在此处插入疯狂的笑声）。 “寄生虫”脚本对主机页面具有完全的可见性，包括 DOM 和 javascript 沙箱，因为它现在是页面的一部分。它获取我需要的数据，将其编码为文本格式，并将其写入我之前准备的元素的属性中。

然后，我坐下来等待 (setTimeout(...,10)) 脚本执行其业务。当我被回调时，我会自己清理并直接从 DOM 元素中获取文本编码的数据。

有没有更简单的方法？这感觉很淘气。

【讨论】：

您可以改用正确的消息传递。 :) stackoverflow.com/questions/3227184/…

【解决方案2】：

您的整个扩展程序都是沙盒的。您可以从您的扩展程序访问 DOM，但不能访问 javascript。

唯一的交互方式是修改 DOM，使您的 javascript 在网页中加载。但是您仍然会被沙盒化，因此您无法直接通过 javascript 与您的扩展程序进行通信。

【讨论】：

感谢您的提示！我通过让内容脚本将<script> 元素附加到页面中解决了这个问题，该元素查找DOM 元素并使用jQuery 的$(node).data("events") 获取其事件侦听器。它通过使用适当的数据向自身添加一个属性来与我的扩展进行通信。显然，这仅适用于使用 jQuery API 附加事件处理程序的页面，但由于这就是我所使用的全部，这是我可以忍受的限制。可怕的黑客。我会假装我从来没有写过它。如果您有兴趣：github.com/grantyb/Google-Chrome-Link-URL-Extension.

【解决方案3】：

正如 WoLpH 所说，您的扩展程序是沙盒的，无法访问或修改任何网页 DOM。

不过，您可以使用content script 和message passing“优雅地”实现您的目标：

用于访问/修改网页 DOM 的内容脚本
在您的扩展程序和网页之间进行通信的消息传递

【讨论】：