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

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函数(具体代码进入源代码)

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的注册的方法

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

你可能感兴趣的:(electron,chrome,devtools,javascript,vue)