Hot Reload Chrome Extension - Vite Plugin

This Vite plugin offers an effortless solution for seamlessly refreshing a Chrome extension built on Manifest V3. With this plugin, you can streamline the development and testing process, ensuring your extension stays up-to-date without manual intervention.

Inspired by stackoverflow answer and other similar repos.

Screen.Recording.2023-10-28.at.14.06.31.mov

Usage

Install

$ npm i hot-reload-extension-vite -D

configuration

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

export default {
  plugins: [
    hotReloadExtension({
      log: true,
      backgroundPath: 'path/to/background' // src/pages/background/index.ts
    })
  ]
};

Then run

$ NODE_ENV=development vite build --watch  // Override NODE_ENV

Extension will only reload when NODE_ENV is 'development'

Example Project

Link

Options

Options	Type	Description
log	boolean (optional)	Logs error and info.
backgroundPath	string (required)	Path to background service worker file.

Env variables

Variable	default	Description
HOT_RELOAD_EXTENSION_VITE_PORT	8080	Web socket port

License

MIT