反向工程DOM,Javascript事件和"发生了什么"？

Question

我正在试图弄清楚Google的实时页面预览的javascript中发生了什么.

为什么不通过Javascript可点击我添加到DOM的链接？(更多上下文)

http://chesser.ca/2010/11/google-visual-image-search-hack-marklet/获取"最新演示"

如果您在Google上搜索,则会通过实时搜索在页面上显示结果.然后,如果您将结果集中的一个放大镜鼠标悬停,则会发生许多事情.

1. 放大镜烧毁的mousover事件
2. 这称为具有未知参数的(尚未)未知函数
3. 该功能对谷歌的图像结果查询服务器进行跨站点调用
4. 这些结果存储在谷歌的VS类内存`google.vs.ha`中

我已经复制了谷歌库中的代码并通过一个非缩小器运行它,因此它的可读性稍高一些.我还通过firebug在代码中安装了断点,这样我就可以在加载页面之前和之后检查dom和内存空间.

我的最终目标是能够mousover通过调用被调用的相同函数来复制代码中的事件 - 但是 - 我一直试图找到正确的函数.(我确定它涉及google.vs.Ga(a, b, c)但我还没到那里.

我知道这几乎是最疯狂的痴迷 - 但是 - 我不知道.也许如果你也在星期天阅读堆栈,你明白:)

什么函数被称为"On Hover",它发出命令来获取图像请求？

编辑:到目前为止,有一些赞成票,我认为我会为想要赶上萤火虫的人添加更多背景,你可以随时跟踪javascript中发生的事情.

是谷歌看起来像"在内存中"的图片,您可以查看所有函数和调用以及变量的当前状态.

您还可以通过在书签栏中放置链接来实际访问和调用这些变量.例如javascript:alert(google.base_href),在搜索之后会告诉您您所在的URL ...并且从那里开始变得更加令人兴奋.

编辑号码2:

非常感谢Matt一次成功解决这个问题:)

 <a href="javascript:
     (function(){
         var all_divs = document.getElementsByTagName('div');
         for (i=0;i < all_divs.length; i++) {
             if (all_divs[i].className == 'vsc') {
                 google.vs.ea(all_divs[i]);
             }
         }
     })();">test all vsc</a>

Answer 1

我的方法：我运行了一个探查器，并尽可能多次地将鼠标悬停在结果上（希望使该函数在探查器结果中脱颖而出）

预览功能好像是google.vs.P

使用以下参数调用它：

• 结果的 DOM 元素 (div.vsc)
• 结果信息（看起来与google.vs.ha商店类似）

第二个参数由 计算google.vs.ea，它采用 DOM 元素作为其参数。

我认为，由于它将元素作为唯一参数，因此这可能是悬停时调用的函数。

所以悬停侦听器可能看起来像这样：

document.addEventListener('mouseover', function (event) {
    if (/\bvsc\b/.test(event.target.className)) {
        console.log('preview!');
        google.vs.ea(event.target);
    }
}, false);

解释

根据下面的要求，这里有更多信息

我在 Chromium 中运行了 Webkit Inspector 附带的分析器。将结果悬停几次后，探查器结果如下所示：

正如您所看到的，这些函数实际上确实达到了顶部附近。

所以在那之后，我决定重载google.vs.P并google.vs.ea只打印发送给他们的参数：

正如您在屏幕截图中看到的那样……查看参数，两个函数之间的关系变得更加清晰。（但是，当然，在这个兔子洞里还有很多工作要做……）

希望这可以帮助。