Vite-plugin-extension-reloader NPM

Extension Development - Auto Reloader

Extension auto reloader is an extension and npm package combination that automatically reloads your unpacked chrome extension when you save changes to your files during development.

It requires a websocket connection to do so, which you setup with this npm package.

Automatic extension reloading

Simple Example - Changes to a ts content script reloads and re-runs the given extension

content script example

Project Structure and running

In your "src" directory make a new subfolder "extension" and put your extension files in there. Your manifest.json, serviceWorker.ts and contentScript/s.ts files should be in there and other static assets like icons. Yes we are using typescript.

src
├── extension
    ├── manifest.json
    ├── serviceWorker.ts
    ├── contentScript.ts
    ├── icons
        ├── icon16.png
        ├── icon32.png
        ├── icon48.png
        ├── icon128.png

Now add a new script to your package json to run your Vite Build step in watch mode. You cannot make an extension work in dev mode, as the unpacked extension requires generated files. Hence we use build mode:

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

In your vite.config.ts file, add the following plugins (from this package) and modify the build step to include your service worker (if applicable) and content scripts (if applicable):

...
import {
  extensionReloaderBuildStep,
  extensionReloaderWatchExternal,
  extensionReloaderWebSocket,
} from "vite-plugin-extension-reloader";
import copy from "rollup-plugin-copy";  // Highly recommended for copying static assets like icons
...

export default defineConfig({
 plugins: [
    // Your existing Vite plugins
    ...
    extensionReloaderBuildStep("src/extension/manifest.json"),
    extensionReloaderWatchExternal("src/extension/**/*"),  // This is optional, but will watch for changes in your manifest
    extensionReloaderWebSocket(),
    ...
    copy({
      targets: [
        // Use glob patterns to match static files to copy
        {
          src: "src/extension/*",
          dest: "dist",
          ignore: ["**/*.js", "**/*.ts", "**/manifest.json"],
        },
      ],
      copyOnce: false,
      flatten: true,
    }),
  ],
  // Your existing config
  ...
  // Build step modifications
  build: {
    emptyOutDir: true,
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, "index.html"),
        // Do this for each content script you have
        contentScript: path.resolve(
          __dirname,
          "src/extension/contentScript.ts"
        ),
        // Do this for your service worker
        serviceWorker: path.resolve(
          __dirname,
          "src/extension/serviceWorker.ts"
        ),
      },
      output: {
        entryFileNames: "[name].js",
        chunkFileNames: "[name].js",
        assetFileNames: "[name].[ext]",
      },
    },
  },
});

Now once you have everything setup, you should run the included websocket server. This is so we can automatically reload your extension. Run and note the port number:

# defaults to port 3001
npx wss-ext-reloader

# Or, define your own port eg "5000":
npx wss-ext-reloader --port <XXXXX>

Now you are ready to develop your extension! Run the build:watch script and start developing. When you save changes to your files, the websocket server will automatically reload your extension in the browser:

npm run build:watch

To load an unpacked extension in the browser, you must point to a file location for your extension. This will be the "dist" directory which is generated by the build step:

dist
├── manifest.json
├── serviceWorker.js
├── contentScript.js
├── main.js
├── index.html
├── icons
    ├── icon16.png
    ├── icon32.png
    ├── icon48.png
    ├── icon128.png
... others