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

1、建立Vue项目

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

点击快速进入源代码

拉取代码

git clone https://github.com/xygengcn/electron-devtool.git
1

安装依赖

yarn
1

运行项目

yarn dev
1

打包项目

yarn build
1

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();
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

4、electron项目如何和插件通信

主要使用我另外开发的插件chrome-extension-ipc实现通讯

在上述的代码中的script/preload.ts中，此文件的window即时electron项目的window上下文，window可以访问项目的数据，我们可以使用PreloadHandle实现注册，我们注册一个add函数（具体代码进入源代码）

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;
});



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在插件界面，我们可以使用PanelHandle实现调用electron的注册的方法

 window.$devtoolsPanelHandle.invoke("add", { a: 1, b: 2 }, (data) => {
    console.log("结果是：" + data);
    result.value = data;
});
1
2
3
4