Vite Plugin Web Extension Hot Reload

A Vite plugin for developing web extensions with hot reload using web-ext. This plugin ensures that your web extension is reloaded automatically in the browser whenever you make changes, making the development process more efficient and convenient.

Installation

To install the plugin, use npm:

npm install @create-web-ext/vite-web-extension-hot-reload --save-dev

Usage

To use the plugin, you need to configure your vite.config.js file and set up your development command to use vite build --watch.

Step 1: Update vite.config.js

import { defineConfig } from "vite";
import webExtPlugin from "vite-plugin-web-extension-hot-reload";

export default defineConfig({
  plugins: [
    webExtPlugin({
      sourceDir: "dist", // Adjust the sourceDir if necessary
    }),
  ],
});

Step 2: Update package.json Scripts

Add or update the dev script in your package.json to use vite build --watch:

{
  "scripts": {
    "dev": "vite build --watch"
  }
}

Step 3: Run the Development Command

To build and watch for changes, use the following command:

npm run dev

This will build your project and watch for changes. If changes are detected, it will rebuild the project and use web-ext to reload the extension in the browser.

Options

The plugin accepts an optional configuration object with the following properties:

• sourceDir (string): The source directory for the web extension. Default is dist.

Example Project Setup

Here is a quick example of what the setup might look like in a Vite project:

Directory Structure

my-vite-project/
├── node_modules/
├── public/
├── src/
├── dist/
├── index.html
├── package.json
└── vite.config.js

package.json

{
  "name": "my-vite-project",
  "version": "1.0.0",
  "description": "A Vite project using vite-plugin-web-extension-hot-reload",
  "scripts": {
    "dev": "vite build --watch",
    "build": "vite build"
  },
  "dependencies": {
    "vite-plugin-web-extension-hot-reload": "^1.0.0"
  }
}

vite.config.js

import { defineConfig } from "vite";
import webExtPlugin from "vite-plugin-web-extension-hot-reload";

export default defineConfig({
  plugins: [
    webExtPlugin({
      sourceDir: "dist", // Adjust the sourceDir if necessary
    }),
  ],
});

Why This Plugin?

While there are other plugins like vite-plugin-web-extension that provide a more abstracted solution, this plugin aims to be simpler and more focused. It allows you to handle the manifest and other configurations yourself, providing more control over your project. This plugin specifically handles hot reloading of your web extension, making it a straightforward and flexible tool for developers who prefer more granular control over their build process.

License

This project is licensed under the MIT License.