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?
Userollup-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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.