A minimal example of how to use webpack to package npm modules so they can be used in a WebExtension. The example package used by this extension is left-pad, an essential package in almost any situation.

What it does

This example shows how to use a node module in a background and a content script. It defines two build targets in webpack.config.js, they each generate a file that includes all modules used the entry point and store it in the addon folder. The first one starts with background_scripts/background.js and stores it in addon/background_scripts/index.js. The other one does the same for popup/left-pad.js and stores it in addon/popup/index.js.

The extension includes a browser action with a popup, which provides an UI for running left-pad on a string with a chosen character. The operation can either be performed with the left-pad module included in the panel's script or in the background script.

What it could do

This could be infinitely extended - injecting global jQuery, adding babel, react/jsx, css modules, image processing, local modules and so on.

What it shows

How to use npm or custom modules in a WebExtension.

How to build it

npm install
npm run build

The WebExtension in the addon folder should now work.

What about Browserify?

Browserify works just as well as webpack for extensions. In the end it's a personal choice about your preferred tool.

Live-development

As well as watching the folder with your manifest.json in it, you will also have to run webpack in watch mode.