Using third-party modules (jpm)

The Add-on SDK is extensible by design: you can use the modules that ship inside Firefox, but you can also create your own modules and make them available for anyone else to use. Before the jpm tool was available, there wasn't any package manager for these community-developed modules, so it wasn't obvious where to find community-developed modules, or how to install and update them.

With jpm, we use npm as the package manager for SDK modules that don't ship inside Firefox. Module developers can publish SDK modules to npm, and add-on developers can install them from npm and build them into their add-ons.

This article explains how to use npm-hosted third-party SDK modules with jpm. We'll use the menuitem package to add a new menu item to Firefox.

Summary

First, while in the root of your add-on, install the package that contains the modules you want to use:

npm install menuitem --save

Now you'll see a new directory in your add-on root called "node_modules" that contains a directory "menuitem". In your add-on code, you can require() modules by passing a path to the module starting from, but not including "node_modules":

var menuitems = require("menuitem");

Details

Create a new directory called, for example, "my-menuitem", navigate to it, type "jpm init" and accept all the defaults:

mkdir my-menuitem
cd my-menuitem
jpm init

Install the menuitem package from npm:

npm install menuitem --save

This will install the package in the current directory, under a directory called "node_modules". The --save argument instructs npm to add this package to the dependencies key in the add-on's package.json file.

You'll now see a new directory in "my-menuitem" called "node_modules". It will contain a single directory "addon-pathfinder", and the modules included in this package will be somewhere in that directory:

• my-menuitem
  • index.js
  • node_modules
    • menuitem
  • package.json
  • test

We're interested in using the "menuitem" module, which is at "addon-pathfinder/lib/ui/menuitem". Open "index.js" and replace it with this:

var menuitems = require("menuitem");

var menuitem = menuitems.Menuitem({
  id: "clickme",
  menuid: "menu_ToolsPopup",
  label: "Click Me!",
  onCommand: function() {
    console.log("clicked");
  },
  insertbefore: "menu_pageInfo"
});

Now run the add-on:

jpm run -b nightly

You should see a new menu item in the Tools menu labeled "Click Me!". Click the button, and the message "clicked" is logged.

Note: In more recent versions of Firefox, the Menu Bar may not be visible by default. To show the Menu Bar, click on the Open Menu icon and select "Customize". Then, under Show / Hide Toolbars, enable the Menu Bar. Finally, click the green bar "Exit Customize"