Understanding the Script

April 22, 2007

The Super Clean Skin is quite simple, and you can edit it yourself with a little knowledge of CSS and Javascript. For a detailed info on how-to create and edit Greasemonkey scripts go to their Dive Into page. This is the first time I’ve written a tutorial like this, so please forgive me this isn’t that good. 🙂

The Header Section

Here we specify the meta data of the script such as name, author info, description etc. The important stuff here is the “@include” which specify the URLs for which this script will be executed. There’s nothing you would want to change, if you intend to customize this skin.

// ==UserScript==
// @name           Gmail Super Clean
// @description    Cleans up Gmail. Adds Shine & Gloss.
// @author         Ganesh Rao
// @include        http://mail.google.com/*
// @include        https://mail.google.com/*
// @include        http://*.mail.google.com/*
// @include        https://*.mail.google.com/*
// ==/UserScript==

The Body

Here we start the actual Javascript code of the script. I’ll Try and explain each of these functions and bits now.

Firstly, the “host” is the URL where I’ve placed all the images that are used by this skin. If you wish, you could place these images on your own system and change this URL accordingly. That would speed up the initial load time a bit (I guess)

var host = 'http://artrulesmyworld.googlepages.com/';

Preferences

Initially, we set the default values of the variables, which will be loaded if the user has not changed the preferences.

//defaults
var customLogoURL = host+'gs_logo.png';
var showCustomLogo = 1;    //gmail will use its default logo when this is set to false
var showAds = 0;
var showBookmarks = 0;
var defaultFont = 'lucida grande';
//set by script

This script makes use of the user script command, so a latest version of Greasemonkey is necessary. If the current version of GM doesn’t support the user command functions, then we alert the user.

Else we go ahead and retireve the user’s preference values using the GM_getValue(‘preferenceName’, variableToValueLoadInto). Next, we register the necessary user script commands using the GM_registerMenuCommand( ‘Menu Caption’, functionName). Each of these functions are defined below.

if (!GM_xmlhttpRequest) {
	alert('Please upgrade to the latest version of Greasemonkey.');
	return;
} else {
	showCustomLogo = Number(GM_getValue('showCustomLogo', showCustomLogo));
	showAds = Number(GM_getValue('showAds', showAds));
	showBookmarks = Number(GM_getValue('showBookmarks', showBookmarks));
	customLogoURL = GM_getValue('customLogoURL', customLogoURL )
	defaultFont = GM_getValue('defaultFont', defaultFont);
	GM_registerMenuCommand((showCustomLogo ? 'Hide' : 'Show') + ' Custom Logo', switchLogo);
	GM_registerMenuCommand((showAds ? 'Hide' : 'Show') + ' Advertisements', switchAds);
	GM_registerMenuCommand((showBookmarks ? 'Hide' : 'Show') + ' Bookmarks', switchBookmarks);
	GM_registerMenuCommand('Change Font (currently: '+defaultFont+')', changeDefaultFont);
	if( showCustomLogo ) { GM_registerMenuCommand('Change Custom Logo URL', getCustomURL); }
	GM_registerMenuCommand('Post GSkin Bug', postBug);
}

Next, we define each of the functions that we attached to the menu. These functions determine what happens when the user clicks on the user script command menus. The logic for each of these functions is quite simple, first, we accept the new value for the preference using javascript prompt, then we copy that value into the preference variable using GM_setValue(‘preferenceName’, newValueLoadInto) and then we refresh the page so that the changes become visible.

function changeDefaultFont() {
	//accept new font name
	defaultFont = prompt('Enter Font-Family Name ex. Arial, Verdana, Tahoma etc', defaultFont);
	//set preference value
	GM_setValue('defaultFont', defaultFont );
	//refresh the page
	window.location.href = window.location.href;
}
function postBug() {
	emailTo = 'xxx@gmail.com';
	emailCC = 'xxx@gmail.com';
	emailSubject = 'GSkin Bug';
	emailBody = '';
	mailLink = "https://mail.google.com/mail?view=cm&tf=0" +
		(emailTo ? ("&to=" + emailTo) : "") +
		(emailCC ? ("&cc=" + emailCC) : "") +
		(emailSubject ? ("&su=" + emailSubject) : "") +
		(emailBody ? ("&body=" + emailBody) : "");
	window.open(mailLink);
}
function switchBookmarks(){
	GM_setValue('showBookmarks', showBookmarks ? 0 : 1 );
	window.location.href = window.location.href; //refresh page
}
function switchLogo(){
	GM_setValue('showCustomLogo', showCustomLogo ? 0 : 1 );
	window.location.href = window.location.href; //refresh page
}
function switchAds(){
	GM_setValue('showAds', showAds ? 0 : 1 );
	window.location.href = window.location.href; //refresh page
}
function getCustomURL() {
	url = prompt('Custom Logo Image URL',customLogoURL);
	GM_setValue('customLogoURL', url);
	window.location.href = window.location.href; //refresh page
}

The CSS

Finally, we add the css to the script. We do this using the DOM createElement and appendChild function, a standard GM technique. Here’s a great tutorial on creating DOM elements and accessing them. The variable css holds the css styles that you want to apply for the skin (I will be discussing this soon in another article).

var css = '/*your css code*/';

First, we initialize the css style node.

var header = document.getElementsByTagName('head');
var node = document.createElement('style');
node.type = 'text/css';
node.innerHTML = css;

Then, we append this node into the header section of the HTML file.

if(header)header[0].appendChild(node);

And we’re done!

Advertisements