My First Greasemonkey Script

I was going to post on my recently concluded Sudoku research, but something amazing happened so quickly that I still can’t believe I did it. Yes! I wrote my first ever Greasemonkey script!!

I recently realised Greasemonkey scripts could do some really cool things. I guess I was also partly inspired by LouCypher’s blog, which I stumbled upon while looking for a script that would help me add Technorati tags at the end of my blog posts.

Seeing that Greasemonkey basically used Javascript and that I was interested in Javascript, I decided to look for help on using Greasemonkey, and the best search result led me to downloading an eBook, Dive Into Greasemonkey. And after downloading, I realised that I already had it on my comp, just that I hadn’t even looked at it ever since I downloaded it! I’ve also uploaded the book in the eBooks section of the blog.

So I dove right into it and wow! What a book! Everything was explained so well and it gave some excellent links. One of them was to Jesse’s Web Development Bookmarklets. This page has some pretty useful bookmarklets and the two i found most useful while writing the script were shell and jsenv.

shell is a command line interface where you can play around with Javascript commands and get to know the layout of the website and the different commands that let you access the different DOM Objects. jsenv is a Javascript Environment where you can write and execute your own Javascript and view the results of the scripts on the corresponding page live. You will also find the Firefox extensions DOM Inspector (that needs to be installed while installing Firefox) and InspectThis very useful. Actually this is explained in Dive Into Greasemonkey, but I thought I might as well mention them.

I was hardly through with the first twenty pages before I decided that I had to write my own script. It’d be a very basic one but one that would be pretty useful. I had a great idea that I thought I should work on. Many Wikipedia articles don’t have pictures, and I’d have to Google for them. So I thought I’d just insert links within the article that would directly search for what I want. I decided to use the title of the article as the search term and the link’s URL needed to be (I decided to add Google Web Search as well):

for Google Web Search,
http://www.google.com/search?hl=en&q=<search terms>&btnG=Search&meta=

for Google Images Search,
http://images.google.co.in/images?svnum=10&hl=en&lr=&q=<search terms>&btnG=Search

where <search terms> can be replaced by whatever I want. In Google, if you type Hello World and search for it then <search term>=Hello+World. Or if you had used quotes, as in “Hello World”, it’d be %22Hello+World%22. Now if we made <search term>=Hello World with a space and used the URL, it still seemed to work, with the space being replaced by %20 when I hit enter(I guess these numbers are equivalent to certain special characters, here for double quotes and space). So there was no problem in just inserting the Wikipedia article title in place of <search terms>.

The getElementsByTagName functions in Javascript is what I used to obtain the required data that I wanted. It is a member of the document class (as everything is). The DOM inspector and the shell bookmarklet is most useful here.

var heading=document.getElementsByTagName(‘h1′);

This function locates all parts of the HTML document with the <h1> tag (level-one heading tag) and in all Wikipedia articles, the title is in the first level-one heading tag. So its contents can be accessed as

heading[0].innerHTML

innerHTML gives the HTML code contained by the tag. So now we have our search term. Next we have to modify the HTML in the article. The paragraphs in every article are in the <p> tags. I thought I’ll provide the search links in the beginning of every article. So I need to edit the first paragraph.

var paragraphs=getElementsByTagName(‘p’);

p[0].innerHTML stores the first paragraph’s contents. There is one catch though. Sometimes the first paragraph of the article is not p[0]. If the article has some text in a table concerning the article, then that is sometimes p[0], and the links get inserted within the table. I haven’t figured out how to fix this yet, and this is probably the biggest problem with my script. This happens a lot in articles about sportspersons because they usually have a career statistics table in the beginning.

Now all that’s left is to insert the required link. This is done by using string manipulations to modify p[0].innerHTML and inserting the tag for placing a link, namely the <a> tag. You can check out the code for the whole script

Another thing to note is that the script affects all Wikipedia pages, whether it’s the main page, user page, help page or anything that is of the type http://*.wikipedia.org/wiki/*. But then as far as I’ve seen, the links aren’t in very intrusive locations that may affect normal browsing. So that’s not a big deal. I find this script really helpful and I guess others might find it useful too.

You can find the script here.

Here’s a list of resources that you might find useful. Dive Into Greasemonkey is a great place to start. There are many example scripts available for download from their main site. Javascript Reference can be found at Mozilla Developers site and at Sun. You can also find HTML Reference Guides at W3Schools, htmlhelp and html-reference.

I can’t wait to learn more Javascript and get an idea of all that Javascript can do. I think it has a lot of potential, what with AJAX (Asynchronous Javascript & XML) revolutionising the web and Javascript being used extensively these days.