MDN will be in maintenance mode on Friday September 22nd, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.


Module structure of the SDK

Add-ons using the techniques described in this document are considered a legacy technology in Firefox. Don't use these techniques to develop new add-ons. Use WebExtensions instead. If you maintain an add-on which uses the techniques described here, consider migrating it to use WebExtensions.

Starting from Firefox 53, no new legacy add-ons will be accepted on (AMO) for desktop Firefox and Firefox for Android.

Starting from Firefox 57, only extensions developed using WebExtensions APIs will be supported on Desktop Firefox and Firefox for Android.

Even before Firefox 57, changes coming up in the Firefox platform will break many legacy extensions. These changes include multiprocess Firefox (e10s), sandboxing, and multiple content processes. Legacy extensions that are affected by these changes should migrate to use WebExtensions APIs if they can. See the "Compatibility Milestones" document for more information.

A wiki page containing resources, migration paths, office hours, and more, is available to help developers transition to the new technologies.

CommonJS is the underlying infrastructure for both the SDK and the add-ons you build using the SDK. A CommonJS module is a piece of reusable JavaScript: it exports certain objects which are thus made available to dependent code. CommonJS defines:

  • an object called exports which contains all the objects which a CommonJS module wants to make available to other modules
  • a function called require which a module can use to import the exports object of another module.

Except for scripts that interact directly with web content, all the JavaScript code you'll write or use when developing add-ons using the SDK is part of a CommonJS module, including:

  • SDK modules: the JavaScript modules which the SDK provides, such as panel and page-mod.
  • Local modules: each of the JavaScript files under your add-on's "lib" directory.
  • External modules: reusable modules developed and maintained outside the SDK, but usable by SDK-based add-ons.

SDK Modules

The modules supplied by the SDK are divided into two sorts:

To use SDK modules, you can pass require() a complete path, starting with "sdk", to the module you want to use. For high-level modules this is just sdk/<module_name>, and for low-level modules it is sdk/<path_to_module>/<module_name>:

// load the high-level "tabs" module
var tabs = require("sdk/tabs");

// load the low-level "uuid" module
var uuid = require('sdk/util/uuid');

The path to specify for a low-level module is given along with the module name itself in the title of the module's documentation page (for example, system/environment).

Although the SDK repository in GitHub includes copies of these modules, they are built into Firefox and by default, when you run or build an add-on using jpm run or jpm xpi, it is the versions of the modules in Firefox that are used. If you need to use a different version of the modules, you can do this by checking out the version of the SDK that you need and passing the -o or --overload option to jpm run or jpm xpi.

Local Modules

At a minimum, an SDK-based add-on consists of a single module named main.js, but you can factor your add-on's code into a collection of separate CommonJS modules. Each module is a separate file stored under your add-on's "lib" directory, and exports the objects you want to make available to other modules in your add-on. See the tutorial on creating reusable modules for more details.

To import a local module, specify a path relative to the importing module.

For example, the following add-on contains an additional module directly under "lib", and other modules under subdirectories of "lib":

  • my-addon
    • lib
      • main.js
      • password-dialog.js
      • secrets
        • hash.js
      • storage
        • password-store.js

To import modules into main:

// main.js code
var dialog = require("./password-dialog");
var hash = require("./secrets/hash");

To import modules into password-store:

// password-store.js code
var dialog = require("../password-dialog");
var hash = require("../secrets/hash");

External Modules

As well as using the SDK's modules and writing your own, you can use modules that have been developed outside the SDK and made available to other add-on authors.

There's a list of these "community-developed modules" in the SDK's GitHub Wiki, and to learn how to use them, see the tutorial on using external modules to add menu items to Firefox.

To import external modules, treat them like local modules: copy them somewhere under your add-ons "lib" directory and reference them with a path relative to the importing module.

For example, this add-on places external modules in a "dependencies" directory:

  • my-addon
    • lib
      • main.js
      • dependencies
        • geolocation.js

It can then load them in the same way it would load a local module. For example, to load from main:

// main.js code
var geo = require("./dependencies/geolocation");


The SDK freezes the exports object returned by require. So a if you import a module using require, you can't change the properties of the object returned:

self = require("sdk/self");
// Attempting to define a new property
// will fail, or throw an exception in strict mode = 1;
// Attempting to modify an existing property
// will fail, or throw an exception in strict mode = "foo";

Using modules from outside the Add-on SDK

You can use CommonJS modules outside the Add-on SDK, in any environment where you can use Components.utils.import. Just call the following:

const { require } = Cu.import("resource://gre/modules/commonjs/toolkit/require.js", {})

This will import require() into your scope.

You can then use that to import CommonJS modules. You can import SDK modules in just the same way you could from an SDK add-on:

// import the SDK's base64 module

var base64 = require("sdk/base64");
base64.encode("hello"); // "aGVsbG8="

You can import other CommonJS modules, too, as long as you know the path to them:

// import my module

var myModule = require("resource://path/to/my/module.js");

In this case, though, you might be better off creating your own loader, so you can specify the paths property yourself.



Document Tags and Contributors

 Contributors to this page: wbamberg, BaNru, richgilbank, evold
 Last updated by: wbamberg,