Chrome extension development #4 - making a custom toolbar GUI procedurally

since this project is based on fast loading time and minimalism, loading a billion images on load would defeat the purpose of this undertaking; therefore i will try to focus on generating a clean looking gui with pure css and html.

why do we need a seperate gui on this? isn't it functional already?

through user feedback, i realized that the plugin is missing a key feature: removing the frame itself. instead of reinventing the wheel, i just turned to google images' framing system. i figured that i could include an 18 px high bar on top of the right side that can contain various functions/information, and it shouldn't be too much of an obstruction to the user.

in this post i will explain how each of the functions on the toolbar is coded.



going from the left to right, the first button is the 'resize' button. on click, the button enlarges the frame on the right. click again, and the button resizes it back to normal. instead of an instant onclick = "document.getElementById('leftFrameCell').setAttribute('style','width = 20%');", i chose to be cute and add a sliding animation to the resizing of the frame(or table cell rather, since the frame sits in a td element).

to achieve animation we need to have a pause in between each different width. if we were going from 50% to 20%, we might first set it to 48, then 46, then 44, until we hit 20. i can't just put a for loop like this:

for(i=50;i---->20;)
     document.getElementById('leftFrameCell').setAttribute('style','width = '+i+'%');

because this for loop would be evaluated instantly and it would be the same as

document.getElementById('leftFrameCell').setAttribute('style','width = 20%');

in java or c++ i would just put a sleep(20) or Thread.sleep(20) in the loop so it would set the width, wait 20 ms, then set the width again, thus achieving the illusion of animation.

however, javascript does not have a sleep(20) function, which makes my life that much harder. jscript does, however, have a setTimeout('f()',delay) function, which evals f() after 'delay' seconds. a clever way to use this to simulate sleep() would be using setTimeout to recursively call the function, as such:

var i = 50;
function a(){
    document.getElementById('leftFrameCell').setAttribute('style','width = '+i+'%');
    if(i==0) return;
    i----;
    setTimeout('a()',delay);
}

with this we can achieve a sliding animation without freezing the browser.

the second item on the toolbar is a textbox for the URL. this is also quite a hassle to code as it is impossible to find out the URL of a frame after user interaction. the quick and dirty way i did it was just modified the onclick events of the links in the google search results to change the value the textbox. since it's not cross domain scripting(the page containing the frame is in the same domain as the frame), the frame can access the methods/variables of the parent page.

the third and forth buttons are remove frame, and show the link in a new tab. these are pretty straight forward as they just involve changing document.location.href, and window.load().

Changing the looks of the toolbar is a lot like writing css for an html page, except instead of writing the css, i have to write the css, and inject the css into the page. we can access the stylesheets of a webpage by:

document.styleSheets;
/*msdn: document.styleSheets: Retrieves a collection of styleSheet objects representing the style sheets that correspond to each instance of a link or style object in the document.*/

from that, i can access each stylesheet by referencing document.styleSheets[0] or document.styleSheets[i]. to add a style for buttons or textboxes, i can call the addRule() method:

document.styleSheets[0].addRule("input.btn","height: 22px; margin:0 2% 0 0;color:#FEFEFE;font-family:\"Helvetica\",Sans Serif; background-color:#505050;  border:0px solid; -webkit-border-radius: 3px; border-color: #505050;");
document.styleSheets[0].addRule("input.btnhov","border-color: #1286FF;background-color:#1286FF;");
document.styleSheets[0].addRule("input.txt","height: 18px; margin:0 4% 0 0;color:#424242;font-family:\"Helvetica\",Sans Serif; background-color:#FEFEFE;  border:2px solid; -webkit-border-radius: 2px; border-color: #505050;");
document.styleSheets[0].addRule("input.txthov","border-color: #1286FF;background-color:#FEFEFE;");
document.styleSheets[0].addRule("input.label","height: 22px; margin:0 1% 0 0;color:#FEFEFE;font-family:\"Helvetica\",Sans Serif; background-color:#505050;  border:0px solid; -webkit-border-radius: 3px; border-color: #505050;");

thankfully for css 3.0, i was able to create buttons/textbox with a rounded corner with the -webkit-border-radius property. i can then set the class of the buttons by just using a setAttribute('class','btn'), and i can create a rollover button by just doing:

left.setAttribute("onmouseover","this.className='btn btnhov'");
left.setAttribute("onmouseout","this.className='btn'");

that's about it! a nice looking(and functional) toolbar is made with pure dom javascript.