Simple UI for Google Search with Greasemonkey and jQuery

January 17, 2009 in Uncategorized
Tags: code, greasemonkey, jQuery

'simple google' gm script screenshot 1

'simple google' gm script screenshot 2

we all agree that most of the google web apps our there are simple. i love simple things too. in fact i am a firm ‘believer’ of the KISS philosophy. any ways getting in to the subject. google search have been very simple so far. and it still is very much simple. but i feel at times that it could be much more simpler that it is. i don’t need it’s menu bar, and i don’t want to see all those other links it have on its page…etc so with my new found love jQuery, i thought of making it a bit more simpler. i just removed(set style to display : none; so its there, but its hidden from the user’s view) all most every thing other than the google logo and the text box in the page from the users view. it was pretty straight forward actually. here the code.

// ==UserScript==
// @name           simplegoogle
// @namespace      thekindofme
// @include        http://www.google.lk/
// @include    http://www.google.lk/webhp*

// ==/UserScript==

//hide the whole document till GM runs letsJQuery()
document.body.style.display = "none";

// Add jQuery
    var GM_JQ = document.createElement('script');
    GM_JQ.src = 'http://code.jquery.com/jquery-latest.js';
    GM_JQ.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
    function GM_wait() {
        if(typeof unsafeWindow.jQuery == 'undefined') {window.setTimeout(GM_wait,100);}
        else { $ = unsafeWindow.jQuery; letsJQuery(); }
    }
    GM_wait();

// All your GM code must be inside this function
    function letsJQuery() {
        $("body > div").hide();
        $("center > *").hide();
        $("center > div > div").hide();
        $("center > div").show().css("margin-top", "20px"); //the google logo

        $("center > form").show();
        $("center > form > table > tbody > tr > td").hide();
        $("center > form > table > tbody > tr > td:eq(1)").show();
        $("center > form > table > tbody > tr > td:eq(1) > input").hide();

        var searchTextBox = $("center > form > table > tbody > tr > td:eq(1) > input:eq(1)").css("padding", "2px 6px 4px 6px").css("color", "#555555").css("background-color", "#E2FFE4").css("border", "#dddddd 2px solid").css("-moz-border-radius", "10px").css("margin-top", "15px");
        $("body").show();

        arrangesearchTextBoxLayout(searchTextBox);

        $(window).resize(function(){
            arrangesearchTextBoxLayout(searchTextBox);
            });

        searchTextBox.show().focus();
    }

    function arrangesearchTextBoxLayout(searchTextBox){
        searchTextBox.css("width", ($(window).width() /2)).css("font-size",($(window).height() /22) + "px");

    }

keep it simple stupid