Enhancing the UI with Greasemonkey

Posted by on November 27, 2010

Have you ever used a web application and wished that it would act a little differently to make your day easier? I recently ran into this with an external application. There were sever sets of data (tables and list boxes) that would be much more useful if they were sortable. Unfortunately, since I am not the developer of the application, I am not able to directly change the application to suite my particular use cases.

I turned to Greasemonkey, a FireFox add-in, to solve my problem. Greasemonkey provides a way to add your own custom javascript to any given web page that you are visiting. In my case, there were two pages in particular. The first page, I wanted to sort one of the list boxes alphabetically. The second page, I wanted to make a data grid sortable by multiple columns. This is often necessary when working with large sets of data to get useful data.

For the first page, I wrote a script that would add a sort button, and some javascript to the page to sort the list box. Greasemonkey recognizes that the script goes with the specific page and automatically runs the javascript file I created on page load. Now, when I visit the page I see a “Sort” button. When I click it, it sorts the list box for me. This small change cuts minutes off of each time I use this particular functionality because the listbox is pretty large.

For the second page, I wanted to make a large data table sortable by clicking the headers of specific columns. This was a bigger headache, because the code samples to sort an HTML table are all for Internet Explorer. I found that Internet Explorer adds some table functions that FireFox doesn’t support. This caused a lot of troubleshooting. In the end, I had clickable column headers that would sort the table by that column. This enhancement does help reduce time, but it also helps analyze the data. With the ability to sort the data by specific columns I can easily interpret the data instead of trying to search the entire table for specific data.

I understand that development teams are under constant pressure to add functionality to their applications. I also know that the features that are added are based on the mass, not on a few individuals. It is nice to know that, with a little javascript and time, you can make these types of changes to an application. I am sure there are more ways to use Greasemonkey and encourage you to take a look at this great tool. You may be surprised at what type of scripts are already created.


Comments are closed.