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.

// webpack.config.js

const ScriptsPlugin = require('webpack-browser-extension-scripts')

module.exports = {
  // ...other webpack config,
  plugins: [
    new ScriptsPlugin({
      manifestPath: '<path-to-my-manifest-json-file>',
      exclude: ['<path_to_excluded_folder>']
    })
  ]
}

What this plugin do?

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

// myproject/manifest.json
{
  "manifest_version": 2,
  "version": "0.1",
  "name": "myextension",
  "author": "Cezar Augusto",
  "background": {
    "scripts": ["background1.js", "background2.js"]
  }
}

// myproject/webpack.config.js
const path = require('path')
const ScriptsPlugin = require('webpack-browser-extension-scripts').default

const manifestPath = path.join(__dirname, 'manifest.json')
const outputPath = path.resolve(__dirname, './dist')

module.exports = {
  mode: 'development',
  entry: {},
  output: {
    path: outputPath,
    clean: true
  },
  plugins: [
    new ScriptsPlugin({
      manifestPath
    })
  ]
}

Output:

- myproject/
  - background/index.js

License

MIT (c) Cezar Augusto.