Playing with Ubiquity

I was originally quite sceptical about the usefulness of this "technology" but I’ve come to realize where its true value lies, here’s an overview:

The first thing to note about Ubiquity is that it’s not a new technology; it’s a platform which makes use of current technology. Technically it’s a "Firefox addon" and that’s all it will ever be to the end user, but for us it is a usable platform on which we can develop specialised commands tailored to the user.

The reasons I was initially sceptical about Ubiquity:

  • It’s not new; it takes pre-programmed commands and executes pre-programmed functionality, nothing special
  • I heard about it a while ago (like 3-4 months ago) but didn’t hear of it again until 3 days ago.
  • I could make something similar with a GreaseMonkey script. (I eventually realized I was totally wrong!)

Even after my subsequent realisation I wouldn’t say it’s a very revolutionary piece of software; essentially it’s just as I stated in the first bullet point, a pre-programmed interface with a limited comprehension (limited in that it only understands pre-programmed commands).

What can Ubiquity do?

  • It can do anything!
  • … with certain obvious limitations! 😉

Developing for Ubiquity

This is so easy; in fact, you should go and download Ubiquity right now and try it out!

Here’s a quick tutorial; we’re going to create an MDC (Mozilla Developer Center) search command so we can search on the fly (scroll down to see the end result):

  • Hit CTRL+SPACE to open Ubiquity.
  • Type “command-editor” into the input box, press enter.
  • You should be presented with a large textarea where you can create your new command…
  • First, let’s create a couple of shortcuts: 
    var $ = jQuery, // Access to jQuery
    log = CmdUtils.log; // Access to 'console.log'
  • We’ll need a new jQuery selector to use in our script, it’s called ‘hasContent’ and will only return elements with text content: 
    // Setup custom jQuery selector:
$.expr[':'].hasContent = function(elem) {
    return !$(elem).text().match(/^$|^s+$/);
};
  • Next, we need to write a function to return the google URL, it will include the "I’m+Feeling+Lucky" flag: 
    // Return google search URL:
function getGoogURL(searchTerm) {
    return 'http://www.google.com/search?btnI=I'm+Feeling+Lucky&q='
           + encodeURIComponent('site:https://developer.mozilla.org/')
           + ' ' + searchTerm;
}
  • Now we can create the command using Ubiquity’s CmdUtils.CreateCommand function: 
    // Create new command:
CmdUtils.CreateCommand({
 
    name: "MDC",
 
    takes: {"Search term": noun_arb_text},
 
    // This function will be run when a user types in something
    // You can show whatever you want in the preview box (pBlock):
    preview: function( pBlock, input ) {
 
        if (!input.text) return;
 
        var URL = getGoogURL(input.text);
 
        $.get(URL, function(response){
            var $content = $(response).find('#pageText'),
                para = '<p>' + $content.find('p:hasContent:eq(0)').html()
                     + '... ' + '<a href="'
                     + URL + '">More &raquo;</a></p>',
                codeEg = $content.find('pre.eval:eq(0)');
            $(pBlock).html(para).append(codeEg);
        });
 
    },
 
    // This function will be run when the user presses enter
    // after entering a command:
    execute: function( input ) {
 
        if (!input.text) return;
        Utils.openUrlInBrowser(getGoogURL(input.text));
 
    }
 
});
  • Finished! Your script will be saved automatically. You can use it straight away – there’s no need to restart Firefox! – Hit CTRL+SPACE, enter ‘MDC array shift’ – wait a second and you should see a description show up, if you then click enter or click ‘more’ you’ll be taken to the corresponding page.

As you can probably tell from the above code, Ubiquity comes with jQuery (1.2.6 currently), this in itself is awesome!

Our new command in action:

Animated GIF of MDC search command

Overall, Ubiquity is a fast and useful addon for Firefox which I will definitely be using a lot in the future.

You can download a more streamlined version of ‘MDC search’ here: /ubiquity/commands/MDC-search.js

If you’re planning on creating a Ubiquity command for yourself then make sure to read through this first: https://wiki.mozilla.org/Labs/Ubiquity/Ubiquity_0.1_Author_Tutorial.

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!