如何快速使用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;
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/128849.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CentOS 搭建 Hadoop3 高可用集群

Hadoop FullyDistributed Mode 完全分布式 spark101spark102spark103192.168.171.101192.168.171.102192.168.171.103namenodenamenodejournalnodejournalnodejournalnodedatanodedatanodedatanodenodemanagernodemanagernodemanagerrecource managerrecource managerjob hist…

【Spring Boot】发送邮件功能

发送邮件功能 一.pom.xml文件添加邮件依赖二.发送邮件信息&#xff08;1&#xff09;固定配置在application.yml&#xff08;2&#xff09;发送邮箱配成活&#xff08;3&#xff09;底层发送邮件方法&#xff08;4&#xff09;QQ邮箱开通smtp服务&#xff08;5&#xff09;网易…

LeetCode每日一题——2103. Rings and Rods

文章目录 一、题目二、题解 一、题目 There are n rings and each ring is either red, green, or blue. The rings are distributed across ten rods labeled from 0 to 9. You are given a string rings of length 2n that describes the n rings that are placed onto the…

低代码平台如火如荼,告诉我它具体能做什么?

目录 一、前言 二、低代码平台 三、低代码平台的优劣 四、低代码能解决哪些问题&#xff1f; 五、好用且强大的低代码平台 六、结语 一、前言 目前低代码平台如火如荼。这一新兴技术为企业提供了一种高效、灵活、快速开发应用程序的方法&#xff0c;并在短时间内取得了巨大成功…

解决安装win11 23H2版本提示“此版本的windows不支持该处理器”

解决安装win11 23H2版本提示“此版本的windows不支持该处理器”的问题 按Win R 运行 regedit&#xff0c;打开注册表编辑器&#xff0c;定位到&#xff1a;计算机\HKEY_LOCAL_MACHINE\SYSTEM\Setup\MoSetup在该项下新建一个DWORD&#xff08;32位&#xff09;值&#xff0c;名…

如何使用 promise 和async、await 结合处理异步中的同步请求

文章目录 需求分析 需求 需求&#xff1a;让代码执行完循环A再进入代码B进行执行 分析 概念&#xff1a; 当我们谈论同步&#xff08;Synchronous&#xff09;和异步&#xff08;Asynchronous&#xff09;时&#xff0c;可以将其简单地理解为不同的任务处理方式。 同步操作…

体验SOLIDWORKS钣金切口工具增强 硕迪科技

在工业生产制造中&#xff0c;钣金加工是一种常用的加工方式&#xff0c;在SOLIDWORKS2024新版本中&#xff0c;钣金切口工具再次增强了&#xff0c;从SOLIDWORKS 2024 开始&#xff0c; 您可以使用切口工具在空心或薄壁圆柱体和圆锥体中生成切口。 只需在现有空心或薄壁圆柱体…

Vue监听事件

一、问题场景 项目有个需求&#xff0c;在登录页面&#xff0c;输入好账号密码后&#xff0c;直接可以点击回车就能够登录&#xff0c;效果和点击登录按钮一样&#xff0c;登录页面源码如下 <template><body id"poster"><el-form class"login-…

基于ThinkPHP+MySQL实现的通用的PHP网站后台管理系统

caozha-admin 后台管理框架 1.8.3 caozha-admin是一个通用的PHP网站后台管理框架&#xff0c;基于开源的ThinkPHP开发&#xff0c;特点&#xff1a;易上手&#xff0c;零门槛&#xff0c;界面清爽极简&#xff0c;极便于二次开发。 基础功能 1、系统设置 2、管理员管理 3、…

金蝶云星空任意文件上传漏洞复现(0day)

0x01 产品简介 金蝶云星空是一款云端企业资源管理&#xff08;ERP&#xff09;软件&#xff0c;为企业提供财务管理、供应链管理以及业务流程管理等一体化解决方案。金蝶云星空聚焦多组织&#xff0c;多利润中心的大中型企业&#xff0c;以 “开放、标准、社交”三大特性为数字…

大数据与健康:技术助力医疗卫生事业腾飞

大数据与健康&#xff1a;技术助力医疗卫生事业腾飞 随着科技的飞速发展&#xff0c;大数据技术已经渗透到我们生活的方方面面&#xff0c;包括医疗卫生领域。本文将对大数据在健康医疗领域的应用进行分析&#xff0c;并通过数据图表展示其发展趋势和前景。 一、背景介绍 近…

YOLOV8-gradcam 热力图可视化 即插即用 不需要对源码做任何修改!

YOLOV8 GradCam 热力图可视化. 本文给大家带来yolov8-gradcam热力图可视化&#xff0c;这个可视化是即插即用&#xff0c;不需要对源码做任何修改喔&#xff01;给您剩下的不少麻烦&#xff01; 代码链接&#xff1a;yolo-gradcam 里面还有yolov5和v7的热力图可视化代码&#…

MathType7.6最新免费Offic数学公式编辑器插件

一直以来&#xff0c;如何在文档中优雅地输入数学公式就是一个难题&#xff0c;虽然 Office 中有自带的数学公式编辑器&#xff0c;但是要实现一些高级的编辑操作是非常困难的&#xff0c;比如公式编号&#xff0c;复杂公式编辑&#xff0c;改变公式字体字号&#xff0c;在很长…

第2篇 机器学习基础 —(4)k-means聚类算法

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。聚类算法是一种无监督学习方法&#xff0c;它将数据集中的对象分成若干个组或者簇&#xff0c;使得同一组内的对象相似度较高&#xff0c;不同组之间的对象相似度较低。聚类算法可以用于数据挖掘、图像分割、文本分类等领域…

在Qt中解决opencv的putText函数无法绘制中文的一种解决方法

文章目录 1.问题2.查阅资料3.解决办法 1.问题 在opencv中&#xff0c;假如直接使用putText绘制中文&#xff0c;会在图像上出现问号&#xff0c;如下图所示&#xff1a; 2.查阅资料 查了一些资料&#xff0c;说想要解决这个问题&#xff0c;需要用到freetype库或者用opencv…

这个超实用的门禁技巧,让办公楼安全更简单高效!

门禁监控是现代社会中不可或缺的一部分&#xff0c;用于确保安全和管理进出某个区域的人员。随着科技的不断发展&#xff0c;门禁监控已经远离了传统的机械锁和钥匙&#xff0c;变得更加智能化和高效。 客户案例 企业办公大楼 无锡某大型企业在其办公大楼内部部署了泛地缘科技…

我在Vscode学OpenCV 基本的加法运算

根据上一篇我们可知__图像的属性 链接&#xff1a;《我在Vscode学OpenCV 处理图像》 属性— API 形状 img.shape 图像大小 img.size 数据类型 img.dtype  shape&#xff1a;如果是彩色图像&#xff0c;则返回包含行数、列数、通道数的数组&#xff1b;如果是二值图像或者灰度…

Java 8 中的 Stream API - map() 方法详解

摘要&#xff1a; Java 8 中的 Stream API 提供了一种新的处理集合和数组的方式&#xff0c;可以使代码更加简洁、易读&#xff0c;同时还可以提高性能。其中 map() 方法是比较常用的方法之一&#xff0c;它可以将 Stream 对象中的每个元素映射为另一个元素。本文将对 Java 8 中…

建议收藏《2023华为海思实习笔试-数字芯片真题+解析》(附下载)

华为海思一直以来是从业者想要进入的热门公司。但是岗位就那么多&#xff0c;在面试的时候&#xff0c;很多同学因为准备不充分&#xff0c;与岗位失之交臂&#xff0c;无缘进入该公司。今天为大家带来《2023华为海思实习笔试-数字芯片真题解析》题目来源于众多网友对笔试的记录…

Windows经常提示更新怎么办?一招暂停66年,绝对靠谱!

windows10/11的更新频率非常高&#xff0c;也经常会修复旧bug的同时带来一些新的bug。所以有些人不喜欢系统的自动更新&#xff0c;总想把它禁用掉。禁用系统更新的软件有很多&#xff0c;不过这些方法大多是强行禁止&#xff0c;有时候会引来一些其它的问题。 所以为了阻止Win…