Omni Launch: Launch Installed Web apps from the URL bar

Yes, I know, three posts today about the Management API. Anyway, I have created an Awesome extension that allows you to use your URL Bar (The Omnibox) to find an launch apps by their name.

It is pretty cool, just type “go TAB or SPACE app name” in your URL bar and that is it. It will search through your installed extensions and let you launch it very quickly.

The remarkable thing is that this extension took 20 minutes to create, and I will try and show you how in this post.

Like all extensions, the first thing that we do is define a manifest.

{
  "name": "Omni Launch",
  "description": "Launches apps, the quick way!",
  "version": "0.0.0.2",
  "background_page": "background.html",
  "permissions" : ["management"],
  "omnibox": { "keyword" : "go" },
  "icons" : {
    "16" : "go.png"
  }
}

The important thing here is the “omnibox” attribute which lets you define a keyword that will allow the user to activate your extension.

Chrome does a lot of magic now, firstly it takes your 16 pixel icon and when ever the user types “go” into the address bar this icon will be shown next to the action (although it will be in grey-scale). If you load this extension now, as is, you will see what I mean.

Now lets add some functionality to the background.html file. This is the brains of our extension. The way the extension works is a progressive filter. If I type “go t” it will find all apps that contain “t”, if I type “tw” it will find all apps that have a “tw” in their name. It is pretty basic stuff.

The first thing that we will do is hook-up the a function that handles the keypresses in the omnibar for our keyword. There is a simple API called

var inputChanged = function(text, suggestionsCallback) {
    if(text == "") {
      return;
    }

    var suggestions = [];
    var textlc = text.toLowerCase();
    var re = new RegExp("("+text+")","ig");

    for(var a in apps) {
      var app = apps[a];
      var name = app.name.toLowerCase();
      var idx = name.indexOf(textlc);
      if(idx > -1) {
        var content = app.name;
        var description = (app.description == "") ? 
           " " : app.description;

        var matchStyle = chrome.omnibox.styleMatch(idx, text.length);

        suggestions.push(
          {
            "content": content,
            "description" : content + " - " + description,
            "descriptionStyles" : [
              matchStyle
            ]
          }
        );
      }
    }

    suggestionsCallback(suggestions);
  };

And hook-up the handler:

chrome.omnibox.onInputChanged.addListener(inputChanged);

The code is pretty straight forward, but it does do some special bits. For a start, we only want to be able to launch apps, so we need to maintain a simple list of all apps (done via chrome.management.getAll(getAllCallback);); once that is out of the way, we have the handler hooked up (onInputChanged) that detects when the users is changing their input against our keyword. The code iterates across all known apps and checks to see if their name contains the search term. If it does we add it to an array of suggestions. We also style the suggestion a little using “chrome.omnibox.styleMatch” to highlight the exact text that matched in the suggestion. At the end of the handler we call the method (suggestionsCallback) passed in to our handler with a list of the apps that we are suggesting to the user.

And that is the basics done for adding suggestions into the Omnibox, it isn’t an amazing amount of use at the moment because if you select one of the suggestions it doesn’t do anything. We want it to launch the app Dammit! :)

Luckily, launching apps and find the selected item is really really easy.

So here goes:

var inputEntered = function(text) {
  var appsList = [];

  if(text == "") {
    return;
  }

  for(var a in apps) {
    var app = apps[a];

    if(app.name.toLowerCase() == text.toLowerCase()) {
      chrome.management.launchApp(app.id);
      return;
    }
  }
};

And hook up a handler that is triggered when the user makes a selection.

chrome.omnibox.onInputEntered.addListener(inputEntered);

This code is pretty basic, all we do is loop through each of the installed apps looking for the first one that matches the same name as the name of the app selected in the suggestions list and launch it using the “chrome.management.lauchApp” API.

And we are all done. If you want to see this code in action it is available on Github/PaulKinlan/OmniLaunch. Fork away and tell me what you build.