Reverse Engineering DOM, Javascript Events, and What's Up?

Question

I am trying to figure out what is happening in javascript viewing a google live page.

Why not links that I add to the DOM with Javascript capability? (for a bit more context)

http://chesser.ca/2010/11/google-visual-image-search-hack-marklet/ for the "last demo"

If you do a google search, the results will appear on the page through a direct search. Then, if you hover one of the magnifying points in your result set, several things will happen.

• mousover event for magnifying glass arrows
• this calls an (as yet) unknown function with unknown parameters
• The function makes a cross-site call to the Google search results query server.
• these results are stored in the memory of the google VS class `google.vs .ha`

I copied the code from the google library and ran it through unminifier so that it is more readable. I also set breakpoints in the code through firebug so that I can check the dom and memory space before and after the page loads.

My ultimate goal is to be able to replicate the mousover event in the code, calling the mousover same function that is being called - but - I'm stuck in finding the right function. (I'm sure it includes google.vs.Ga(a, b, c) , but I'm not quite there yet.

I know this is almost the craziest obsession ever, but ... I don't know. Maybe if you also read the stack on Sunday, you understand :)

What function is called "On Hover" that sends a command to receive image requests?

EDIT: There are several advantages to this so far, and I thought I would add a bit more background for those who want to catch up with Firebug, you can follow what happens in javascript at any time.

Whether the image of what Google looks “in memory”, you can look at all the functions and calls and the current state of the variables.

You can also access these variables and call them by placing links in the bookmarks bar. like javascript:alert(google.base_href) after the search shows you the url you are at ... and from there it turned out more exciting.

EDIT NUMBER 2:

Many thanks to Matt, who managed to crack it in one go :)

  <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

My approach: I launched the profiler and pointed at the results as many times as possible (I hope that the function stands out in the profiler results)

The preview function looks like google.vs.P

Called with the following arguments:

• DOM element for result (div.vsc)
• Information about the results (similar to google.vs.ha repository)

The second argument is calculated using google.vs.ea , which takes a DOM element as a parameter.

I assume that since the element takes it as the only parameter, it is probably a function called hover.

So, the guidance listener probably looks something like this:

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

Description

As indicated below, here is a bit more information.

I launched the profiler that comes with the Webkit Inspector in Chromium. After repeatedly pointing the results, the results of the profiler were as follows:

As you can see, the functions have really reached the top.

So after that, I decided to overload google.vs.P and google.vs.ea to just print the arguments that were sent to them:

As you can see in the screenshot .. looking at the arguments, the connection between the two functions becomes a little more understandable. (But, of course, digging a lot more to make it a rabbit hole.)

Hope this helps.