如何快速使用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;
});
相关推荐
鹏多多2 小时前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
uhakadotcom2 小时前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试
Mintopia2 小时前
实时语音转写 + AIGC:Web 端智能交互的技术链路
前端·javascript·aigc
2503_928411562 小时前
9.15 ES6-变量-常量-块级作用域-解构赋值-箭头函数
前端·javascript·es6
Mintopia2 小时前
Next.js 单元测试究竟该选 JTest 还是 Vitest?
前端·javascript·next.js
遂心_2 小时前
深入浅出 querySelector:现代DOM选择器的终极指南
前端·javascript·react.js
遂心_2 小时前
DOM元素内容修改全攻略:从innerHTML到现代API的最佳实践
前端·javascript·react.js
Aomnitrix2 小时前
知识管理新范式——cpolar+Wiki.js打造企业级分布式知识库
开发语言·javascript·分布式
_AaronWong2 小时前
实现 Electron 资源下载与更新:实时进度监控
前端·electron
森林的尽头是阳光3 小时前
vue防抖节流,全局定义,使用
前端·javascript·vue.js