mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-17 06:48:37 +02:00
42 lines
1.7 KiB
Markdown
42 lines
1.7 KiB
Markdown
# WebExtension Webpack Example
|
|
A minimal example of how to use [webpack](https://webpack.github.io) to package
|
|
[npm](https://npmjs.com) 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](webpack.config.js), they each
|
|
generate a file that includes all modules used the entry point and store it in
|
|
the [addon](addon/) folder. The first one starts with [background_scripts/background.js](background_scripts/background.js)
|
|
and stores it in `addon/background_scripts/index.js`. The other one does the
|
|
same for [popup/left-pad.js](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](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 prefered tool.
|
|
|
|
## Live-development
|
|
Additionally to watching the folder with your `manifest.json` in it, you will also
|
|
have to run webpack in watch mode.
|