When we first encounter Javascript programming, the quintessential function that enamors us all is alert(). Plunk that baby down into a page and, bam (or more accurately…thwunk!), a magical dialog box appears, grabbing the viewer’s attention and providing useful/useless information:

But is this the best way to convey important information? Probably not. For one, the alert box is modal; a user cannot continue with their task until they’ve clicked OK — their train of thought is broken.

One solution to this problem is to use transparent messaging. Rather than doing a disservice by re-explaining, I’ll refer you to read Aza Raskin’s article on Monolog Boxes and Transparent Messages. Or, if you’d like to see them in the wild, check out Songza: we utilize transparent messages to convey the state of media player (play a song, then press the space bar to Pause.)

Now, that’s all well and good, you might say, but what about sites that I don’t have programmatic control over? As a user, I’m at the mercy of whatever features the site programmer chooses to implement. Not true. Enter Ubiquity.

Ubiquity and pageLoad_

One of the goals of Ubiquity is to extend functionality across websites, regardless of whether or not the original programmer had coded that type of interaction (i.e. language translation, map insertion, word definition, etc). As such, Mozilla Labs has given programmers a bevy of authoring tools, including the pageLoad_ prefix. If, in your command file, you create a function that starts with pageLoad_, Ubiquity will execute this code whenever a new page is loaded into the browser window. It is this functionality that allows users to override native Javascript functions, such as alert().

 function pageLoad_overrideNativeFunction() {
     CmdUtils.getWindowInsecure().nativeFunction = function(args) {
          // Your code here
     };
};

By using this pattern, the native function is auto-magically replaced with your customized code each time a new page is loaded. In my case, I’ve chosen to override alert() with a call to create and show a Transparent Message (Note: I’ve used a Singleton with lazy instantiation to converse resources on pages that won’t call the command):

function pageLoad_overrideAlert() {
     CmdUtils.getWindowInsecure().alert = function(str) {
          TransparentMessage.getInstance().show(str);
     };
};

To see a working example, simply install the Ubiquity extension for Firefox and subscribe to the transparent-message command. From there, you can create a test message by issuing the “transparent-message” command, or see how it overrides alert() by revisiting this page and clicking the demo button located at the top of this article.

Note: Many thanks to Micheal Heilemann for authoring the jQuery Humanized Messages plugin. It’s what we use on Songza, and was used as a reference to create the transparent-message command.