# @webextension-toolbox/webpack-webextension-plugin

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

Latest version **3.3.1** (published 2024-01-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @webextension-toolbox/webpack-webextension-plugin
pnpm add @webextension-toolbox/webpack-webextension-plugin
yarn add @webextension-toolbox/webpack-webextension-plugin
bun add @webextension-toolbox/webpack-webextension-plugin
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.3.1 |
| Published | 2024-01-08 |
| First published | 2022-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=18.0.0 |
| Dependencies | 6 |
| Unpacked size | 338.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 82 |
| Author | Henrik Wenz |
| Maintainers | tm1000, balcsida, handtrix |

## Links

- npm: https://www.npmjs.com/package/@webextension-toolbox/webpack-webextension-plugin
- Repository: https://github.com/webextension-toolbox/webpack-webextension-plugin
- Homepage: https://github.com/webextension-toolbox/webpack-webextension-plugin#readme
- Issues: https://github.com/webextension-toolbox/webpack-webextension-plugin/issues
- npm.io page: https://npm.io/package/@webextension-toolbox/webpack-webextension-plugin

## Dependencies (6)

- [ws](https://npm.io/package/ws.md) ^8.14.2
- [ajv](https://npm.io/package/ajv.md) ^6.12.6
- [mustache](https://npm.io/package/mustache.md) ^4.2.0
- [@types/chrome](https://npm.io/package/@types/chrome.md) ^0.0.253
- [webpack-sources](https://npm.io/package/webpack-sources.md) ^3.2.3
- [@types/firefox-webext-browser](https://npm.io/package/@types/firefox-webext-browser.md) ^120.0.0

## Recent versions

- 3.3.1 (latest) — 2024-01-08
- 3.2.1 — 2023-10-28
- 3.1.0 — 2023-06-13
- 3.0.0 — 2023-03-13
- 2.1.3 — 2022-06-03
- 2.1.2 — 2022-04-19
- 2.1.1 — 2022-04-14
- 2.1.0 — 2022-04-14
- 2.0.4 — 2022-04-11
- 2.0.3 — 2022-04-06
- 2.0.2 — 2022-04-06
- 2.0.1 — 2022-04-06
- 2.0.0 — 2022-04-05

## README

[<img align="right" src="./.github/assets/icon.svg?sanitize=true">](https://www.npmjs.com/package/webpack-webextension-plugin)

# Webpack WebExtension Plugin

[![npm package](https://badge.fury.io/js/@webextension-toolbox%2Fwebpack-webextension-plugin.svg)](https://www.npmjs.com/package/webpack-webextension-plugin)
[![license](https://img.shields.io/npm/l/@webextension-toolbox%2Fwebpack-webextension-plugin.svg)](https://github.com/webextension-toolbox/webpack-webextension-plugin/blob/main/LICENSE)

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

If you are looking for a simple CLI tool that utilizes this checkout [https://github.com/webextension-toolbox/webextension-toolbox](https://github.com/webextension-toolbox/webextension-toolbox)

## What does it do?

- Autoreload extensions via websockets
- Use vendor prefixes in manifest properties
- ENV replacement in manifest values
- Validates some `manifest.json` fields

## Install

```bash
$ npm i @webextension-toolbox/webextension-toolbox
```

## Usage

```js
import WebextensionPlugin from "@webextension-toolbox/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`, `safari`

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.

###### skipManifestValidation

Type: `Boolean`
Default: false

Skip Manifest Validation

## FAQ

### How does smart autoreload work?

We create/extend a background page or service worker in the extension with a websockets client if `autoreload` is true the webpack is `watch`ing, 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.

```js
{
  "__chrome__name": "SuperChrome",
  "__firefox__name": "SuperFox",
  "__edge__name": "SuperEdge",
  "__opera__name": "SuperOpera",
  "__safari__name": "SuperSafari"
}
```

if the vendor is `chrome` this compiles to:

```js
{
  "name": "SuperChrome",
}
```

---

Add keys to multiple vendors by seperating them with | in the prefix

```
{
  __chrome|opera__name: "SuperBlink"
}
```

if the vendor is `chrome` or `opera`, this compiles to:

```
{
  "name": "SuperBlink"
}
```

### Environment Variable Replacement in Manifest

```js
{
  "name": "__MY_ENV_VARIABLE__",
}
```

Would be replaced with the value of `process.env.MY_ENV_VARIABLE`

### Why are you not using mozillas [web-ext](https://github.com/mozilla/web-ext) package?

- `webpack-webextension-plugin` should work for every browser in the same way.
- `web-ext` only works with Chrome and Firefox. You should definitely still check it out.

## Links

- [generator-web-extension](https://github.com/webextension-toolbox/generator-web-extension)
- [webextension-toolbox](https://github.com/webextension-toolbox/webextension-toolbox)

## License

Copyright 2018-2022 Henrik Wenz

This project is free software released under the MIT license.

---
_Source: https://npm.io/package/@webextension-toolbox/webpack-webextension-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._