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!

9 Responses to “Understanding the Script”

  1. Chaitanya Says:

    Hi!
    Nice script. The pop-down menu at the top-right corner of a conversation is not available. Can you make it so?

  2. PHuesken Says:

    Hi,

    Very nice script.
    Some remarks:
    – when replying to a message, the width of text box for the reply message is a lot smaller; is this done intentionally or is this a bug
    – I´d like the posibillity to specify different font-types and -sizes for the menu (on the left) and the mail headers
    – I´d like to be able to tailor the amount of vertical space each mail-header line takes
    – this super clean gmail is aaalmost too clean; i´d like it a liiiitle bit darker, so some external tweak capabilities in this area would also be appriciated

    Keep up the good work !

    Cheers,
    Peter Huesken

  3. apodysophilia Says:

    Nice script. I would love to change the size of the bookmark font only. Is there a way to currently do that?

  4. tomv Says:

    Hi!

    I’m loving this script! makes gmail even more usable and nice and clean. If someone can mod this for google cal it would make the world perfect! I tried it but couldn’t yet get my head around it.

  5. df Says:

    Could you comment the CSS section so people know what applies to what?


  6. […] A super clean/white GMail interface Install instructions | Known issues | Understanding the script Gmail Super Clean was made to simplify the way Gmail looks. It’s got quite a few […]


  7. […] A super clean/white GMail interface Install instructions | Known issues | Understanding the script Gmail Super Clean was made to simplify the way Gmail looks. It’s got quite a few […]

  8. Schnapp Says:

    Great script! Good explanation, too!
    But what really annoys me is that there is no(acceptable)label coloring script out there yet.
    The base64 decoding seems to me as a great opportunity to solve this problem in an elegant way.
    Unfortunately my programming skills aren’t enough to do this on my own.
    Would it be possible to apply an own background image to each label in Gmail’s messages frame, maybe using an xpath command?
    Would be great if anyone with programming experience could comment on this suggestion as I feel like giving that idea a try if it’s theoretically possible.
    Thanks in advance!

  9. partytent Says:

    Abnormally well executed piece of writing


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: