1、建立Vue项目
为了方便快速建立项目，我已经写好脚手架，直接clone项目，快速开发
点击快速进入源代码
拉取代码
git clone https://github.com/xygengcn/electron-devtool.git
安装依赖
yarn
运行项目
yarn dev
打包项目
yarn build
2、安装插件在chrome调试
打开chrome://extensions/，打开开发者模式，直接把打包产物拖到窗口即可
3、如何在Electron安装插件
具体代码进入源代码
// 安装插件函数
export async function installLocalExtension(path: string): Promise<Electron.Extension> {
return session.defaultSession.loadExtension(path, { allowFileAccess: true });
}
/**
* 安装插件
*/
export async function installDevtoolsExtends() {
const extensionsPath = "插件目录";
installLocalExtension(extensionPath).then((result) => {console.log('[devtools] 插件安装成功', result.name, result.path);})
}
// 在app启动的时候执行
app.on('ready', () => {
// 安装拓展
installDevtoolsExtends();
});
4、electron项目如何和插件通信
主要使用我另外开发的插件chrome-extension-ipc实现通讯
在上述的代码中的script/preload.ts中，此文件的window即时electron项目的window上下文，window可以访问项目的数据，我们可以使用PreloadHandle实现注册，我们注册一个add函数（具体代码进入源代码）文章来源：https://www.toymoban.com/news/detail-737501.html
import { createPreloadHandle } from "chrome-extension-ipc/preload";
console.log("[devtools-preload] start");
// 创建
window.$devtoolsPreloadHandle = createPreloadHandle({ noconsole: false });
// 注册能力
window.$devtoolsPreloadHandle.use("add", ({ a, b }) => {
console.log("接收到插件参数：", { a, b });
return a + b;
});
在插件界面，我们可以使用PanelHandle实现调用electron的注册的方法文章来源地址https://www.toymoban.com/news/detail-737501.html
window.$devtoolsPanelHandle.invoke("add", { a: 1, b: 2 }, (data) => {
console.log("结果是：" + data);
result.value = data;
});
到了这里，关于如何快速使用Vue3在electron项目开发chrome Devtools插件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
