felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-17 14:59:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve documentation and move build target to addon folder

Browse Source
This commit is contained in:
Martin Giger
2016-09-29 12:11:56 +02:00
parent 71641abd14
commit 1974e3cea6
6 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
webpack-modules/README.md
View File

@@ -1,15 +1,25 @@
# WebExtension Webpack Example
A minimal example of how to use npm modules from within a WebExtension.
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 setup takes a background and a content script entrypoint and outputs them
to their respective target.
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 and so on.
react/jsx, css modules, image processing, local modules and so on.
## What it shows
@@ -20,7 +30,7 @@ react/jsx, css modules, image processing and so on.
- `npm install`
- `npm run build`
The WebExtension in the [dist](dist/) folder should now work.
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