如何快速使用Vue3在electron项目开发chrome Devtools插件

1、建立Vue项目

为了方便快速建立项目,我已经写好脚手架,直接clone项目,快速开发

点击快速进入源代码

拉取代码

shell 复制代码
git clone https://github.com/xygengcn/electron-devtool.git

安装依赖

shell 复制代码
yarn

运行项目

shell 复制代码
yarn dev

打包项目

shell 复制代码
yarn build

2、安装插件在chrome调试

打开chrome://extensions/,打开开发者模式,直接把打包产物拖到窗口即可

3、如何在Electron安装插件

具体代码进入源代码

js 复制代码
// 安装插件函数
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函数(具体代码进入源代码

js 复制代码
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的注册的方法

js 复制代码
 window.$devtoolsPanelHandle.invoke("add", { a: 1, b: 2 }, (data) => {
    console.log("结果是:" + data);
    result.value = data;
});
相关推荐
浪裡遊37 分钟前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef062 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder4 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句5 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom5 小时前
JavaScript reduce()函数详解
javascript
小飞悟5 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子5 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手5 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅6 小时前
JavaScript 中你不知道的按位运算
前端·javascript
tianchang6 小时前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范