reactjs - 如何测试 React Chrome 扩展？

Question

所以我正在使用 React 开发一个 chrome 扩展。一切正常，但每次进行更改时，我都必须使用以下命令重建扩展:

npm run build

...然后返回到我的浏览器并使用构建加载扩展。如上所述，这很好用，但很耗时，我觉得有更好的方法。

我无法在浏览器中测试，因为我使用的是 Chrome API(存储同步等)

还有其他方法可以测试吗？还是每次都必须构建？

Answer 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 文件夹从您的项目拖到窗口中。通过热重载开始开发。