Registry / devops / hot-reload-extension-vite

hot-reload-extension-vite

library1.1.0jsnpmunverified

A Vite plugin that enables hot reload for Chrome extensions built on Manifest V3. Version 1.1.0, maintained via single author on GitHub. Releases are occasional. Key differentiator: simple setup with WebSocket-based reload for background scripts and optional side panel, using Vite's build watch mode. No HMR, only full reload on file changes. Requires NODE_ENV=development.

devops

npm install hot-reload-extension-vite

package ↗

INSTALL

IMPORT

SIG · HOT-RELOAD-EXTENSI

hot-reload-extension-vite

devopsjavascriptv1.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import hotReloadExtension from 'hot-reload-extension-vite'

✗ const hotReloadExtension = require('hot-reload-extension-vite')

ESM-only plugin; CJS require will fail because package is type: module and exports ESM.

SidePanelOptions

✓ import type { SidePanelOptions } from 'hot-reload-extension-vite'

✗ import { SidePanelOptions } from 'hot-reload-extension-vite'

Type import only; runtime import will cause error because SidePanelOptions is a type, not a value.

HotReloadConfig

✓ import type { HotReloadConfig } from 'hot-reload-extension-vite'

✗ import { HotReloadConfig } from 'hot-reload-extension-vite'

Similarly, use type import for config type.

Minimal Vite config for Chrome extension hot reload with background and side panel.

// vite.config.ts import { defineConfig } from 'vite'; import hotReloadExtension from 'hot-reload-extension-vite'; export default defineConfig({ plugins: [ hotReloadExtension({ log: true, backgroundPath: 'src/background.ts', sidePanel: { path: 'src/sidePanel.ts', htmlPath: 'public/sidePanel.html' } }) ], build: { rollupOptions: { input: { background: 'src/background.ts', sidePanel: 'src/sidePanel.html' } } } }); // Run build with watch mode: // NODE_ENV=development npx vite build --watch

Debug

Known issues

breakingPlugin requires NODE_ENV=development to trigger reload. In production, plugin is no-op.

fix

Set NODE_ENV=development environment variable when running vite build --watch.

affects: >=0.0.0

gotchaPlugin uses WebSocket on port 8080 by default. If another service uses that port, set HOT_RELOAD_EXTENSION_VITE_PORT environment variable.

fix

export HOT_RELOAD_EXTENSION_VITE_PORT=9090
Then run vite build --watch.

affects: >=0.0.0

gotchabackgroundPath option is relative to project root, not src directory. Plugin expects a TypeScript file.

fix

Use full relative path from project root, e.g., 'src/background.ts'.

affects: >=0.0.0

deprecatedsidePanel options changed in v1.0.14: 'scriptPath' renamed to 'path', 'htmlPath' remains same.

fix

Update sidePanel config: use 'path' instead of 'scriptPath'.

affects: <1.0.14

Errors

Common errors & fixes

Error: Cannot find module 'hot-reload-extension-vite'

Package not installed as dev dependency.

fix

npm install hot-reload-extension-vite -D

TypeError: hotReloadExtension is not a function

Using CommonJS require() instead of ESM import.

fix

Change require('hot-reload-extension-vite') to import hotReloadExtension from 'hot-reload-extension-vite' in a module context.

Error: 'backgroundPath' is required

Missing backgroundPath option in plugin configuration.

fix

Add backgroundPath pointing to your background script, e.g., backgroundPath: 'src/background.ts'.

WebSocket connection to 'ws://localhost:8080/' failed

Port 8080 already in use or WebSocket server not started (NODE_ENV not development).

fix

Set NODE_ENV=development and/or change port via HOT_RELOAD_EXTENSION_VITE_PORT env variable.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

viterequiredPeer dependency required as a Vite plugin

Agent activity

4 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/hot-reload-extension-vite ↗