Simple vite plugin to reload the chrome extension.
npm install hot-reload-extension-vite> 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.
https://github.com/isaurssaurav/hot-reload-extension-vite-plugin/assets/13806915/06228a73-4ae4-404f-8bee-717b0cae6eef
``bash`
$ npm i hot-reload-extension-vite -D
`js
import hotReloadExtension from 'hot-reload-extension-vite';
export default {
plugins: [
hotReloadExtension({
log: true,
backgroundPath: 'path/to/background' // src/pages/background/index.ts
})
]
};
`
#### Side Panel Configuration (v1.0.14+)
Starting from v1.0.14, you can enable Side Panel hot reload support by passing the sidePanel option to the plugin.
`js
import hotReloadExtension from 'hot-reload-extension-vite';
export default {
plugins: [
hotReloadExtension({
log: true,
backgroundPath: 'path/to/background.ts',
sidePanel: {
scriptPath: 'path/to/sidePanel.ts',
htmlPath: 'path/to/sidePanel.html' // Optional
}
})
]
};
`
> Checkout example project for a complete implementation.
Then run
`bash`
$ NODE_ENV=development vite build --watch // Override NODE_ENV
> Extension will only reload when NODE_ENV is 'development'
| Options | Type | Description |
| -------------- | --------------------------- | --------------------------------------- |
| backgroundPath | string (required) | Path to background service worker file. |
| log | boolean (optional) | Logs error and info. |
| sidePanel | SidePanelOptions (Optional) | Path to sidePanel script and html file. |
`ts`
type SidePanelOptions = {
path: string;
htmlPath: string;
};
| Variable | default | Description |
| -------------------------------- | ------- | --------------- |
| HOT_RELOAD_EXTENSION_VITE_PORT` | 8080 | Web socket port |
MIT