mathiscode/es6-webextension-boilerplate

A boilerplate for writing WebExtensions in ES6 with Webpack and support for localization

ES6 WebExtension Boilerplate

---

• Introduction
• Getting Started
• Development
• Modifying
• Building
• Version Sync
• Internationalization

---

Introduction

ES6 WebExtension Boilerplate is designed to get a new browser addon started quickly.

• Ready-to-use development workflow from live-reload to publishing
• Manifest version is automatically kept in sync with package.json version
• Internationalization Utilities

Getting Started

Optional: You'll probably want to use this repository as a template, then replace the clone URL and directory name below.

git clone https://github.com/mathiscode/es6-webextension-boilerplate.git
cd es6-webextension-boilerplate
npm install # or yarn

Development

npm run develop # or yarn develop

This will cause webpack to watch for changes and automatically compile the extension, as well as automatically load your extension into Firefox using web-ext.

You can tweak the web-ext config in web-ext-config.js.

If you prefer to only start webpack in watch mode: npm start

Modifying

You will want to look at the following files and directories:

• extension/manifest.json - Your extension's manifest
• extension/_locales/en/messages.json - English (default) localized messages
• src/background.js - Background script
• src/content.js - Content script
• src/views/popup - Files related to the extension's toolbar popup (browser action)
• src/views/options - Files related to the extension's options page

Building

npm run build # or yarn build

This will compile your code and create a ZIP file in the web-ext-artifacts directory that is ready to be uploaded to AMO or Chrome Web Store.

AMO requires that you submit the full source to be listed publicly, so the build command also zips the entire source into web-ext-artifacts/source.zip to be submitted with your extension.

Note: If your operating system doesn't provide a zip command, you will see a warning, but your source will still be zipped properly.

Version Sync

There is a utility to automatically keep your manifest version synced with your package.json version.

When incrementing your version, use the following commands:

• npm run version:patch
  • to increment patch number
• npm run version:minor
  • to increment minor number
• npm run version:major
  • to increment major number

Internationalization

Internationalization is supported, and locale definitions are found in extension/_locales.

There is also a helper utility in src/utils/i18n.js that will allow you to localize your extension's HTML pages. This is done by default in the options and popup pages.

In the HTML, use the data-localize attribute to specify the message key to use; eg:

<h1 data-localize="__MSG_extensionName__"></h1>

To see this in action, refer to src/views/options and src/views/popup.