GoogleThemer App

Objective

We love Bing's homepage! Can we do that to Google's homepage? :)

Planning your App

Given that we have access to three callbacks - init, options & contextAction - to load a nice background into Google.com homepage, we can just define init & we should be good. init would be called the moment our App is loaded.

App Manifest

_adomado_prefs_apps["manifests"]["__APP_ID__"] = {
  "name" : "Google Themer",
  "version" : "1.0.1",
  "runOnDomains" : [
                    {
                      "domain" : /(http:\/\/|www.)google.co/,
                      "paths" : [ "/" ]
                    }
                   ]
};

The manifest defines this App to run on Google's homepage ("/" path)

App codebase

(function(config) {
  var GoogleThemer = {
    contentId : "ires",
    themeId : "google-theme",
    googleHeaderHeight : 30,

    init : function() {
      var images = [
        "http://7te.org/x1209828747_2848_1600_1200/Abstract-0032-wallpaper_1600x1200.jpg",
        "http://7te.org/x1188241234_1400_1920_1200/Magic-wind-blue-wallpaper_1920x1200.jpg",
        "http://7te.org/x1191395921_1896_1920_1200/Green-leaves-wallpaper_1920x1200.jpg"
      ];

      $j('body').css({
        'background-image' : 'url('+ IJCommon.randomFromArray(images) +')', 
        'background-repeat' : 'no-repeat',
        'background-size' : ""+$j(document).width()+"px "+$j(document).height() +"px" 
      });

      if($j('#hplogo').prop('tagName') == "DIV" )
        $j('#hplogo').css({
          'background-image': 'url("http://cs.adomado.com/google_themer/google_logo.png")', 
          'background-repeat' : 'no-repeat', 
          'background-size' : '275px 95px' 
        });
      else if($j('#hplogo').prop('tagName') == "IMG")
        $j('#hplogo')
          .attr('src', 'http://cs.adomado.com/google_themer/google_logo.png')
          .css({width : '275px', height : '95px'});

      GoogleThemer.watchWhenToRemove();
    },

    watchWhenToRemove : function() {
      $j('input[title*="Search"]').keyup(function() {
        $j('body').css({ 'background-image' : 'none'});
      });
    }
  };  // GoogleThemer

  config.api.callbacks({
    init : GoogleThemer.init
  });

})({
  api : new IJAppApi.v1({appId : "__APP_ID__"})
});

Explanation

When the App loads, the GoogleThemer.init is called. The init function selects an image at random (from a predefined set) and sets it up as a background image (with some required css parameters). The init function then goes onto setup a Google logo which looks good on the background.

Now if the user tries to search from Google's homepage while the BODY element has a background, this background will also appear on the search result page (as the page is not refreshed on search). This can cause the results listing to look pretty awkward. To fix this, the App needs to be able to remove the background the moment user starts searching for something. The GoogleThemer.watchWhenToRemove functions watches for a "keyup" event on the search box. The moment a keypress happens on the search box, the background is removed.

The End :)

As you can see, with just 50 lines of code, we've created an awesome Google Themer App