Tips and Tricks

This page contains various tips and tricks which should be useful to many people developing WebExtensions.

Using advanced JavaScript features from ECMAScript 6 and 7

Firefox supports many features of ECMAScript 6 out of the box. Several new and experimental features, however, are not available to the Web or WebExtensions by default. If you want to use these features, it's best to trans-compile your code using a tool such as Babel.

Babel provides transformations for the vast majority of ES6 features, and enables them by default. Since Firefox already fully supports most of these, it's best to configure Babel to ignore them. We suggest creating a .babelrc file, or a babel section in your project's package.json file containing the following:

{
  "env": {
    "firefox": {
      "sourceMaps": "inline",
      "blacklist": [
        "es5.properties.mutators",
        "es6.arrowFunctions",
        "es6.destructuring",
        "es6.forOf",
        "es6.parameters",
        "es6.properties.computed",
        "es6.properties.shorthand",
        "es6.spec.symbols",
        "es6.spread",
        "es6.tailCall",
        "es6.templateLiterals",
        "es6.regex.sticky",
        "es6.regex.unicode"
      ]
    }
  }
}

Then, to compile an individual script, simply run:

BABEL_ENV=firefox babel <filename>

Or, to compile every JavaScript file under the directory src and place the compiled files in compiled, copying over non-JavaScript files in the process, run:

BABEL_ENV=firefox babel -Dd compiled src