Introduction
Greasemonkey is a very useful Firefox extension that allows you to run your chosen Javascript files for certain web sites to enhance their features or fix their annoyances.
If you know Javascript a bit and feel some web site needs improvement, you can first search userscripts.org which collects many Greasemonkey scripts. Even if you cannot find the ones that fix the annoyances you see with certain web sites, you can do it yourself. It is not that hard. Following we provide a simple example.
Use Greasemonkey on dictionary.com
The http://www.dictionary.com web site is useful to lookup English words. If you have Noscript installed, it disables Javascripts on this web site by default. Since it doesn't affect any dictionary lookup, there is no need to enable Javascripts on this web site. However then you will find one thing missing: When you come to the web site, it doesn't put your input focus on the search box, so you have to click to enter the word you want to look up. Another annoyance is that when you hit tab key the search box is not the first one. So now is a good time to write a simple Greasemonkey script to fix this.
First a Greasemonkey script should have the .user.js suffix. You can create one file dictionary1.user.js with the following preamble:
// ==UserScript==
// @name Auto focus to the search box on dictionary.com
// @namespace http://dictionary.reference.com/
// @description Auto focus to the search box on dictionary.com
// @include http://dictionary.reference.com/
// ==/UserScript==
Here the one matters is the
@include
statement which tells Greasemonkey
in which pages to run your script. Because dictionary.com directs you
to dictionary.reference.com, you have to use the final URL here.
To test whether your script runs on the expected pages or not, you can
use the
GM_log
function to write debug messages which you can check from "Error Console"
under Firefox's "Tools" menu.
GM_log('We navigate to dictionary site!');
Next you need to find the DOM element for the search box. You can
either check the HTML source directly or you can use any tool
like
the Web Developer Firefox extension.
Luckily, the search box has a unique ID "q" so you can just
get the element through the call
search = document.getElementById("q");
Then you can just call its focus() method to make
sure it gets the default input focus on load.
The first version of the script can be downloaded here.
A small enhancement is that if the search box contains some word that you typed before,
you can also call its select() method to select the whole word so you can
start typing without the need to clear it first.
The second version of the script can be downloaded
here.
After working with this for a while, you may wonder why not selecting the whole word in the search box when it receives the input focus or when you click in the box? To achieve this, you need to add an event listener to the search box. Because this is mostly Firefox-centric, you don't need to consider any cross-browser compatibility issue. The code looks like this:
search.addEventListener("click", function (e) { search.select(); GM_log("Click event is called"); }, false);
search.addEventListener("focus", function (e) { search.select(); GM_log("Focus event is called"); }, false);
The third version of the script can be downloaded here.
References
- Mark Pilgrim's online book "Dive Into Greasemonkey": This is a well-written book on programming with Greasemonkey. After learning the basics, you can still come back to this book to learn some tips and tricks.
- Mark Pilgrim's book "Greasemonkey Hacks": If you like the dead-tree version, you can also check Mark Pilgrim's book published by O'Reilly in November 2005.
- Mozilla developer center's reference on element.addEventListener