Home

The Simplest GreaseMonkey Script - Javascript Clock

By Cristi - posted on April 30th, 2009 and tagged under

Today I finally took the time to have a look over GreaseMonkey. What I found odd was the apparent lack of "Hello World" samples or simple tutorials. I read the common pitfalls from the manual and I also skimmed through most of the manual, but I must admit that was a little bit boring.

Thus I decided to get my fingers dirty and try out a very simple script. I missed the power of jQuery or Prototype for working with Javascript, but from what I've read in another article, it should be possible to include those as well.

Any way, here's the result. You can change it however you like - right now it just displays a little clock underneath the Google home page. Hopefully it will be helpful for those looking for a very simple script to start with.

// --------------------------------------------------------------------
//
// ==UserScript==
// @name          GreaseMonkey Google Clock
// @namespace     http://irisquest.net/greasemonkey/GreaseClock
// @description   Displays a clock on the Google home page
// @include       http://www.google.com/
// ==/UserScript==
 
/**
 *   Transforms the argument to a two digit number by adding a leading
 *   "0" if required.
 */
function twoDigitNumber(number) {
	if (number >= 0 && number < 10) {
		return "0" + number;
	}
 
	return number;
}
 
/**
 *   Displays the time in the given parent element.
 */
function displayTime(parent) {
	var currentTime = new Date();	
 
	// Formats the time
	var timeString = twoDigitNumber(currentTime.getHours()) 
		+ ":" + twoDigitNumber(currentTime.getMinutes()) 
		+ ":" + twoDigitNumber(currentTime.getSeconds());
 
	parent.innerHTML = timeString;
}
 
/*
 * Registers the new "time" element.
 */
var new_obj = document.createElement("div");
new_obj.style.textAlign = "center";
var f = function() { displayTime(new_obj) };
 
document.getElementById("body").appendChild(new_obj);
 
window.setInterval(f, 1000);
To install the script, you should follow the instructions from the GreaseMonkey manual.