# ws-reload-plugin

> an auto reload webpack plugin for chrome extension developers

Latest version **2.0.0** (published 2025-02-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install ws-reload-plugin
pnpm add ws-reload-plugin
yarn add ws-reload-plugin
bun add ws-reload-plugin
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

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

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2025-02-12 |
| First published | 2023-03-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | xzz2022 |
| Maintainers | xzz2022 |
| Keywords | chrome extension, manifest 3, webpack5, reload |

## Links

- npm: https://www.npmjs.com/package/ws-reload-plugin
- Repository: https://github.com/xzz2021/wsReloadPlugin
- Homepage: https://github.com/xzz2021
- Issues: https://github.com/xzz2021/wsReloadPlugin/issues
- npm.io page: https://npm.io/package/ws-reload-plugin

## Dependencies (1)

- [ws](https://npm.io/package/ws.md) ^8.18.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2025-02-12
- 1.1.2 — 2024-06-13
- 1.1.1 — 2024-04-11
- 1.1.0 — 2023-07-26
- 1.0.9 — 2023-04-10
- 1.0.8 — 2023-04-08
- 1.0.7 — 2023-04-08
- 1.0.6 — 2023-03-20
- 1.0.5 — 2023-03-17
- 1.0.4 — 2023-03-13
- 1.0.3 — 2023-03-11
- 1.0.2 — 2023-03-10
- 1.0.1 — 2023-03-08
- 1.0.0 — 2023-03-08

## README

<!-- ##### wsReloadPlugin [English](https://github.com/xzz2021/wsReloadPlugin/blob/main/README.md) -->

这是一个 webpack 打包工具的 plugin,只有**浏览器插件开发者**用得到,功能类似 webpack 本身就有的 dev-server!

基于 webpack5 和 websocket, 实现浏览器扩展(插件)开发阶段编译完成自动刷新功能!`**此版本为破坏性重构版,不兼容历史版本**`

`安装使用:`

1. 安装

```js
npm install ws-reload-plugin --save-dev
```

2. webpack.config.js 配置文件中引入此模块,必须传入 content 和 background 的编译输出文件名,比如你打包后的文件目录是 dist/content.js 和 dist/service/background.js, 则按下面传参;

```js
const { wsAutoReloadPlugin } = require("ws-reload-plugin");
plugins: [
  new wsAutoReloadPlugin({
    port: 2021, // 选传,  默认2021
    entryFiles: {
      // 必须传参
      content: "./content.js", // content 输出文件path
      background: "./service/background.js", // background 输出文件path
    },
    autoRun: { content: true, background: true }, // 选传, 默认都为true
  }),
];
```

3. ##### 此插件会自动在 content 文件插入 websocket 代码, 创建一个`createWsConnect`函数, background 文件插入监听代码, 创建一个`bgdListenMsg`函数, 默认会直接在顶层调用`

4. 如果你想在 content 里自定义控制创建调用, 比如只想在某些页面挂载,请传入参数 `{autoRun: { content: false}}`, 然后自行调用函数`createWsConnect()`即可

5. 如果你想在 service worker 里自定义控制监听和刷新时机, 请传入参数 `{autoRun: { background: false}}`, 然后添加以下代码到你的自定义逻辑中

```js
//const bgdListenMsg = () => {
//chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message == "compiler") {
  sendResponse("reload successful");
  chrome.tabs.query({ url: sender.url }, ([tab]) => {
    if (tab) {
      chrome.tabs.reload(tab.id);
      chrome.runtime.reload();
    }
  });
}
//  });
//};
```

`实现原理:`

- 1.在 node 环境下创建 websocket 服务端与客户端，每次编译完成后通过 webpack 钩子(hook)发送信息给 content 客户端；(为什么不直接发送给 background？因为 v3 改为 service worker，有自动休眠机制)
- 2.content 客户端收到消息后再发送给 service worker(background)
- 3.service worker 监听命令并执行刷新

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