webpack-browser-extension-scripts

webpack plugin to handle manifest script assets (content_scripts, background.scripts, service_worker, user_scripts) from browser extensions

Properly output script files based on the manifest fields declared in the manifest file.

Supports

• Background scripts: refers to background.scripts
• Content scripts: refers to content_scripts
• Service Worker script (V3): refers to background.service_worker
• User scripts: refers to user_scripts

Install

npm i webpack-browser-extension-scripts --save-dev

Usage

Check the demo folder for a list of samples using a HMR plugin.

1// webpack.config.js
2
3const ScriptsPlugin = require('webpack-browser-extension-scripts')
4
5module.exports = {
6  // ...other webpack config,
7  plugins: [
8    new ScriptsPlugin({
9      manifestPath: '<path-to-my-manifest-json-file>',
10      exclude: ['<path_to_excluded_folder>']
11    })
12  ]
13}

What this plugin do?

Given a manifest file, grab all possible JavaScript fields and add them as webpack entry points.

1// myproject/manifest.json
2{
3  "manifest_version": 2,
4  "version": "0.1",
5  "name": "myextension",
6  "author": "Cezar Augusto",
7  "background": {
8    "scripts": ["background1.js", "background2.js"]
9  }
10}

1// myproject/webpack.config.js
2const path = require('path')
3const ScriptsPlugin = require('webpack-browser-extension-scripts').default
4
5const manifestPath = path.join(__dirname, 'manifest.json')
6const outputPath = path.resolve(__dirname, './dist')
7
8module.exports = {
9  mode: 'development',
10  entry: {},
11  output: {
12    path: outputPath,
13    clean: true
14  },
15  plugins: [
16    new ScriptsPlugin({
17      manifestPath
18    })
19  ]
20}

Output:

- myproject/
  - background/index.js

License

MIT (c) Cezar Augusto.