如何测试 React Chrome 扩展？

Question

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

npm run build

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

我无法在浏览器中测试，因为我使用的是 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

Go 到浏览器中的chrome://extensions并将dist文件夹从您的项目拖到 window 中。开始使用热重载进行开发。