reactjs - วิธีทดสอบ React Chrome Extension?

ดังนั้นฉันกำลังพัฒนาส่วนขยายของ Chrome ด้วย React ทุกอย่างทำงานได้ดี แต่ทุกครั้งที่มีการเปลี่ยนแปลง ฉันต้องสร้างส่วนขยายใหม่ด้วย:

npm run build

...แล้วกลับไปที่เบราว์เซอร์ของฉันและโหลดส่วนขยายด้วยการสร้างเวอร์ชัน นี่ใช้ได้ดีตามที่กล่าวไว้ก่อนหน้านี้ แต่ก็ใช้เวลานาน และฉันรู้สึกว่ายังมีวิธีที่ดีกว่านี้

ฉันไม่สามารถทดสอบในเบราว์เซอร์ได้เพราะฉันกำลังใช้ Chrome APIs (การซิงค์การจัดเก็บ ฯลฯ)

มีวิธีทดสอบแบบอื่นไหม หรือฉันต้องสร้างทุกครั้ง?

คำตอบ #1

ใช้ rollup-plugin-chrome-extension

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

อัปเดตไฟล์เหล่านี้

// 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" }
}

จากนั้นรัน npm run dev

ไปที่ chrome://extensions ในเบราว์เซอร์ของคุณและลากโฟลเดอร์ dist จากโปรเจกต์ของคุณไปยังหน้าต่างนั้น เริ่มพัฒนาด้วยการรีโหลดแบบร้อน