The html blog » dom

Writing your first Greasemonkey script – adding menus to Facebook’s top menu

asvin — Thu, 30 Apr 2009 19:25:50 +0000

This post will show you how to write a basic Greasemonkey script that will add two more menu items to Facebook’s friends top menu as shown below.

These 2 menu items are :

“Recently Updated” – show all your friends with recent updates
“Status Updates” – show the latest status updates of your friends

About Greasemonkey

Greasemonkey is a Firefox extension that allows you to write scripts that alter the web pages you visit. You can

use it to make a web site more readable or more usable
fix rendering bugs that the site owner can’t be bothered to fix themselves.
alter pages so they work better with assistive technologies that speak a web page out loud or convert it to Braille
even automatically retrieve data from other sites to make two sites more interconnected.

Greasemonkey by itself does none of these things. In fact, after you install it, you won’t notice any change at all… until you start installing what are called “user scripts”. A user script is just a chunk of javascript code, with some additional information that tells Greasemonkey where and when it should be run. Each user script can target a specific page, a specific site, or a group of sites.

Install Greasemonkey addon for Firefox

Go to Greasemonkey addon page, click on the “Add to Firefox” button and follow the instructions. After restarting Firefox, you will notice a monkey’s head sitting at the bottom right its status bar.
If you right click on the monkey’s head and choose “Manage User Scripts” from the resulting menu, you will notice there isn’t any script which is quite normal since we have not installed any ;-).

Creating your first Greasemonkey script.

For a Greasemonkey to be recognized, it must end with .user.js, so let us create an empty file and save it as myfirstscript.user.js
Fire up your favourite text editor and open your newly created file.

Greasemonkey script metadata

All user scripts has a meta data section which tells Greasemonkey about the script itself, where it came from, and when to run it. For example, our script :

// ==UserScript==
// @name          My First GM script
// @namespace     http://htmlblog.net
// @description   basic Greasemonkey script
// @include       http://www.facebook.com/
// ==/UserScript==

You can find more information about the metadata here.

Remember we want our script available only for Facebook pages, that is why we use @include http://www.facebook.com

Show me some code.

Alright, to add our own menus, we need to get the parent element holding the drop down menu. After inspecting Facebook’s source code, we can rapidly come to the conclusion that the parent element’s id is “fb_menu_friends_dropdown”. So the current Facebook code looks like that :


Recently Added
All Friends

Invite Friends
Find Friends

and our goal is to insert the two menu items before the “Recently Added” item.

For us to do that, we need to get the first child of the parent element and then insert our elements before it and to help us, i.e walking through the DOM selecting parent and childs, I use a little piece of code found on Github, which eliminates whitespace issues between elements among other features. So our myfirstscript.user.js can be updated to :

// ==UserScript==
// @name          My First GM script
// @namespace     http://htmlblog.net
// @description   basic Greasemonkey script
// @include       http://www.facebook.com/
// ==/UserScript==
DOM = function () {

    function get(id) {
        if (id && typeof id === 'string') {
            id = document.getElementById(id);
        }
        return id || null;
    }

    function walk(element, tag, walk, start, all) {
        var el = get(element)[start || walk], elements = all ? [] : null;
        while (el) {
            if (el.nodeType === 1 && (!tag || el.tagName.toLowerCase() === tag)) {
                if (!all) {
                    return el;
                }
                elements.push(el);
            }
            el = el[walk];
        }
        return elements;
    }

    return {

        // Get the element by its id
        get: get,

        walk: walk,

        // Returns the previousSibling of the Element (excluding text nodes).
        getPrevious: function (el, tag) {
            return walk(el, tag, 'previousSibling');
        },

        // Like getPrevious, but returns a collection of all the matched previousSiblings.
        getAllPrevious: function (el, tag) {
            return walk(el, tag, 'previousSibling', null, true);
        },

        // As getPrevious, but tries to find the nextSibling (excluding text nodes).
        getNext: function (el, tag) {
            return walk(el, tag, 'nextSibling');
        },

        // Like getNext, but returns a collection of all the matched nextSiblings.
        getAllNext: function (el, tag) {
            return walk(el, tag, 'nextSibling', null, true);
        },

        // Works as getPrevious, but tries to find the firstChild (excluding text nodes).
        getFirst: function (el, tag) {
            return walk(el, tag, 'nextSibling', 'firstChild');
        },

        // Works as getPrevious, but tries to find the lastChild.
        getLast: function (el, tag) {
            return walk(el, tag, 'previousSibling', 'lastChild');
        },

        // Works as getPrevious, but tries to find the parentNode.
        getParent: function (el, tag) {
            return walk(el, tag, 'parentNode');
        },

        // Like getParent, but returns a collection of all the matched parentNodes up the tree.
        getParents: function (el, tag) {
            return walk(el, tag, 'parentNode', null, true);
        },

        // Returns all the Element's children (excluding text nodes).
        getChildren: function (el, tag) {
            return walk(el, tag, 'nextSibling', 'firstChild', true);
        },

        // Removes the Element from the DOM.
        dispose: function (el) {
            el = get(el);
            return (el.parentNode) ? el.parentNode.removeChild(el) : el;
        }

    };
}();

To get the parent element and its first child, we then append the following code :

// get drop down menu
var parentNode = DOM.get('fb_menu_friends_dropdown');
// get its first child
var firstNode = DOM.getFirst('fb_menu_friends_dropdown');

Creating our nodes

Now we must create our two nodes which will be inserted afterward. This is done easily with the following code which is self explanatory :

/** For "Recently Updated" */
// create our div with class fb_menu_item
var recentDiv = document.createElement('div');
recentDiv.setAttribute('class', 'fb_menu_item');

// create our link
var recentLink = document.createElement('a');
recentLink.href = 'http://www.facebook.com/friends/?recent&ref=tn';

// add text to our link
var recentDivContent = document.createTextNode('Recently Updated');
recentLink.appendChild(recentDivContent);

// add link to our div
recentDiv.appendChild(recentLink);

/** For "Status Updates" */
// create our div with class fb_menu_item
var statusDiv = document.createElement('div');
statusDiv.setAttribute('class', 'fb_menu_item');

// create our link
var statusLink = document.createElement('a');
statusLink.href = 'http://www.facebook.com/friends/?status&ref=tn';

// add text to our link
var statusDivContent = document.createTextNode('Status Updates');
statusLink.appendChild(statusDivContent);

// add link to our div
statusDiv.appendChild(statusLink);

We can also add a separator, for having a cleaner look :

/** Creates a separator, just to look good */
var separatorDiv = document.createElement('div');
separatorDiv.setAttribute('class', 'fb_menu_separator');

Finally we insert these 3 nodes before the first child element we got earlier on :

// add all divs before first child of menu
parentNode.insertBefore(statusDiv, firstNode);
parentNode.insertBefore(recentDiv, firstNode);
parentNode.insertBefore(separatorDiv, firstNode);

Just to be on the safe side of things, we surround the whole block of code with a try and catch statement.

Putting it all together

So finally our code is like this :

// ==UserScript==
// @name          My First GM script
// @namespace     http://htmlblog.net
// @description   basic Greasemonkey script
// @include       http://www.facebook.com/
// ==/UserScript==

DOM = function () {

    function get(id) {
        if (id && typeof id === 'string') {
            id = document.getElementById(id);
        }
        return id || null;
    }

    function walk(element, tag, walk, start, all) {
        var el = get(element)[start || walk], elements = all ? [] : null;
        while (el) {
            if (el.nodeType === 1 && (!tag || el.tagName.toLowerCase() === tag)) {
                if (!all) {
                    return el;
                }
                elements.push(el);
            }
            el = el[walk];
        }
        return elements;
    }

    return {

        // Get the element by its id
        get: get,

        walk: walk,

        // Returns the previousSibling of the Element (excluding text nodes).
        getPrevious: function (el, tag) {
            return walk(el, tag, 'previousSibling');
        },

        // Like getPrevious, but returns a collection of all the matched previousSiblings.
        getAllPrevious: function (el, tag) {
            return walk(el, tag, 'previousSibling', null, true);
        },

        // As getPrevious, but tries to find the nextSibling (excluding text nodes).
        getNext: function (el, tag) {
            return walk(el, tag, 'nextSibling');
        },

        // Like getNext, but returns a collection of all the matched nextSiblings.
        getAllNext: function (el, tag) {
            return walk(el, tag, 'nextSibling', null, true);
        },

        // Works as getPrevious, but tries to find the firstChild (excluding text nodes).
        getFirst: function (el, tag) {
            return walk(el, tag, 'nextSibling', 'firstChild');
        },

        // Works as getPrevious, but tries to find the lastChild.
        getLast: function (el, tag) {
            return walk(el, tag, 'previousSibling', 'lastChild');
        },

        // Works as getPrevious, but tries to find the parentNode.
        getParent: function (el, tag) {
            return walk(el, tag, 'parentNode');
        },

        // Like getParent, but returns a collection of all the matched parentNodes up the tree.
        getParents: function (el, tag) {
            return walk(el, tag, 'parentNode', null, true);
        },

        // Returns all the Element's children (excluding text nodes).
        getChildren: function (el, tag) {
            return walk(el, tag, 'nextSibling', 'firstChild', true);
        },

        // Removes the Element from the DOM.
        dispose: function (el) {
            el = get(el);
            return (el.parentNode) ? el.parentNode.removeChild(el) : el;
        }

    };
}();

try{
	// get drop down menu
	var parentNode = DOM.get('fb_menu_friends_dropdown');
	// get its first child
	var firstNode = DOM.getFirst('fb_menu_friends_dropdown');

	/** For "Recently Updated" */
	// create our div with class fb_menu_item
	var recentDiv = document.createElement('div');
	recentDiv.setAttribute('class', 'fb_menu_item');

	// create our link
	var recentLink = document.createElement('a');
	recentLink.href = 'http://www.facebook.com/friends/?recent&ref=tn';

	// add text to our link
	var recentDivContent = document.createTextNode('Recently Updated');
	recentLink.appendChild(recentDivContent);

	// add link to our div
	recentDiv.appendChild(recentLink);

	/** For "Status Updates" */
	// create our div with class fb_menu_item
	var statusDiv = document.createElement('div');
	statusDiv.setAttribute('class', 'fb_menu_item');

	// create our link
	var statusLink = document.createElement('a');
	statusLink.href = 'http://www.facebook.com/friends/?status&ref=tn';

	// add text to our link
	var statusDivContent = document.createTextNode('Status Updates');
	statusLink.appendChild(statusDivContent);

	// add link to our div
	statusDiv.appendChild(statusLink);

	/** Creates a separator, just to look good */
	var separatorDiv = document.createElement('div');
	separatorDiv.setAttribute('class', 'fb_menu_separator');

	// add both divs before first child of menu
	parentNode.insertBefore(statusDiv, firstNode);
	parentNode.insertBefore(recentDiv, firstNode);
	parentNode.insertBefore(separatorDiv, firstNode);
}
catch(e){};

Installing and testing our script

Fire up Firefox and select “File” -> “Open File…” in the menu bar and then browse for your script, i.e myfirstscript.user.js in our case. You will be prompted to install the script by Greasemonkey. After installation is complete, head to Facebook, login and hover over the “Friends” menu, you will see your newly created menus.

Download script
Install script

Expanding/collapsing javascript menu

asvin — Thu, 17 Jul 2008 18:07:13 +0000

In this post I’ll show you how to create an expanding/collapsing menu like Slashdot left menu used to be, using the YUI library and Dav Glass YUI effects widget.

The HTML markup for our menu is :


			Menu
			
				
					Home
					About
					CSS

We use 2 div tags, one for holding the menu itself and the other one which contains the links in an unordered list and 1 h1 tag for the title.

The CSS for the menu :

/** width of the menu */
#menu{
				width: 180px;
			}

/** the main title */
			#menu h1{
				line-height: 35px;
				color: #fff;
				/** simulate link */
				cursor: pointer;
				font-weight: bold;
				/** background image will change when menu expands/collapses */
				background: #666 url(images/block-arrow-expanded.gif) no-repeat scroll 30px 13px;
			}

/** the links */
			#menu-links li{
				line-height: 35px;
				border-bottom:1px solid #ddd;
				background-color: #eee;
			}

Please pay attention to the background for the #menu h1. It contains the image, which will change when the menu collapses or expands. When the menu collapses we’ll be using the block-arrow-collapsed.gif image and when the menu expands we’ll be using the block-arrow-expanded.gif image. You can find the images in the sample demo file in the images directory.

To do the collapsing/expanding effects, we need to include the following javascript files beforehand :

We use Dav Glass YAHOO.Tools package and his effects widget along with yahoo-dom-event-animation aggregate file which are hosted on Yahoo servers.

Finally the javascript to do the magical stuff goes like that :

In line 3 of the above listing, we wait when the user clicks on the menu-title container and we check the display attribute of our links. If the links are not currently displayed then we display them by using Dav’s BlindDown effect with a duration of 0.2 seconds ;-).

new YAHOO.widget.Effects.BlindDown('menu-links', {seconds: 0.2});

We also change the background image for the menu title by using the YAHOO.util.Dom.setStyle method:


YAHOO.util.Dom.setStyle('menu-title', 'background-image', 'url(images/block-arrow-expanded.gif)');

If the links are visible then we do the contrary, i.e we use the BlindUp effect and use the collapsed gif as background image.

YUI-based numeric stepper widget

asvin — Mon, 14 Jul 2008 16:08:20 +0000

Since I had some problems with YUI slider, I decided to write a YUI-based numeric stepper that allows users to select values within a predefined range.

To instantiate the widget include the following files :

Then place your stepper in your body :

10 px

The stepperValue id will display the current value of the stepper.
The stepperControls will contain the different controls for our stepper, and you can place it anywhere you want and use whatever images you want.

Finally when the DOM is ready, instantiate the widget :

The stepper takes 6 parameters, all mandatory (check source code) :

var mystepper = new YAHOO.widget.Stepper(10, 'stepperUp', 'stepperDown', 0, 200, 10);

1. the initial value
2. the ID of the element for the up control button
3. the ID of the element for the down control button
4. the minimum value the stepper can decreased to
5. the maximum value the stepper can increased to
6. by how much the stepper is incremented/decremented after each click

We listen for any change to the stepper and in this case, display the updated value in the container we defined earlier on ( stepperValue) using innerHTML.

mystepper.onChange.subscribe(function(){
			YAHOO.util.Dom.get('stepperValue').innerHTML = mystepper.getValue() + ' px';
		});

You can get the current value of the stepper by calling :

var currentValue = mystepper.getValue();

Simple YUI Cookie example – javascript text magnifier for your page

asvin — Mon, 30 Jun 2008 06:11:16 +0000

Since YUI 2.5.0 there’s the Cookie utility and at this time of posting, it’s still in beta version.
I’ll show you how we can use this simple utility to write a small javascript app.

The piece of code we will be writing, using the YUI library (my favorite), will allow users to increase/decrease their font size for a block of text, storing the font size in a cookie
so that when they return to the page they don’t have to modify the font size again.

You can view a live demo here.

Getting started.

Our page will consist of a block of text, along with 2 images. One to increase the font size and the other one to decrease it.
The images we’ll be using :

So the HTML goes like that :



	
		yui cookie
		
	
	
		
		
		
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus.
Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa

We define unique ids for DOM manipulation afterwards.

Next we add the necessary YUI libraries. We will be using

hosted at the geolocated Yahoo servers .

We add these two lines of code at the end of the file, before the closing body tag, to maximise performance (more on that in a later post).



	
		yui cookie
		
	
	
		
		
		
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus.
Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa

Our page is almost ready we just have to write the code to update the font size. The javascript code goes like this,

var updateFontSize = function(o, params){
	try{
		if(params.type == 'increase'){
			newSize = parseInt(YAHOO.util.Dom.getStyle(params.id, 'font-size'), 10) + 1;
		}
		else{
			newSize = parseInt(YAHOO.util.Dom.getStyle(params.id, 'font-size'), 10) - 1;
		}

		YAHOO.util.Dom.setStyle(params.id, 'font-size', newSize + 'px');
		YAHOO.util.Cookie.set("news-size", newSize, { path: "/", expires: new Date("December 22, 2010") });
	}
	catch(e){}
};

YAHOO.util.Event.addListener('increaseFont', 'click', updateFontSize, {"id" : 'news-main', "type" : 'increase'});
YAHOO.util.Event.addListener('decreaseFont', 'click', updateFontSize, {"id" : 'news-main', "type" : 'decrease'});
YAHOO.util.Event.addListener(window, 'load', function(){
	try{
		var newsSize = YAHOO.util.Cookie.get("news-size", function(value){
	        	YAHOO.util.Dom.setStyle('news-main', 'font-size', value + 'px');
		});
	}
	catch(e){}
});

Now we let us have an extensive look at the code above.

We define a function updateFontSize which takes 2 parameters, the second one being json data we will be passing using YUI addListener method.
Line 3 checks whether we want to increase or decrease the font size. In any case we get the current font size of the text using
YAHOO.util.Dom.getStyle method which will return a value of 11px for example. We then use the parseInt function to return only the integer so that
we can increase/decrease it by 1;

After getting the new size in the newSize variable, we just apply it to the block of text using the YAHOO.util.Dom.setStyle method :

YAHOO.util.Dom.setStyle(params.id, 'font-size', newSize + 'px');

the params.id being the id on which we want the style to be applied on and passed through at line 16/17 above.

Line 11 just sets the cookie for future visits, giving it a name and an expiration date.

The whole block is surrounded by try catch statement.

Listeners

In line 16 and 17 we add event listeners to the respective images, one to increase the font size, the other one to decrease it

YAHOO.util.Event.addListener('increaseFont', 'click', updateFontSize, {"id" : 'news-main', "type" : 'increase'});
YAHOO.util.Event.addListener('decreaseFont', 'click', updateFontSize, {"id" : 'news-main', "type" : 'decrease'});

For simple understanding the above code just says when someone click on the increaseFont id, call the updateFontSize function,
with the id and the type as parameters. The parameter is the JSON data I was talking earlier.

Line 18 says when the after the window has loaded completely, we try to get the news-size cookie.

YAHOO.util.Event.addListener(window, 'load', function(){
	try{
		var newsSize = YAHOO.util.Cookie.get("news-size", function(value){

If the latter doesn’t exist, it
will return false, else it returns the value in it, and we just take the value and apply it to the block of text via the YAHOO.util.Dom.setStyle method.

var newsSize = YAHOO.util.Cookie.get("news-size", function(value){
	YAHOO.util.Dom.setStyle('news-main', 'font-size', value + 'px');
}

As always we surround the block with try catch statements.

Our final code looks that that :



	
		yui cookie
		
	
	
		
		
		
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus.
Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa

Of course all this can be done with using the YUI library, but it’s my fav. ;-)