webpack-ext-reloader-next weekly downloads statistics

<p align="center"> <img src="assets/banner.svg" alt="webpack-ext-reloader-next" width="780" /> </p> <p align="center"> <a href="https://www.npmjs.com/package/webpack-ext-reloader-next"><img src="https://img.shields.io/npm/v/webpack-ext-reloader-next.svg?color=blue" alt="npm version"></a> <a href="https://www.npmjs.com/package/webpack-ext-reloader-next"><img src="https://img.shields.io/npm/dm/webpack-ext-reloader-next.svg" alt="downloads"></a> <a href="https://github.com/graybearo/webpack-ext-reloader-next/actions/workflows/ci.yml"><img src="https://github.com/graybearo/webpack-ext-reloader-next/actions/workflows/ci.yml/badge.svg" alt="CI"></a> <a href="LICENSE"><img src="https://img.shields.io/npm/l/webpack-ext-reloader-next.svg" alt="MIT"></a> </p> <p align="center"> <img src="https://img.shields.io/badge/webpack_5-8DD6F9?logo=webpack&logoColor=000&style=for-the-badge" alt="webpack 5"> <img src="https://img.shields.io/badge/Manifest_V3-4285F4?logo=googlechrome&logoColor=white&style=for-the-badge" alt="Manifest V3"> <img src="https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white&style=for-the-badge" alt="TypeScript"> <img src="https://img.shields.io/badge/Chrome-4285F4?logo=googlechrome&logoColor=white&style=for-the-badge" alt="Chrome"> <img src="https://img.shields.io/badge/Firefox-FF7139?logo=firefoxbrowser&logoColor=white&style=for-the-badge" alt="Firefox"> <img src="https://img.shields.io/badge/Edge-0078D7?logo=microsoftedge&logoColor=white&style=for-the-badge" alt="Edge"> </p> <p align="center"> <strong>Webpack 5 auto-reloader for browser extensions — Manifest V3, zero-config, with CSS hot-swap.</strong><br/> Edit a file → your Chrome / Firefox / Edge extension reloads. CSS edits swap in place without losing scroll or form state. </p> <p align="center"> <img src="assets/demo.gif" alt="webpack-ext-reloader-next in action — edit content script, see changes live" width="900" loading="lazy" /> </p> <p align="center"> <a href="#install">Install</a> · <a href="#quick-start">Quick start</a> · <a href="#what-it-does-on-each-kind-of-change">What changes do what</a> · <a href="#how-it-works">How it works</a> · <a href="#migrating-from-webpack-ext-reloader">Migrate</a> · <a href="#standalone-cli-no-webpack">CLI</a> · <a href="#options">Options</a> · <a href="#troubleshooting">Troubleshooting</a> · <a href="#faq">FAQ</a> </p>

---

Why this exists

The original webpack-ext-reloader is unmaintained and broken on Manifest V3 — its WebSocket dies the moment Chrome puts the service worker to sleep, and it doesn't reconnect. This package is the modern successor.

It picks a port, watches your build, and reloads the extension over a self-healing WebSocket that survives service-worker eviction. No configuration required for the common case.

Install

pnpm add -D webpack-ext-reloader-next
# or: npm i -D webpack-ext-reloader-next
# or: yarn add -D webpack-ext-reloader-next

Quick start

Drop one line into your webpack config. Pick the form that matches your setup:

CommonJS (webpack.config.js or .cjs):

const { ExtReloader } = require("webpack-ext-reloader-next");

module.exports = {
  mode: "development",
  // ...your config
  plugins: [new ExtReloader()],
};

ES Modules (webpack.config.mjs, or with "type": "module"):

import { ExtReloader } from "webpack-ext-reloader-next";

export default {
  mode: "development",
  // ...your config
  plugins: [new ExtReloader()],
};

TypeScript (webpack.config.ts):

import { ExtReloader, type ExtReloaderOptions } from "webpack-ext-reloader-next";
import type { Configuration } from "webpack";

const config: Configuration = {
  mode: "development",
  // ...your config
  plugins: [new ExtReloader()],
};

export default config;

The default export is also available if you prefer import ExtReloader from "webpack-ext-reloader-next".

That's it. The plugin reads your manifest.json, infers your background / content / popup entries, and starts a reload server on a free port starting at 9012. Run webpack --watch, load the unpacked build into Chrome, and edit a file — the extension reloads on its own.

The plugin is automatically a no-op when mode === "production".

Multiple content scripts or pages? Pass entries arrays — the inferred defaults assume one of each:

new ExtReloader({
  entries: {
    contentScript: ["gmail-content", "inbox-content"],
    extensionPage: ["popup", "options"],
  },
});

What it does on each kind of change

You edited	What happens
manifest.json	Full extension reload (chrome.runtime.reload)
_locales/**	Full extension reload
Background service worker	Full extension reload
Popup / options / devtools page	Reload the open extension page only
Content script JS	Reload tabs matching the script's matches
Content script or page CSS	Hot-swap in place — no reload
Static asset (image, etc.)	Nothing (just rebuild)

The CSS hot-swap is the one feature no other webpack extension reloader ships. Edit a stylesheet — whether it's import-ed from JS (cloned <link> with a cache-buster) or declared in manifest.json under content_scripts[].css (re-injected via chrome.scripting.insertCSS) — and your Gmail (or whatever) tab keeps its scroll position and form state.

How it works…