{"id":21446,"library":"hot-reload-extension-vite","title":"Hot Reload Chrome Extension - Vite Plugin","description":"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.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vite","chrome extension","reload","plugin","typescript"],"install":[{"cmd":"npm install hot-reload-extension-vite","lang":"bash","label":"npm"},{"cmd":"yarn add hot-reload-extension-vite","lang":"bash","label":"yarn"},{"cmd":"pnpm add hot-reload-extension-vite","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required as a Vite plugin","package":"vite","optional":false}],"imports":[{"note":"ESM-only plugin; CJS require will fail because package is type: module and exports ESM.","wrong":"const hotReloadExtension = require('hot-reload-extension-vite')","symbol":"default","correct":"import hotReloadExtension from 'hot-reload-extension-vite'"},{"note":"Type import only; runtime import will cause error because SidePanelOptions is a type, not a value.","wrong":"import { SidePanelOptions } from 'hot-reload-extension-vite'","symbol":"SidePanelOptions","correct":"import type { SidePanelOptions } from 'hot-reload-extension-vite'"},{"note":"Similarly, use type import for config type.","wrong":"import { HotReloadConfig } from 'hot-reload-extension-vite'","symbol":"HotReloadConfig","correct":"import type { HotReloadConfig } from 'hot-reload-extension-vite'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport hotReloadExtension from 'hot-reload-extension-vite';\n\nexport default defineConfig({\n  plugins: [\n    hotReloadExtension({\n      log: true,\n      backgroundPath: 'src/background.ts',\n      sidePanel: {\n        path: 'src/sidePanel.ts',\n        htmlPath: 'public/sidePanel.html'\n      }\n    })\n  ],\n  build: {\n    rollupOptions: {\n      input: {\n        background: 'src/background.ts',\n        sidePanel: 'src/sidePanel.html'\n      }\n    }\n  }\n});\n\n// Run build with watch mode:\n// NODE_ENV=development npx vite build --watch","lang":"typescript","description":"Minimal Vite config for Chrome extension hot reload with background and side panel."},"warnings":[{"fix":"Set NODE_ENV=development environment variable when running vite build --watch.","message":"Plugin requires NODE_ENV=development to trigger reload. In production, plugin is no-op.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"export HOT_RELOAD_EXTENSION_VITE_PORT=9090\nThen run vite build --watch.","message":"Plugin uses WebSocket on port 8080 by default. If another service uses that port, set HOT_RELOAD_EXTENSION_VITE_PORT environment variable.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use full relative path from project root, e.g., 'src/background.ts'.","message":"backgroundPath option is relative to project root, not src directory. Plugin expects a TypeScript file.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Update sidePanel config: use 'path' instead of 'scriptPath'.","message":"sidePanel options changed in v1.0.14: 'scriptPath' renamed to 'path', 'htmlPath' remains same.","severity":"deprecated","affected_versions":"<1.0.14"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"npm install hot-reload-extension-vite -D","cause":"Package not installed as dev dependency.","error":"Error: Cannot find module 'hot-reload-extension-vite'"},{"fix":"Change require('hot-reload-extension-vite') to import hotReloadExtension from 'hot-reload-extension-vite' in a module context.","cause":"Using CommonJS require() instead of ESM import.","error":"TypeError: hotReloadExtension is not a function"},{"fix":"Add backgroundPath pointing to your background script, e.g., backgroundPath: 'src/background.ts'.","cause":"Missing backgroundPath option in plugin configuration.","error":"Error: 'backgroundPath' is required"},{"fix":"Set NODE_ENV=development and/or change port via HOT_RELOAD_EXTENSION_VITE_PORT env variable.","cause":"Port 8080 already in use or WebSocket server not started (NODE_ENV not development).","error":"WebSocket connection to 'ws://localhost:8080/' failed"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}