如何测试 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 文件夹从您的项目拖到 window 中。开始使用热重载进行开发。

如何测试 React Chrome 扩展？

How to test a React Chrome Extension?

google-chrome

google-chrome-extension

typescript

reactjs