Greasemonkey and jquery tricks

This took a while to figure out and then I forgot it all again. I have some Greasemonkey scripts that fiddle around with menus and automatically log me in to a difficult-to-navigate HellishSite. They use jquery and I thought I’d record what to do and pass on the tip.

When I used jquery the old way in my scripts, it broke HellishSite’s layout probably because they use jquery in some way themselves. Something about the insane way they use frames might also be the culprit. I didn’t look too deep into that. Here’s what works. Use a @require line as described in the Metadata block docs for Greasemonkey:

// ==UserScript==
// @name          Hello jQuery
// @namespace     http://wiki.greasepot.net/examples
// @description   jQuery test script
// @include       *
// @require   http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js
// ==/UserScript==

$(document).ready(function() {
 $("a").click(function() {
  alert("Hello world!");
 });
});

The other trick, the bit that was driving me completely crazy, was that in order to get your @require statement to work you have to uninstall the script and install it again. Otherwise, the browser won’t read the new info in the metadata block. To do this, you go into the “Manage scripts” control panel for Greasemonkey, edit the script and make sure you copy it somewhere accessible, highlight the script and check “uninstall”. Unfortunately there is no “reinstall” button. In your browser address window (on a Mac) point to your copy of the folder you saved it in like this: file:///folder/ and in the browser screen, click on the saved javascript file. It will magically ask you if you want to install it. Yay! Install it and this time it will work. Your other option here is to go edit your Config.xml file where your browser is actually looking to get the metadata when it goes to execute the script.

In the script itself I am doing just a few things.

Testing what page I’m looking at, just by seeing if a particular field name is on that page:

if
($("input[name^='lastName']"))
{
(do some stuff)
}

Filling out fields:

 $("input[name='loginId']").val("Sucky");
 $("input[name='password']").val("blowme");

(the non-jquery way to do this is something like,

document.getElementsByName('password')[0].value = "blowme";

Ugh, shudder…)

Selecting from dropdown menus:

 $("select[name='profile']").val("sucktastic");

Pre-selecting a bajillion clicky things from horrible little fields full of options:

 $("option[value='8008135']").attr("selected","Selected");

Making horrible little fields bigger, that show 4 options at a time out of possible 25:

 
$("select[name='section']").attr("size",25);

All this will become unnecessary once I dive into the HellishSite API but right now I don’t have time to go that route.

A note that I wrote this stuff back in March, adn then it broke, I fixed it, it broke again, I had forgotten it all and had to re-learn it, then my hard drive crashed and I lost my fixes and have spent a while fixing it again. This is pretty typical for me. I learn enough to make what I need, but I don’t go out and become a Greasemonkey or javascript expert. Just enough to get the job done and move on.