GreaseMonkey tutorial : urlExpander

bitly-results.json

{
	"errorCode": 0, 
	"errorMessage": "", 
	"results": { 
		"4s0bFQ": { 
			"longUrl": "http://www.epershand.net" 
		} 
	}, 
	"statusCode": "OK" 
}

urlExpander.step1.user.js

// ==UserScript==
// @name           Epershand urlExpander
// @namespace      http://www.epershand.net
// @description    Traduit les urls raccourcies et affiche le lien entier
// @include        http://twitter.com/*
// ==/UserScript==

alert('Hello World!');

urlExpander.step2.user.js

var api = 'http://api.bit.ly/expand?version=2.0.1'+
			'&shortUrl=http://bit.ly/4s0bFQ'+
			'&login=bitlyapidemo'+
			'&apiKey=R_0da49e0a9118ff35f52f629d2d71bf07';

// make an ajax request to the bit.ly API
GM_xmlhttpRequest({
	method: "GET",
	url: api,
	onload: function(response) {
		GM_log(response); // or console.log(response);
	}
});

urlExpander.step3.user.js

// the URL that we want to expand
var shortUrl = 'http://bit.ly/4s0bFQ';

// we extract the hash from the URL, here it's '4s0bFQ'
var hash = shortUrl.substr(shortUrl.lastIndexOf('/')+1);

// create the URL to the bit.ly API
var api = 'http://api.bit.ly/expand?version=2.0.1'+
			'&shortUrl='+shortUrl+
			'&login=bitlyapidemo'+
			'&apiKey=R_0da49e0a9118ff35f52f629d2d71bf07';

// make an ajax request to the bit.ly API
GM_xmlhttpRequest({
	method: "GET",
	url: api,
	onload: function(response) {
		// transform the response from text to something that can be use in JavaScript
		var data = eval('('+response.responseText+')');
		if(data.errorCode == 0) {
			// get the longUrl for the specific hash
			GM_log(data.results[hash].longUrl); // or console.log(data.results[hash].longUrl);
		}
	}
});

urlExpander.step4.user.js

// this function expand the bit.ly URL given in parameter
function expand(shortUrl) {
	// we extract the hash from the URL
	var hash = shortUrl.substr(shortUrl.lastIndexOf('/')+1);

	// create the URL to the bit.ly API
	var api = 'http://api.bit.ly/expand?version=2.0.1'+
				'&shortUrl='+shortUrl+
				'&login=bitlyapidemo'+
				'&apiKey=R_0da49e0a9118ff35f52f629d2d71bf07';

	// make an ajax request to the bit.ly API
	GM_xmlhttpRequest({
		method: "GET",
		url: api,
		onload: function(response) {
			// transform the response from text to something that can be use in JavaScript
			var data = eval('('+response.responseText+')');
			if(data.errorCode == 0) {
				// get the longUrl for the specific hash
				console.log(data.results[hash].longUrl);
			}
		}
	});
}

// call the function on our example
expand('http://bit.ly/4s0bFQ');

urlExpander.step5.user.js

// get all anchors in the page
var links = document.getElementsByTagName('a');

// iterate through anchors
for(var i=0; i<links.length; i++) {
	var link = links[i];
	
	// call the 'expand' function on links that belongs to bit.ly domain
	if(link.hostname == 'bit.ly') {
		expand(link.href);
	}
}

urlExpander.step6.user.js

// this function expand the anchor given in parameter
function expand(link) {
	var shortUrl = link.href;
	
	// we extract the hash from the URL
	var hash = shortUrl.substr(shortUrl.lastIndexOf('/')+1);

	// create the URL to the bit.ly API
	var api = 'http://api.bit.ly/expand?version=2.0.1'+
				'&shortUrl='+shortUrl+
				'&login=bitlyapidemo'+
				'&apiKey=R_0da49e0a9118ff35f52f629d2d71bf07';

	// make an ajax request to the bit.ly API
	GM_xmlhttpRequest({
		method: "GET",
		url: api,
		onload: function(response) {
			// transform the response from text to something that can be use in JavaScript
			var data = eval('('+response.responseText+')');
			if(data.errorCode == 0) {
				// get the longUrl for the specific hash
				var longUrl = data.results[hash].longUrl;
				with(link) {
					innerHTML = longUrl;
					href = longUrl;
				}
			}
		}
	});
}

// get all anchors in the page
var links = document.getElementsByTagName('a');

// iterate through anchors
for(var i=0; i<links.length; i++) {
	var link = links[i];
	
	// call the 'expand' function on links that belongs to bit.ly domain
	if(link.hostname == 'bit.ly') {
		expand(link);
	}
}

urlExpander.user.js

// ==UserScript==
// @name           Epershand urlExpander
// @namespace      http://www.epershand.net
// @description    Expand bit.ly shorten links to display the original link
// @include        http://twitter.com/*
// ==/UserScript==

// this function is called a closure, it's executing right after the declaration
// and get the 'document' object as the parameter
(function(d) {
	// create an object with a function expand for easier improvements
	var bitly = {
		// this function expand the bit.ly URL given in parameter
		expand: function(link) {
			var shortUrl = link.href;
			
			// we extract the hash from the URL
			var hash = shortUrl.substr(shortUrl.lastIndexOf('/')+1);
		
			// create the URL to the bit.ly API
			var api = 'http://api.bit.ly/expand?version=2.0.1'+
						'&shortUrl='+shortUrl+
						'&login=bitlyapidemo'+
						'&apiKey=R_0da49e0a9118ff35f52f629d2d71bf07';
		
			// make an ajax request to the bit.ly API
			GM_xmlhttpRequest({
				method: "GET",
				url: api,
				onload: function(response) {
					// transform the response from text to something that can be use in JavaScript
					var data = eval('('+response.responseText+')');
					if(data.errorCode == 0) {
						// get the longUrl for the specific hash
						var longUrl = data.results[hash].longUrl;

						// replace the href with the longUrl
						with(link) {
							innerHTML = longUrl;
							href = longUrl;
						}
					}
				}
			});
		}
	};

	// get all anchors in the page
	var links = d.getElementsByTagName('a');
	
	// iterate through anchors
	for(var i=0; i<links.length; i++) {
		var link = links[i];
		
		// call the 'expand' function on links that belongs to bit.ly domain
		if(link.hostname == 'bit.ly') {
			bitly.expand(link);
		}
	}	
})(document);