Gettin’ Funky With GreaseMonkey

I recently re-discovered Greasemonkey, a Firefox powered, client-side JavaScript library that lets you change the pages your way.  The Greasemonkey Homepage explains it better:

Greasemonkey is a Firefox extension that allows you to customize the way webpages look and function.

I’ve used it before, but haven’t touched it for quite some time.  But I had an itch I decided to finally scratch . . .

For reasons too complicated to explain here, I use SquirrelMail to read my email for hostetlerhome.com.  The interface annoys me and my web hosts provider’s implementation is horribly slow at times. Bored one day, I started looking for ways to tweak it and I found some shortcut keys in a Greasemonkey script.  And then I found a good image viewer for SquirrelMail. And then this one that displays the unread message count in the title. Jeepers — almost like GMail with Better GMail!

Then I started looking at other solutions for web annoyances.  I don’t go near as often as I used to, but I still like Geocaching but their site is fully of click-click-click when it could be much more streamlined.  I found GC Tour script, and it’s better than I could have ever hoped!  You can keep your cache lists inside of GC Tours, download GPX files of them and the whole bit.  A must-have for geocachers.

Now I decided to roll my own. I’d done this a couple of years ago, but I needed to refresh my memory.  And I definitely had a need — on an application I develop at work, we have to interface with another application. We always test with a lot of the same data (because we know what to expect from it in dev and test) so we always enter it over and over again.  It never changes between tests.  So I wrote a quick Greasemonkey script to populate the data when I go to the page. Took me an hour, but saves me tons of time.  The HTML was horrid, but I included JQuery in the script and that took care of most of the mess.

So, yet your funk on and explore (or re-explore) the wonderful world of Greasemonkey.  I’d start at UserScripts.org

Mike Dives Into Greasemonkey

I wrote my first Greasemonkey script this week. I consider this a big step in my JavaScript self-education. 

The script wasn’t complicated.  I’d post it, but it was for an internal report that I’ve been working with so it really wouldn’t be worth your time. The report is a list of customer and some information about them.  My XML version of the report went by customer ID, but the report on the web only had customer name — but it did have the Customer ID as a tooltip (why?  Who knows?)  So my Greasemonkey script just found the Customer ID in the tooltip and put it next to the customer name.  The only big deal was the regular expression that found the ID in the JavaScript function that makes the tooltip.  Yeah, the HTML sucked.

I wouldn’t have been able to do it without Mark Pilgrim’s excellent Dive Into Greasemonkey, which is really his Greasemonkey Hacks book online. 

Next step: Using YUI in GreaseMonkey Scripts.  Then the outside-world website hacking will begin!!

Powered by ScribeFire.

Why JavaScript is important

Mitchell Baker posted on Firefox’s effort to implement ECMAscript 4 (which is really JavaScript with another name) and she said:

JavaScript is a fundamental element of the web. It’s fundamental in human interaction with the web. Updating JavaScript’s capabilities updates the power of the web itself.

I agree with her. You may dismiss JavaScript as a toy; as a decent idea that has gone horribly, horribly wrong; or a good gun to shoot yourself in the foot with.  The this day of web-enablement, you will come in contact with JavaScript.  And you’d better be ready to deal with it.

Powered by ScribeFire.

More YUI joy

YAHOO.util.Dom.  How much I love thee. Let me counts the ways:

1. setStyle and getStyle get the real styles of the elements, not just the inline styles.
2. getElementsByClassName.  Say no more.
3. Find and Position your elements where you want them

Not part of the Dom object, YUI supplies a reliable way to extend objects. The syntax leaves a bit to be desires but it works really well.

Powered by ScribeFire.

A JavaScript Function Map

I spent my morning fixed problems with JavaScript. By “problems” I mean “fixing code that three or four iterations of developers have been too lazy to do correctly.” Here is simplified version of a particularly stupidly-written function that I uncovered:

function addItem(f,addtype) {
if (addtype="ab") {
f.hideme.value='';
functName1();    }
if (addtype="bc") {
f.hideme.value='';
functName2();    } if (addtype="cd") {       f.hideme.value='';           functName3();     }
if (addtype="de") {          f.hideme.value='';      functName4();     }
if (addtype="ef") {
f.hideme.value='';
functName5();     }}

This seems to call for a switch statement, but I’ve never been a fan of switch statements in any language. I understand them, but I’ve found them to be a weird and fragile construct. I instead implemented a function map. That trick works like a charm in Python and I wondered if it worked in JavaScript. And it does — like charm:

function addItem(f,addType) {
f.hideme.value='';
var typeFunctions = {"ab": functName1,
"bc": functName2,
"cd": functName3,
"de": functName4,
"ef": functName5};
if (typeFunctions.hasObjectProperty(addType)) {
typeFunctions[addType]();
}
}

This works because functions in JavaScript are objects like everything else. Note, though, that in my construction of typeFunctions that I didn’t put in a () after each function. That is because I wanted the function object, not the return value of each function. That would have executed each function in the constructor! That was not what I wanted to do. The hasObjectProperty method makes sure that the value in addType is really a property name in typeFunctions. You can also easily more type/function pairs by simply adding them to the typeFunctions constructor.

Powered by ScribeFire.