How to test a React Chrome Extension?

Question

So I'm developing a chrome extension with React. Everything works fine, but every time a change is made, I have to rebuild the extension with:

npm run build

...and then go back into my browser and load the extension with the build. This works fine, as aforementioned, but it's time consuming, and I feel that there's a better way.

I can't test in-browser because I'm using Chrome APIs (storage sync, etc.)

Is there any other way to test? Or do I have to build every time?

Answer 1

Use rollup-plugin-chrome-extension.

npm init vite@latest
npm i rollup-plugin-chrome-extension@beta -D

Update these files

// vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { chromeExtension } from "rollup-plugin-chrome-extension";
import manifest from './manifest.json'

export default defineConfig({
  plugins: [react(), chromeExtension({ manifest })],
});

// manifest.json
{
  "manifest_version": 3,
  "name": "Rpce React Vite Example",
  "version": "1.0.0",
  "action": { "default_popup": "index.html" }
}

Then run npm run dev

Go to chrome://extensions in your browser and drag the dist folder from your project into the window. Start developing with hot reloading.