Skip to content

Extending the New Developer Toolbar

Firefox 16 will be released in a couple of days. Among its many improvements, there’s the new Developer Toolbar. This toolbar is essentially a command line that allows you to execute commands on the developer tools, like inspecting elements, starting up the debugger and generating screenshots from web content. This feature is designed to be easily extensible, so I decided to give it a try. Here are my results.

I thought it was particularly useful that there is a screenshot command in it. Since I’m not much of a web developer, this is the command that struck me as most useful. So I decided to take the screenshot command and juice it up. I created a restartless extension that adds a new imgur command that, predictably, uploads screenshots to instead of saving them locally.

Creating commands is surprisingly easy. There’s no documentation for it yet – that I know of – so it required some digging around. Since it made sense to base my code on the screenshot command, first I located its source. As you will see if you inspect that code, declaring commands is super simple, and something you can cobble together in a few minutes (sans localization). Once I had the base for my code, it was just a matter of looking into imgur’s API, and then code, debug, repeat.

I finally got it in a decent state.

imgur instalado

The resulting code can be found on Github. It’s worth noting that the code won’t work as is, just because I decided not to publish the imgur API key I generated. If you want to fork the code, you just need to visit imgur’s API page, generate your own key and replace it in the code. However, if you want to give the add-on a try, here it is. It should work on Firefox 16 and later.

I created this add-on as an experiment, and as part of a Firefox Developer Tools presentation I’m giving later this week in Costa Rica. So, this is far from a finished product. A few things should be corrected, like the lack of localization and the fact that it doesn’t send any metadata (like the title and description) to imgur. So, if you’re interested in turning it into a decent add-on, be my guest :) .

{ 3 } Comments

  1. Mike Ratcliffe | 2012/10/08 at 4:45 AM | Permalink

    Your imgur command awesome!

    I was going to create something similar recently until I noticed a low limit on the number of uploads per day. There is some documentation on writing commands at:

    /Mike Ratcliffe

  2. some one | 2012/11/19 at 4:25 AM | Permalink

    I wish Mozilla would create a separate developer tool and make a regular lightweight Firefox.

  3. jorge | 2012/11/20 at 5:32 PM | Permalink

    The developer tools are pretty much independent from the rest of Firefox. They don’t make Firefox any less lightweight.

Post a Comment

Your email is never published nor shared. Required fields are marked *