Chrome extension development #2

once i got the underlying control structure for the plugin down, the matter of writing the code for the reformatting of the google page.

The google search result page is fairly complicated(most of google's code seem cryptic and hard to understand). this is basically the structure of google's search result page



finding the div that contains the stuff that i want is pretty much impossible. so instead of trying to reformat google's page, i'll make a new page and format it however i like. this way i won't have to worry about google's restructuring of their webpage, and at the same time i won't have to touch their code.

first i start off by finding their body and replacing it with an empty one, and set override google's css so it would kill the 8 px margin on top/bottom.

var obody = document.getElementById("gsr");//note the id from google's body is 'gsr'
var body = document.createElement("body");//a new body
body.setAttribute("searchw");
body.setAttribute("leftmargin","0");
body.setAttribute("topmargin","0");
body.setAttribute("rightmargin","0");
body.setAttribute("bottommargin","0");
body.setAttribute("style","margin: 0px 0px;");

then i just need to replace the old body with the new one.

obody.parentNode.replaceChild(body,obody);//parentNode == html tag

at this point I have two choices, either split the page in half with a frameset, or with a table. considering framesets can only contain frames, which can ONLY be links to pre existing html, it would be fairly difficult for me to insert my own html if i want to in the future.

splitting the page into two with table is fairly simple, and splitting the page in two i can just stick an iframe in both cells, with the left iframe containing the results page, and the right iframe displaying links clicked on the left iframe.

Why not frames? why iframes?

no particular reason, it's just that creating a frame i need to contain it with frameset tags, while iframes are independent. creating objects with javascript DOM is quite bothersome, so i'm just trying to minimize the amount of code typed.

the google search page now looks like this:


of course there's actually NOTHING in the iframes. but we can fix that easily by linking appropriate pages in them.