所以我正在使用 React 开发一个 chrome 扩展。一切正常,但每次进行更改时,我都必须使用以下命令重建扩展:
npm run build
...然后返回到我的浏览器并使用构建加载扩展。如上所述,这很好用,但很耗时,我觉得有更好的方法。
我无法在浏览器中测试,因为我使用的是 Chrome API(存储同步等)
还有其他方法可以测试吗?还是每次都必须构建?
最佳答案
使用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
文件夹从您的项目拖到窗口中。通过热重载开始开发。
关于reactjs - 如何测试 React Chrome 扩展?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68507925/