Registry / devops / vite-plugin-crx-hot-reload

vite-plugin-crx-hot-reload

library1.0.4jsnpmunverified

A Vite plugin for hot-reloading Chrome extensions during development. Current stable version is 1.0.4, released on an as-needed cadence. It establishes a WebSocket connection to notify the extension to reload when file changes are detected, similar to HMR for web apps. Unlike generic HMR plugins, it specifically handles extension manifests and content scripts. Requires setting `build.emptyOutDir` to `false` and providing a manifest file path. Lightweight alternative to manual extension reloading or using browser-specific tools.

devops

npm install vite-plugin-crx-hot-reload

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-CRX-HO

vite-plugin-crx-hot-reload

devopsjavascriptv1.0.4

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.

crxHotReload

✓ import crxHotReload from 'vite-plugin-crx-hot-reload'

✗ const crxHotReload = require('vite-plugin-crx-hot-reload')

ESM-only; no CommonJS export

Plugin

✓ import type { Plugin } from 'vite'

✗ import { Plugin } from 'vite-plugin-crx-hot-reload'

Type is imported from Vite, not this plugin

ViteConfig

✓ import { defineConfig, type UserConfig } from 'vite'

✗ import { defineConfig, UserConfig } from 'vite-plugin-crx-hot-reload'

Configuration types are from Vite

Basic setup: import the plugin, provide manifest path, and disable emptyOutDir for development.

import crxHotReload from 'vite-plugin-crx-hot-reload'; import { defineConfig } from 'vite'; export default defineConfig({ plugins: [crxHotReload({ input: './src/manifest.json' })], build: { emptyOutDir: false }, });

Debug

Known issues

gotchaMust set `build.emptyOutDir` to `false` in vite config, otherwise the build output will be cleared on each change, breaking the extension.

fix

Add `build: { emptyOutDir: false }` to your Vite config.

affects: >=1.0.0

gotchaAfter starting the project, content_scripts changes may not auto-refresh; a manual page refresh might be needed initially.

fix

Refresh the extension page manually after the first change to content_scripts.

affects: >=1.0.0

gotchaThe plugin uses WebSocket default port 8181; conflicts with other services may cause connection failures.

fix

Change the port using `crxHotReload({ port: 8182, input: '...' })`.

affects: >=1.0.0

gotchaOnly works with Vite-based extension projects; not compatible with webpack or other bundlers.

fix

Use Vite as your build tool.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'vite-plugin-crx-hot-reload'

Package not installed or import path incorrect.

fix

Run `pnpm add -D vite-plugin-crx-hot-reload` and ensure import is as shown.

Uncaught (in promise) WebSocket connection to 'ws://localhost:8181/' failed

Port conflict or WebSocket server not started due to missing plugin or config.

fix

Verify plugin is added to Vite config and port is available. Try changing port via options.

Require is not defined in ES module scope

Using CommonJS require() instead of ESM import.

fix

Replace `const crxHotReload = require(...)` with `import crxHotReload from 'vite-plugin-crx-hot-reload'`.

Upgrade

Version history

1.0.4latest on npm

Audit

Dependencies

viteoptionalpeer dependency; plugin extends Vite build process

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/Jervis2049/vite-plugin-crx-hot-reload ↗

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