{"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,"search_vec":"'1.1.0':22 'author':26 'background':42 'base':39 'build':51 'built':17 'chang':61 'chrome':3,15,68 'develop':65 'differenti':33 'enabl':11 'env':64 'extens':4,16,69 'file':60 'full':57 'github':28 'hmr':55 'hot':1,12 'javascript':66 'key':32 'maintain':23 'manifest':19 'mode':53 'node':63 'occasion':31 'option':45 'panel':47 'plugin':6,9,71 'releas':29 'reload':2,13,40,58,70 'requir':62 'script':43 'setup':35 'side':46 'simpl':34 'singl':25 'typescript':72 'use':48 'v3':20 'version':21 'via':24 'vite':5,8,49,67 'watch':52 'websocket':38 'websocket-bas':37","created_at":"2026-04-27T16:59:55.970060+00:00","updated_at":"2026-04-27T16:59:55.970060+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/hot-reload-extension-vite","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}