Archive for July 2008

Firefox: creating a shortcut to ScrapBook highlight operations with the Keyconfig extension

Summary: ScrapBook is a Firefox extension that allows one to save snippets from web pages locally, and to add notes and highlights to them. I wanted shortcuts to access the highlighting features. Using the Keyconfig extension, which allows you to create new keyboard shortcuts, I associated 4 keyboard commands to the 4 available highlight styles.

The bare steps

(The following, of course, assumes having the ScrapBook extension installed.)

1. I installed the Keyconfig extension and restarted Firefox. It’s available here, just click on keyconfig.xpi.

2. In Tools > Keyconfig, I first selected the “Keyconfig” option in the dropdown list at the top of the window.

3. For each highlight operation (there are 4 possible styles), I created a new key with the titles you may see in the screenshot (“scrapbook highlight 1”). The code associated with each is:

    sbPageEditor.highlight(1)

and I replaced “1” by 2, 3 and 4 for the other operations. Also, I checked the “global” checkbox a the top of the “key editor” window.

4. After having defined that operation, I assigned it a keyboard shortcut , trying not to conflict with existing shortcuts for other operations. To assign the key, select the command you want, then click in the text box next to the “Apply” button. Now enter the keyboard combination you want, and click “Apply”.

5. I also configured two other operations which I find useful, “save” and “undo”, which are associated with the code

    sbPageEditor.saveOrCapture()

and

    sbPageEditor.undo()

respectively.

The underlying explanations

The “hard part” part (well, the non-obvious part) here was to find the code to activate the highlighting operations. That may be interesting to you if you want to repeat the process for other operations, perhaps in other extensions. There are many ways to go about doing this, one involving the DOM inspector in Firefox which is faster than the one I used. Mine involves exploring the extension source code, which I find instructive.

Firefox has a very extensible architecture. One key ingredient in this extensibility is XUL, the language used to describe components in the user interface. It’s real simple to grasp the basic principles, especially if you know HTML and JavaScript. Basically, extensions are programmed in XUL and JavaScript.

Firefox extensions may usually be found in your user directory (under Linux, by default, it’s in .mozilla/firefox/…/extensions, in your home directory). Their source code is right there for you to look at. Each extension is in its own directory, usually named with easy-to-remember strings like “{53A03D43-5363-4669-8190-99061B2DEBA5}” (here the Scrapbook extension directory name).

The code for ScrapBook is in there, in a JAR file (chrome/scrapbook.jar), which is just another extension for a Zip file, so you may open it and uncompress it with an unzipping utility. The file that interests us here is in this JAR file; it’s content/scrapbook/overlay.xul. This is the file that describes the way ScrapBook attaches itself to the main Firefox window, I believe.

Amongst other elements described in overlay.xul, you’ll find the toolbar which displays the highlight buttons (and “undo”/”save”). To find the line, search for “ScrapBookHighlighter”. The code for the operations is in the “oncommand” attribute.

To find the line and file of interest, which might seem non trivial given the number of files in there, I used a global search on files for the term “highlighter”.