如何测试一个 React Chrome 扩展？

【问题标题】：How to test a React Chrome Extension?如何测试一个 React Chrome 扩展？
【发布时间】：2021-07-24 07:31:10
【问题描述】：

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

npm run build

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

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

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

【问题讨论】：

您找到解决方案了吗？
很遗憾没有，仍然使用npm构建然后查看。

标签： reactjs typescript google-chrome google-chrome-extension

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

【讨论】：