{"id":22624,"library":"vite-plugin-crx-hot-reload","title":"vite-plugin-crx-hot-reload","description":"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.","status":"active","version":"1.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/Jervis2049/vite-plugin-crx-hot-reload","tags":["javascript","vite","plugin"],"install":[{"cmd":"npm install vite-plugin-crx-hot-reload","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-crx-hot-reload","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-crx-hot-reload","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; plugin extends Vite build process","package":"vite","optional":true}],"imports":[{"note":"ESM-only; no CommonJS export","wrong":"const crxHotReload = require('vite-plugin-crx-hot-reload')","symbol":"crxHotReload","correct":"import crxHotReload from 'vite-plugin-crx-hot-reload'"},{"note":"Type is imported from Vite, not this plugin","wrong":"import { Plugin } from 'vite-plugin-crx-hot-reload'","symbol":"Plugin","correct":"import type { Plugin } from 'vite'"},{"note":"Configuration types are from Vite","wrong":"import { defineConfig, UserConfig } from 'vite-plugin-crx-hot-reload'","symbol":"ViteConfig","correct":"import { defineConfig, type UserConfig } from 'vite'"}],"quickstart":{"code":"import crxHotReload from 'vite-plugin-crx-hot-reload';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n  plugins: [crxHotReload({ input: './src/manifest.json' })],\n  build: { emptyOutDir: false },\n});","lang":"javascript","description":"Basic setup: import the plugin, provide manifest path, and disable emptyOutDir for development."},"warnings":[{"fix":"Add `build: { emptyOutDir: false }` to your Vite config.","message":"Must set `build.emptyOutDir` to `false` in vite config, otherwise the build output will be cleared on each change, breaking the extension.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Refresh the extension page manually after the first change to content_scripts.","message":"After starting the project, content_scripts changes may not auto-refresh; a manual page refresh might be needed initially.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Change the port using `crxHotReload({ port: 8182, input: '...' })`.","message":"The plugin uses WebSocket default port 8181; conflicts with other services may cause connection failures.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use Vite as your build tool.","message":"Only works with Vite-based extension projects; not compatible with webpack or other bundlers.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `pnpm add -D vite-plugin-crx-hot-reload` and ensure import is as shown.","cause":"Package not installed or import path incorrect.","error":"Error: Cannot find module 'vite-plugin-crx-hot-reload'"},{"fix":"Verify plugin is added to Vite config and port is available. Try changing port via options.","cause":"Port conflict or WebSocket server not started due to missing plugin or config.","error":"Uncaught (in promise) WebSocket connection to 'ws://localhost:8181/' failed"},{"fix":"Replace `const crxHotReload = require(...)` with `import crxHotReload from 'vite-plugin-crx-hot-reload'`.","cause":"Using CommonJS require() instead of ESM import.","error":"Require is not defined in ES module scope"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}