As many of you know, there is a useful Firefox extension called Greasemonkey that allows you to use AJAX and javascript to customize the webpages you visit. You can use this tool to manipulate websites to make things easier for yourself, or just tweak the look and feel of a website.

I'm going to walk you through a process I went through earlier this week to begin familiarizing yourself with Greasemonkey development, as well as the process to look at a site you are modifying and determine what steps you want your script to take.

Step 1 - Define success criteria

The first step of any programming project is to figure out what you want to do. This may seem unnecessary, but deciding beforehand the success criteria for any project ensures that you are working towards something you want to achieve, it can help push you forward with motivation during the work because you are focused on the effect you want to bring about, and it is essential to stop yourself from getting sidetracked during development. One of the top problems for any software development process is scope creep, and we want to avoid this here.

In this case, the script I was looking at writing involved achieving a higher point count on a facebook game. This higher point count enabled the player to do more things. The specific game I was looking at was called Hatchery. The idea for the script came about when I watched a friend play the game and I noticed that there was a really easy but monotonous way to get points by visiting the Requests page of the game, clicking on each of the players that requested you pet their egg, and for each player clicking on "Pet this egg". I don't play the game, so the Hatchery-specific terminology I use here may be mistaken. I only looked at it from the perspective of solving the problem.

Step 2 - Develop a plan

The second step is to devise a strategy and a plan for your script to follow. In my case, this was relatively simple. I decided to place a button the requests page that would automatically iterate through each of the players listed, and pet one of their eggs. I validated that my plan was possible by looking at the way the browser and the server interacted at each step. To do this you can use a tool like Firebug, or you can just follow the code by looking at the source. There were a few pieces of Javascript implementing AJAX that I was a little worried about when I first began looking at the code, but by following the URLs without the javascript I determined I wouldn't need to reverse engineer these parts, and that they are likely only for display.

Step 3 - Implement your plan, and test

A lot of people consider implementation and testing to be separate things. This is a flawed way of looking at things because typically there is an iterative process between the two. For the best programmers I have seen, the iterations are so small that there is really no way to differentiate between development and testing.

For the hatchery, I created the button by finding an element on the page I could replace with my buttons and message boxes. On Facebook there is an advertisement in the right column which seemed perfect. I created the button and hooked up my new button with a function that was called when the button was clicked.

Inside the function for my new button, I googled for some greasemonkey code. By looking at two or three other scripts out there I found that Greasemonkey has its own AJAX utilities, so I decided to use them. I decided on AJAX because I wanted the user interaction with my script to be minimal, but I needed to pull several URLs.

I used regular expressions to scan the current page for all of the URLs in the list. I would need to pull all of these URLs to get the IDs of the players I was going to scan. I iterated over the list making AJAX calls for each, and then processed each of those pages looking for the ID of that person's pet. I then constructed a new URL and made another AJAX call to instruct the game that I had now pet the egg with this new ID.

At each step of the way I was writing code, looking up syntax for AJAX or regular expressions, etc. One of my personal favorite techniques for debugging anything is to use the most basic print command in a language. For Javascript I have found that alert method works really well for figuring out what methods do or what variables contain or are made of.

Step 4 - Looking at further improvements

At the end of step three, I had a completed working Greasemonkey script, and my friend was happy. I didn't necessarily stop there though. I started thinking, "what could be done to make this script better?". In this case, the answer was that I could use local storage to look at when I last pulled the data, and then automatically run the script whenever the user is logged into facebook. I analyzed this and realized it wasn't worth the time yet