Extensibly Awesome: A Jetpack API for the Firefox Location Bar

I tweaked some of Mardak’s code for the Twitter Add-on, and created a Jetpack module that makes it terribly simple to write add-ons that extend the awesomebar with your own suggestions. As an example, here’s an add-on that uses the Google Translate API to translate text into a specified language directly in the location bar. If you type in the keyword ‘translate’, followed by a language code and some text, it will show the translation in the awesomebar results:


The code:

  keyword: 'translate',
  onSearch: function(query, suggest) {
    let lang = query.substring(0, query.indexOf(' '));
    let text = query.substring(query.indexOf(' '));
    if (lang.length == 2 && text.length > 2) {
      translate(lang, text, function(translatedText) {
          title: 'Translated text in ' + lang + ': ' + translatedText,
          url: 'http://translate.google.com/?tl=' + lang +
               '&q=' + encodeURIComponent(text),
        }, true);

function translate(lang, text, callback) {
    url: 'http://ajax.googleapis.com/ajax/services/language/translate',
    content: {
      v: '1.0',
      q: text,
      langpair: '|' + lang
    headers: {
      Referer: require('tabs').activeTab.location
    onComplete: function() {

The example needs niceties such as being able to write full language names, but you get the gist.

Here’s the awesomebar.js module.

There’s a bit of documentation in there. The code could use some cleanup, and could probably be much smaller if converted to use the internal Jetpack APIs for things like window-watching, etc.

14 Comments on “Extensibly Awesome: A Jetpack API for the Firefox Location Bar”

  1. Gordon P. Hemsley says:

    FYI, you can do essentially the same behavior with the built-in (but little-known/used) bookmark keyword feature.

    Just bookmark the following URL and assign it the keyword ‘translate':

    I mean, obviously, it’s not as customizable as the Jetpack (you rely on Google to decide what language you’re translating from, and you don’t get the custom text identifying what it is you’re doing), but it’s essentially the same. I’ve been using this for a while (since I stopped using Ubiquity).

    • Gordon P. Hemsley says:

      Oh, I just realized that yours is actually the reverse of mine, as I find it much more useful to translate FROM a language INTO English instead of the other way around. YMMV.

      Also, I have a similar bookmark/keyword for translating webpages as well (‘translateu’).

      • I don’t think you quite understand the example. Note how the *translated text* is in the location bar result.

        The API allows the add-on to provide N suggestions. For example, you could type “google Gordon Hemsley” and a Google search add-on could show all the Google results about you *in* the location bar results, like Google’s Omnibox. Or you could write an add-on the hooks up the search box into the location bar for an Omnibox-like behaviour for all of your installed search engines that provide suggestions.

        Or you could do the same with a Twitter search, or you could show translations from every language Google Translate supports.

        Etc, etc.

      • Gordon P. Hemsley says:

        Yeah, I got that. That’s what I meant when I said keywords are not as customizable.

        But how is this any different/better than what Ubiquity could do?

        The Jetpack requires you to open up a new tab or hijack your current tab to manipulate the URL bar. Ubiquity used its own CLI and had (I think) a much more flexible output display. Oh, and wouldn’t you have to create a separate Jetpack for each new command or command set, rather than having them included or easily pluggable, like Ubiquity?

        I mean, if you’re gonna take the time to do all that, why not just resurrect Ubiquity?

        (As an aside, I’m not really first-hand familiar with Chrome’s Omnibox, and I don’t usually use search suggestions on Google itself, either. I’d be more likely to use a command like ‘translate’ or ‘map’ than ‘search’.)

    • Samat Jain says:

      I may have forgotten how keyword searches work, but results won’t show up in the Awesome Bar? See bug [Bug 445955 – Put search bar keyworded searches in location bar autocomplete].

  2. Philip Chee says:

    You do know that Google just EOLed that their translate API don’t you?

  3. Gordon, WordPress comment threading won’t let me post back to our thread, so continuing it here :)

    This is an API. You can load results in the same tab, or not. You can do anything that you’d like. For some things it’s ideal to load a URL in the same tab. For things like inline currency exchange, you just want the result copied to the clipboard really, and visually available. You wouldn’t ever select the result. What people do with this is limited by their imagination and use-cases.

    Re: Ubiquity – if you’re asking how this is different than Ubiquity than you need to look at both of these things in more depth. I’m not going to try and explain it to you. They’re quite different in many ways. I worked on Ubiquity for a while. There’s a lot of interesting things in that codebase. I hope that work gets put to use again someday.

  4. Steve Fink says:

    I can’t seem to get it to give me the “Switch to tab” option, even though every one of my results is pulled directly from an existing tab:

    title: tab.title,
    url: tab.url,
    icon: tab.favicon,

    • The switch-to-tab functionality is, uh, bolted onto Firefox :P The autocomplete code in toolkit blows, and needs a major rewrite in order to reasonably support stuff like this.

  5. Benjamin Llie says:

    Hi, Good afternoon i would like to contribute by asking for an option to click to play plugins (flash and java, check opera or chrome) for a lesser use of cpu and more secure browsing

    there was already a bugzila report


    thanks in advance.

    Best regards.

  6. Nate says:

    So I know that this hasen’t been touched in years, but is this still supported? I tried making an addon that uses it and cannot seem to get anything to work. (The error console is full of errors)

  7. How can I connect this module? In my simple addon I only have main.js – I need copy this code to my file or create another one?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

Join 26 other followers