如何快速使用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;
});
相关推荐
GISer_Jing2 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆2 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding3 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景4 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘4 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾4 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉4 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
乆夨(jiuze)5 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中5 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互