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

Merge pull request #93 from freaktechnik/master

Browse Source 
Add an example on how to use webpack with webextensions
This commit is contained in:
wbamberg
2016-09-29 10:07:43 -07:00
committed by GitHub
parent 47a9c3b34b 7812c6ae9d
commit 59f995ebf0
8 changed files with 130 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
webpack-modules/README.md Normal file
View File

@@ -0,0 +1,41 @@
# 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.

BIN
webpack-modules/addon/icons/leftpad-32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 530 B

17
webpack-modules/addon/manifest.json Normal file
View File

@@ -0,0 +1,17 @@
{
"manifest_version": 2,
"name": "Webpack Example",
"version": "1.0.0",
"description": "A minimal example of how to use npm modules from within a WebExtension.",
"icons": {
"32": "icons/leftpad-32.png"
},
"browser_action": {
"default_icon": "icons/leftpad-32.png",
"default_title": "Left Pad",
"default_popup": "popup/left-pad.html"
},
"background": {
"scripts": ["background_scripts/index.js"]
}
}

17
webpack-modules/addon/popup/left-pad.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<form id="leftpad-form">
<label for="text">Text:</label><input type="text" id="text" required><br>
<label for="amount">Result length:</label><input type="number" id="amount" min="0" step="1" required><br>
<label for="with">Pad with:</label><input type="text" required value="_" id="with"><br>
<label for="result">Result:</label><output id="result"></output><br>
<button type="submit">Pad!</button>
<button id="pad-bg">Pad in background script</button>
</form>
<script src="index.js"></script>
</body>
</html>

6
webpack-modules/background_scripts/background.js Normal file
View File

@@ -0,0 +1,6 @@
const leftPad = require("left-pad");
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
const result = leftPad(message.text, message.amount, message.with);
sendResponse(result);
});

16
webpack-modules/package.json Normal file
View File

@@ -0,0 +1,16 @@
{
"name": "webpack-webextension",
"version": "1.0.0",
"description": "A minimal example of how to use npm modules from within a WebExtension.",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"license": "MPL-2.0",
"devDependencies": {
"webpack": "^1.13.1"
},
"dependencies": {
"left-pad": "^1.1.1"
}
}

23
webpack-modules/popup/left-pad.js Normal file
View File

@@ -0,0 +1,23 @@
const leftPad = require("left-pad");
const resultNode = document.getElementById("result");
const textNode = document.getElementById("text");
const amountNode = document.getElementById("amount");
const withNode = document.getElementById("with");
document.getElementById("leftpad-form").addEventListener("submit", (e) => {
e.preventDefault();
console.log("padding");
resultNode.value = leftPad(textNode.value, amountNode.valueAsNumber, withNode.value);
}, false);
document.getElementById("pad-bg").addEventListener("click", (e) => {
chrome.runtime.sendMessage({
text: textNode.value,
amount: amountNode.valueAsNumber,
with: withNode.value
}, (result) => {
resultNode.value = result;
});
});

10
webpack-modules/webpack.config.js Normal file
View File

@@ -0,0 +1,10 @@
module.exports = {
entry: {
background_scripts: "./background_scripts/background.js",
popup: "./popup/left-pad.js"
},
output: {
path: "addon",
filename: "[name]/index.js"
}
};