/webpack-webextension-plugin

Webpack plugin that compiles web-extension manifest.json files and adds smart auto reload

Primary LanguageJavaScriptOtherNOASSERTION

webpack-webextension-plugin

npm package build status dependencies JavaScript Style Guide license

Webpack plugin that compiles web-extension manifest.json files and adds smart auto reload.

What does it do?

  • Autoreload extensions via websockets
  • Use vendor prefixes in manifest properties
  • Validates some manifest.json fields

Install

$ npm i webpack-webextension-plugin

Usage

const WebextensionPlugin = require('webpack-webextension-plugin')

const config = {
  plugins: [
    new WebextensionPlugin({
      vendor: 'chrome'
    })
  ]
}

API

new WebextensionPlugin([options])

Add result to webpack plugins to initialize.

options

Type: Object

Any of the options below.

vendor

Type: String
Default: chrome
Any of: chrome, opera, firefox, edge

Used for vendor prefixing in the manifest.json. More infos regarding this can be found below.

port

Type: Integer
Default: 35729

Specify the listening port for the webstocket development server.

autoreload

Type: Boolean
Default: true

Enables auto reload. If not specified will be enabled when using webpacks watch mode.

quiet

Type: Boolean
Default: false

Disable plugin logging.

reconnectTime

Type: Integer
Default: 3000

Specify the reconnect time to the development server from the extension side.

manifestDefaults

Type: Object
Default: {}

Allows you to define defaults for the manifest.json file.

FAQ

How does smart autoreload work?

We create/extend a background page in the extension with a websockets client, that connects to our custom websocket server. As soon as a specific files changes the client checks how to reload the extension:

  • if manifest.json change → full reload
  • if manifest.json dependencies change → full reload
  • if _locales change → full reload
  • else reload current tab & all extension views

What are vendor prefixed manifest keys?

Vendor prefixed manifest keys allow you to write one manifest.json for multible vendors.

{
  "__chrome__name": "SuperChrome",
  "__firefox__name": "SuperFox",
  "__edge__name": "SuperEdge",
  "__opera__name": "SuperOpera"
}

if the vendor is chrome this compiles to:

{
  "name": "SuperChrome",
}

Why are you not using mozillas web-ext package?

  • webpack-webextension-plugin should work for every browser in the same way.
  • web-ext only works for firefox. Nevertheless if your primary browser is firefox, you should definetly check it out.

Links

License

Copyright 2018 Henrik Wenz

This project is free software released under the MIT license.