Labs/Ubiquity/Ubiquity 0.1 Author Tutorial
Back to Labs/Ubiquity.
Author: Aza Raskin
Contributers: Blair McBride, Abimanyu Raja, Jono DiCarlo, Atul Varma
The Ubiquity 0.1 Command Tutorial
The great power of Ubiquity—from a developer standpoint—is how easy it is to create commands. With only a couple of lines of Javascript, Ubiquity enables even casual web developers to drastically enhance the features of the browser. From an 8-line command to insert a contact's email address in any text field, to a 50-line Twitter integration, this tutorial walks you through the process of being generative with Ubiquity.
WARNING: Ubiquity is still in flux. This is a 0.1 release. The API is likely to change drastically in later revisions. While this means that what you write today might not work next week, it also means that by writing commands and giving us your feedback, you'll be able to directly influence the direction that Ubiquity goes.
Real Time Development
Ubiquity doesn't require you to restart Firefox as you develop. That's a barbaric act, and we want none of it. Instead, Ubiquity reloads the commands every time it is summoned. When you are using the built-in editor then you don't even need to save!
To open the Ubiquity command editor, summon Ubiquity (control/alt + space) and use the "command-editor" command. Through-out this tutorial, when we want you to run a command in Ubiquity, we'll say Ubiq it. For instance, to open the editor, just Ubiq "command-editor".
In the following examples, just type in this editor. Updates happen the next time you summon Ubiquity.
Hello World: The First Command
Just a Function: As Simple as it Gets
Let's start with the standard programing trope: printing "Hello, World!". In Ubiquity, commands are simply functions with various attributes tacked on. We'll start by manually making a function to define a command, but we'll quickly move to using a more elegant method.
In the command editor type the following:
function cmd_hello_world() { displayMessage( "Hello, World!") }
Now try Ubiq-ing "hello-world". You'll see that "Hello, World!" is immediatly displayed on the screen. If you are on Mac OSX with Growl installed the message will appear as a Growl notification. If you are on Windows, then it will appears as a standard "toaster" notification in the bottom right-hand corner of the screen.
If you don't have Growl installed on OSX, or aren't on a Windows XP/Vista, then you won't get any sort of notification. That's something to be worked on in future released of Ubiquity.
There's not much in this command, so let's dive straight in. Any function that starts with cmd_
automatically becomes a Ubiquity command. It's a little bit of namespace magic that makes development super-simple.
There are other prefixes that have other effects, like running code on page load (pageLoad_
), and startup (startup_
), but that's for a different tutorial.
Back to the example. The meat of the command is in the function displayMessage()
, which displays the message in whichever way the operating system can.
You may be wondering why there is a hyphen in the name, instead of a space. That's because the Ubiquity natural language parser isn't yet smart enough to handle commands that are multiple words and arguments that are multiple words. It's something we'll be working on in the future.
Using CreateCommand
For commands that are more complicated than our simple "hello-world" command, you can use the helper function CmdUtils.CreateCommand()
, which takes an options dictionary. To redo the "hello-world" command using the convenience function, we'd write:
CmdUtils.CreateCommand({ name: "hello-world", execute: function() { displayMessage( "Hello, World!" ); } })
This may not seem to be much of a win (and it isn't for simple commands) but as the commands become more complex, you'll see that it helps a lot. For one, you can name the command more freely with the method—unicode non-English characters are now fair game.
There are a number of other useful functions in the CmdUtils namespace. We don't yet have full documentation for these commands, but you'll get a sense of the useful ones in this tutorial. For more detailed information, take a look at cmdutils.js.
Adding a Preview
Let's add a preview to our new command. Previews give the user feedback about what a command does before it's executed. Previews are great for providing reach visual feedback like displaying a graphical representation of atmospheric conditions when using the weather command as shown above. Previews have the full expressive power of HTML, including animations, so there's a lot you can do with them.
One point of design: Preview code should never have side-effects. That is, a preview should never (without user interaction) change the state of the system.
For the "hello-world" command, we don't need anything fancy: just some help text that is more descriptive than the default "Executes the hello-world command."
CmdUtils.CreateCommand({ name: "hello-world", preview: "Displays a <i>salutary</i> greeting to the planet.", execute: function() { displayMessage( "Hello, World!" ); } })
Here the preview is an HTML-formatted string. The preview can also be a function. We'll get to that in the next section.
The Date Command: The Second Command
Setting the Selection
I often forget what day it is. That may be because I need to go outside more often, but, like any programmer, I generally solve my problem's symptoms with technology rather then addressing the root cause. My solution is to create a command that inserts the date at the location of the cursor.
CmdUtils.CreateCommand({ name: "date", execute: function() { var date = new Date(); CmdUtils.setTextSelection( date.toLocaleDateString() ); } })
The new function here is setTextSelection()
. This inserts the passed-in text onto the page at the location of the cursor. If the cursor is in an editable text or rich-text fields, the text gets dumped there. If the cursor isn't in an editable area, setTextSelection()
will still be able to insert the date. (Even when it isn't displayed, Firefox always keeps track of a cursor position. To see it, type F7.) Try going to a page, selecting some non-mutable text, and using the command. See, it works! This is particularly useful for commands like "translate", where you want to replace non-editable text with its translation.
The toLocalDateString()
function is native to Javascript, so if you're not familiar with it check out the documentation for the Javascript Date object.
A Better Preview
It's time to add a better preview to the date command. Let's have the preview show the date, so that the user will know what to expect when they execute the command. (As a side benefit the user doesn't even need to execute the command to do a quick check of the day.)
CmdUtils.CreateCommand({ name: "date", _date: function(){ var date = new Date(); return date.toLocaleDateString(); }, preview: function( pblock ) { var msg = 'Inserts todays date: "<i>${date}</i>"'; pblock.innerHTML = CmdUtils.renderStringTemplate( msg, {date: this._date()} ); }, execute: function() { CmdUtils.setTextSelection( this._date() ); } })
We've done two things here. The first was to factor out the code for getting the date into the _date()
function. This way we don't break DRY by repeating code across the preview and execute functions. Notice that to access the _date()
, we use the this
keyword.
The second thing we've done is to add a preview function. The first argument is the DOM element that gets displayed as the preview for your command. Modify pblock
and you modify the preview. In this case, we set the innerHTML
of the preview block to be the message we want.
The other thing I've done is to do some string formatting using the renderStringTemplate()
function. This takes a template string and performs the appropriate substitution given the passed-in JSON object. Templates can handle a wide range of functionality, as we are currently using TrimPath's JavascriptTemplates. You should read their site for more documentation. Although JavascriptTemplates has some nice properties, we are contemplating moving to MJT sometime soon.
Previews display something meaningful to the user immediately. If you have a preview that requires an AJAX request—say, to fetch some search results—that call might take a while to return. In the meantime, your command should display a placeholder preview giving the user feedback.
preview: function( pblock ) { pblock.innerHTML = "This will show until the AJAX request returns"; // AJAX request pblock.innerHTML = getFromServer(); },
In the future, we may work on streamlining this process.
Sharing it with the World
Now that we've got our awesome new "date" command, let's share it with the world. All you have to do is put it up on the web somewhere and you're done. Anyone with Ubiquity can simply bookmark the page, tag it with Ubiquity, and have your awesome functionality.
Before you share it with the world, you should consider adding some attributions to your code:
CmdUtils.CreateCommand({ name: "date", homepage: "http://azarask.in/", author: { name: "Aza Raskin", email: "aza@mozilla.com"}, contributors: ["Atul Varma"], license: "MPL", /* THE REST OF THE CODE HERE */ })
Map Me! Location, Snapshots, and Inserting HTML
The "map" command that comes with Ubiquity is fairly powerful. It's also fairly complicated—well, comparatively. It's still only a couple hundred lines of code. The command, though, can get even more useful. Imagine being able to select some houses on Craigslist, or a list of restaurant names, and Ubiq "map these" to get just the map you want. The concept of "these" puts the power of mashups into the users hands. But I digress. Let's make a simple command that inserts a map of your current location.
In this command, we use the Google static map API and the Ubiquity function CmdUtils.getLocation()
to insert a map of your current location. Ubiquity currently uses the MaxMind API for trying to guess your location from your IP. That will probably change in the future.
CmdUtils.CreateCommand({ name: "map-me", _getMapUrl: function() { var loc = CmdUtils.getLocation(); var mapUrl = "http://maps.google.com/staticmap?"; var params = { center: loc.lat + "," + loc.long, size: "500x400", zoom: 14, key: "ABQIAAAAGZ11mh1LzgQ8-8LRW3wEShQeSuJunOpTb3RsLsk00-MAdzxmXhQoiCd940lo0KlfQM5PeNYEPLW-3w" }; return mapUrl + jQuery.param( params ); }, preview: function( pblock ) { var msg = "Inserts a map of your current location: <br/>"; msg += "<img src='%s'/>".replace( /%s/, this._getMapUrl() ); pblock.innerHTML = msg; }, execute: function( ) { CmdUtils.snapshotImage( this._getMapUrl(), function(imgData) { CmdUtils.setTextSelection( "<img src='" + imgData +"'/>"); }) } })
There are three new things here: CmdUtils.setTextSelection
to set HTML (yep, it can do that); the use of CmdUtils.getLocation()
; and using CmdUtils.snapshotImage()
to capture the bits for the image.
I find getting the location—as imprecise as IP-based location can be—useful for doing sensible defaults for location-based commands, like Yelp. CmdUtils.getLocation()
returns an object which has the following properties: city, state, country, lat, and long.
Why do we need to use CmdUtils.snapshotImage()
? Because the Google Maps API requires a key that is tied to a particular URL. If we naively inject the image tag into a random web page, the image won't load because the key doesn't match that random web page's URL. Thus, we use the snapshotImage()
function to convert the image into a data url.
There's also a CmdUtils.snapshotWindow
function, which allows you to get the image data for any tab/window. The function takes a window as the first paramater, and a callback for the second.
Commands with Arguments
Echo
We'll be working towards making some fun and useful commands—commands that let you control the seething tendrils of the internet with your little pinky. But, let's start by making a simple command to echo back whatever you type.
CmdUtils.CreateCommand({ name: "echo", takes: {"your shout": noun_arb_text}, preview: function( pblock, theShout ) { pblock.innerHTML = "Will echo: " + theShout; }, execute: function( theShout ) { var msg = theShout + "... " + theShout + "......"; displayMessage( msg ); } })
This says that the command "echo" takes one argument which is arbitrary text. Whatever text the user enters will get passed into both the preview and execute function.
Ubiquity takes care of parsing the user's input, so you don't need to worry about handling prounoun substitution. Try selecting some text on a page, and Ubiq "echo this". Ubiquity should now echo the selected text.
Notice that we specified the type of argument to expect by passing in an object — in this case, the predefined noun_arb_text
object, which accepts any arbitrary text as a valid argument. If we had wanted to restrict the inputs that our command could take, we could have used a more specific noun-type object to restrict the scope of the argument: for instance, noun_type_date
to accept only dates (like the "check-calendar" command) or noun_type_language
to accept only names of languages (like the optional modifiers for the "translate" command).
The benefit of specifying a more restrictive noun-type is that it helps the Ubiquity parser generate better suggestions and auto-completions based on user-input. For instance, if the user has a date selected, commands that operate specifically on dates are more likely to be apropos than commands that take arbitrary text, so Ubiquity can suggest the date-specific commands first.
There are many types of nouns that a command could conceivably take: people, dates, places, tabs, etc. Many of these noun-types aren't implemented yet, and most of the them currently have a lack-luster implementation. This is one of the areas where Ubiquity could use the greatest help. Noun-types enable creating compelling user experiences, with minimal amounts of code. It also allows for code-reuse across numerous commands.
Once you are familiar with writing commands, you should check out the nountypes.js, which has the implementation for most of the noun-types. You can see what noun types are already available for your commands to use, what still needs to be written, and where the existing implementations could use improvement — and then come get involved to help us improve them.
Insert Email: Commands with Specific Argument Types
Let's take a look at one of the special noun-types: noun_type_contact
. This lets Ubiquity know to expect a person (either by name or email address). By using the noun-type, Ubiquity will also autocomplete to known people while the user is entering the command. This is what the built-in Ubiquity command "email" uses.
At the moment, Ubiquity figures out what people you know through reading your Gmail contacts. In this prototyped version, you'll need to use Gmail and be logged in for for Ubiquity to know who you know. Eventually, we'd like to be able to interface with all major web-mail sites, as well as desktop software like Thunderbird.
Enough rambling. It's time for a command. I constantly find that I need to fetch someone's email address to paste into a text field because I don't know it off-hand. This command solves that by letting you insert someone's email address using autocomplete.
CmdUtils.CreateCommand({ name: "insert-email", takes: {"person": noun_type_contact}, preview: "Inserts someone's email address by name.", execute: function( email ) { CmdUtils.setTextSelection( email ); } })
This one command sums up what I love about Ubiquity. In 8 lines of code, I can fundamentally enhance the browser's functionality. Doing the same thing using a normal Firefox extension methodology takes pages and pages of code—and the interface would take more thought still. Doing the same thing using a bookmarklet would require a server-side component (to get around cross-site Ajax request ban) as well as forcing the user to give up their email password.
Ubiquity increases the surface area of innovation for the browser many-fold, by making anyone who can write simple Javascript into an agent for bettering the browser and the open Web.
TinyURL: Network Calls and jQuery
Often while writing emails, I'll discover that I've pasted in a URL long enough to be used for unfortunate analogies. I'd like to be able to quickly turn that into a TinyURL—but the process of making a TinyURL involves lots of fiddly steps. Ubiquity to the rescue.
Because we include jQuery with Ubiquity, it is simple to perform Ajax calls as well as parse returning data. TinyUrl.com provides an easy to use RESTful API where you pass a URL and it returns its shortened form. We use that API in this command.
CmdUtils.CreateCommand({ name: "tinyurl", takes: {"url to shorten": noun_arb_text}, preview: "Replaces the selected URL with a TinyUrl.", execute: function( urlToShorten ) { var baseUrl = "http://tinyurl.com/api-create.php"; var params = {url: urlToShorten}; jQuery.get( baseUrl, params, function( tinyUrl ) { CmdUtils.setTextSelection( tinyUrl ); }) } })
Although I used the noun_arb_text
command noun-type, I should have used the noun_type_url
—if such a thing existed. It doesn't yet.
jQuery is a powerful tool. With it, you can fairly effortlessly cherry-pick the data you need from RSS feeds, XML, and all sorts of other data formats. It also makes doing in-preview animations a breeze.
Color: Creating Bounded Noun Types
Suppose you're writing a set of commands for artists and web designers, and you know that several of the commands will operate on colors. You'd like to be able to specify that certain commands expect names of colors as arguments. Since there are a finite number of named colors, you can define a custom noun type for them based on a list of strings, like so:
noun_type_color = CmdUtils.NounType( "Color", ["red", "orange", "yellow", "green", "blue", "violet", "black", "white", "grey", "brown", "beige", "magenta", "cerulean", "puce"] // etc... );
Note that we gave the new object a name starting with "noun_
".
The Ubiquity command loader automatically detects objects starting with
"noun_
" as custom noun-types, in the same way as it auto-detects
functions starting with "cmd_
" as custom commands.
Once you've defined a custom noun-type, you can use it in as many commands as you like, thus:
CmdUtils.CreateCommand({ name: "get-color-code", takes: {"color": noun_type_color}, preview: "Inserts the HTML hex-code for the given color.", // etc...
One benefit of creating the custom color noun-type is that if the user has entered "get-color bl", for instance, Ubiquity will be able to suggest "black" and "blue" as the two valid completions based on the input.
Of course, not every type of noun you'd be interested in can be represented
as a finite list. If you want to be able to accept or reject input based
on some algorithmic test, you can do so by creating your own noun-type
implementation instead of instantiating CmdUtils.NounType
. There is an example of this in the section on the tab commands, below.
Replace: Commands With Multiple Arguments
Commands, like the translate command, can take multiple (and possibly optional) arguments. Ubiquity takes care of the parsing—you don't have to worry about what order the user types them in, you'll just get passed a dictionary with the appropriate entries.
To illustrate that, lets make a simple regular-expression-based "replace" command. It will take three arguments: the thing to replace, the replacement, and the scope-text to do the replacing in. Here's the command:
CmdUtils.CreateCommand({ name: "replace", takes: {"what": noun_arb_text}, modifiers: {with: noun_arb_text, in: noun_arb_text}, preview: function( pblock, what, args ) { // args contains .with and .to, both of which may be null. var msg = 'Replaces "{$what}" with {$with}.'; var subs = {what: what, with: args.with }; pblock.innerHTML = CmdUtils.renderStringTemplate( msg, subs ); }, execute: function( what, args ) { // If the scope text isn't specified, use the current selection. var text = args.in || CmdUtils.getTextSelection(); var newText = text.replace( what, args.with, "i"); CmdUtils.setTextSelection( newText ); } });
Caveat: There is a known issue where the parser does not recognize modifiers that are longer than a single word. For instance, "yelp near sf" will be parsed correctly, whereas "yelp near san francisco" will not. We'll be working to fix this in later versions of Ubiquity.
The modifiers argument takes a dictionary, where the key is the name of the argument and the value is the noun-type of the argument. In later releases we may include further options, like the ability to specify an argument as required/optional, etc.
The translate command is a good place to learn more about modifiers and the noun_type_language
.
Twitter: Putting It All Together
We've now covered everything we need to cover in order to write a command that allows us to Twitter from Ubiquity. Many thanks to Blair McBride for writing this command. This is a fully functioning command: the browser takes care of the odd edge cases, like not being logged in.
// max of 140 chars is recommended, but it really allows 160 const TWITTER_STATUS_MAXLEN = 160; CmdUtils.CreateCommand({ name: "twitter", takes: {status: noun_arb_text}, homepage: "http://theunfocused.net/moz/ubiquity/verbs/", author: {name: "Blair McBride", homepage: "http://theunfocused.net/"}, license: "MPL", preview: function(previewBlock, statusText) { var previewTemplate = "Updates your Twitter status to: <br/>" + "<b>${status}</b><br /><br />" + "Characters remaining: <b>${chars}</b>"; var truncateTemplate = "<br />The last <b>${truncate}</b> " + "characters will be truncated!"; var previewData = { status: statusText, chars: TWITTER_STATUS_MAXLEN - statusText.length }; var previewHTML = CmdUtils.renderStringTemplate(previewTemplate, previewData); if(previewData.chars < 0) { var truncateData = { truncate: 0 - previewData.chars }; previewHTML += CmdUtils.renderStringTemplate(truncateTemplate, truncateData); } previewBlock.innerHTML = previewHTML; }, execute: function(statusText) { if(statusText.length < 1) { displayMessage("Twitter requires a status to be entered"); return; } var updateUrl = "https://twitter.com/statuses/update.json"; var updateParams = { source: "ubiquity", status: statusText }; jQuery.ajax({ type: "POST", url: updateUrl, data: updateParams, dataType: "json", error: function() { displayMessage("Twitter error - status not updated"); }, success: function() { displayMessage("Twitter status updated"); } }); } });
Switching Tabs
The final command in this tutorial is for switching between tabs. The end goal is this: type a few keys to that matches the title of an open tab (in any window), hit return, and you've switched to that tab.
We'll write this command in two steps. The first step is creating a tab noun-type. The second step is using that noun-type to create the tab-switching command.
Switching: Writing your own Noun-Types
A noun-type needs to only have three things. A name, a match function, and a suggest function. Soon, we'll probably move to having a convenience CmdUtils.CreateNounType()
, which will simplify things even more.
The name is what shows up when the command prompts for input. Suggest returns a list of matching tabs. We're using FUEL to interact with the browser, which is where the "Application" variable comes from.
var noun_type_tab = { _name: "tab name", // Returns all tabs from all windows. getTabs: function(){ var tabs = {}; for( var j=0; j < Application.windows.length; j++ ) { var window = Application.windows[j]; for (var i = 0; i < window.tabs.length; i++) { var tab = window.tabs[i]; tabs[tab.document.title] = tab; } } return tabs; }, match:function( fragment ) { return noun_type_tab.suggest( fragment ).length > 0; }, suggest: function( fragment ) { var suggestions = []; var tabs = noun_type_tab.getTabs(); //TODO: implement a better match algorithm for ( var tabName in tabs ) { if (tabName.match(fragment, "i")) suggestions.push( tabName ); } return suggestions.splice(0, 5); } }
Switching Tabs: The Command
Now that we are armed with the tab noun-type, it is easy to make the tab-switching command. Again, we use FUEL to focus the selected tab.
CmdUtils.CreateCommand({ name: "tab", takes: {"tab name": noun_type_tab}, execute: function( tabName ) { var tabs = noun_type_tab.getTabs(); tabs[tabName]._window.focus(); tabs[tabName].focus(); }, preview: function( pblock, tabName ) { if( tabName.length > 1 ){ var msg = "Changes to <b style=\"color:yellow\">%s</b> tab."; pblock.innerHTML = msg.replace(/%s/, tabName); } else pblock.innerHTML = "Switch to a tab by name."; } })
Interacting with Other Extensions
There isn't much to say here besides that it's easy. For example, here's a command (thanks to Abimanyu Raja for writing this code) which interfaces with the FoxyTunes plugin: letting you play/pause your favorite music player. Interfacing with other extensions, too, is easy because you can view the source code for every Firefox extension.
//Check if FoxyTunes is installed if(window.foxytunesDispatchPlayerCommand){ function cmd_play_song(){ foxy_tunes_action("Play"); } function cmd_pause_song(){ foxy_tunes_action("Pause"); } function cmd_previous_song(){ foxy_tunes_action("Previous"); } function cmd_next_song(){ foxy_tunes_action("Next"); } function foxy_tunes_action(action){ window.foxytunesDispatchPlayerCommand(action, true); } }
Running on page load and startup
In order to run some code on page load, you simply have to prefix your function with pageLoad_
. For example, if you want to say "Hi" every time a page is loaded, your code would look like this:
function pageLoad_hi(){ displayMessage("hi"); }
If you modify the function and want to see the changes, remember to first invoke Ubiquity. Although your function like above, might not be a Ubiquity command, this is necessary to refresh the cached code.
Similarly, if you want to run some code everytime Firefox starts up, you just have to prefix the function with startup_
.
The awesome thing about these functions is the ability to develop whole Firefox extensions (that require minimal UI) as Ubiquity plugins in lesser lines of code. You don't need to worry about chrome.manifest or install.rdf. Another added benefit is that you never have to restart your Firefox during development unless of course, you are running code on Firefox startup.
Here's the code for Keyscape which is a Ubiquity command that makes use of pageLoad
and startup
to recreate the functionality of the Search Keys extension by Jesse Ruderman. In line with Ubiquity's aim to let you do things quicker using your keyboard, this command lets you go to search results on Google by just pressing a number. It'll add hints to show the number of each link.

//A lot of this code is borrowed from the Search Keys extension //Many thanks to Jeese Ruderman function startup_keyscape() { window.addEventListener("keydown", keyscape_down, true); } function pageLoad_keyscape(doc){ var uri = Utils.url(doc.documentURI); //If we are on about: or chrome://, just return if(uri.scheme != "http") return; //Check if the page we are on is google if( keyscape_isGoogle(uri) ){ for(var num=1; num<=10; num++){ var link = jQuery(doc.body).find('a.l')[num-1]; if( link ){ var hint = doc.createElementNS("http://www.w3.org/1999/xhtml", "span"); hint.style.color = "blue"; hint.style.background = "white"; hint.style.padding = "1px 2px 1px 2px"; hint.style.marginLeft = ".5em"; hint.appendChild(doc.createTextNode(num == 10 ? 0 : num)); link.parentNode.insertBefore(hint, link.nextSibling); } } } } function keyscape_isGoogle(uri){ return uri.host.indexOf("google") != -1 && (uri.path.substr(0,8) == "/search?" || uri.path.substr(0,8) == "/custom?"); } function keyscape_down(event){ var doc = Application.activeWindow.activeTab.document; var uri = Utils.url(doc.documentURI); if( keyscape_isGoogle(uri) ){ var key = parseInt(event.keyCode || event.charCode); var num; if(48 <= key && key <= 57) //number keys num = key - 48; else if(96 <= key && key <= 105) //numeric keypad with numlock on num = key - 96; else return; //Don't do anything if we are in a textbox //or some other related elements var elt = window.document.commandDispatcher.focusedElement; if (elt) { var ln = new String(elt.localName).toLowerCase(); if (ln == "input" || ln == "textarea" || ln == "select" || ln == "isindex") return; } //Get the link url from the search results page var url_dest = jQuery(doc.body).find('a.l').eq(num-1).attr('href'); if(event.altKey){ //Open in new tab Application.activeWindow.open(Utils.url(url_dest)); }else{ //Open in same tab doc.location.href = url_dest; } } }
If Ubiquity does indeed become ubiquitous, a lot of extensions can be re-written as Ubiquity commands. This is much nicer for the end-user, as well, because the Ubiquity command installation process is a lot more humane.
Conclusion
To reiterate a point I made before: Ubiquity increases the surface area of innovation for the browser many-fold, by making anyone who can write simple Javascript into an agent for bettering the browser and the open Web. You are one of those agents.
Now, go forth and create.