反向工程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)搜索后会告诉你你所在的网址......并且它从那里变得更加令人兴奋。

编辑号码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来打印发送给他们的参数：

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

希望这可以帮助。