You’re probably familiar with context menus, they’re the menus that appear as a result of a right-click on a web page or browser element. Interacting with context menus quickly becomes a part of everyday web surfing as they provide shortcuts for many general tasks. But there are probably special shortcuts you’d include in them if you could such as editing an image, sending a quote to Twitter, or translating the text content of an element. Good news, you can use the brand-spanking-new Context Menu API introduced in version 0.3 of the Jetpack SDK to do just that!

Editing an image with Picnik

Picnik is a web-based image editor that lets you modify images in a variety of ways, like resizing, cropping, red-eye removal and more.

How it’s made

I can’t wait to start editing images, so let’s make it possible to get an image up and ready to edit on Picnik in one click! Here’s what the code looks like:

exports.main = function(options, callbacks) {

    var contextMenu = require("context-menu");

    var editImageItem = contextMenu.Item({
        label: "Edit image with Picnik",
        onClick: function (context) {
            require('tabs').Tabs.add('http://www.picnik.com/?import=' + escape(context.node.src), true);
        },
        context: 'img'
    });

    contextMenu.add(editImageItem);

}

For official modules provided by the Jetpack SDK, you don’t have to worry about copying their js file(s) into your extension’s packages directory, simply retrieve their functionality via the require() statement. For your own modules (like my tabs module used in the code above, which is a stand-in until we release the native tabs API) you will need to ensure that they are included in the lib directory of your extension package.

What it looks like

Here’s a shot of the extension’s addition to the context menu that appears when an image is clicked:

After clicking “Edit image with Picnik”, the image will open in a new tab ready for editing:

Get the source files

Download the Picnik Image Editor package and unpack it to the packages/ subdirectory of your Jetpack SDK directory. Make sure the SDK is activated per the instructions in the docs. Then enter the image-editor/ subdirectory and execute the command cfx -a firefox run to try it out.

Install the extension

To use the extension, you can install Picnik Image Editor from addons.mozilla.org.