当前位置: 首页 > news >正文

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

相关文章:

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

1、建立Vue项目 为了方便快速建立项目&#xff0c;我已经写好脚手架&#xff0c;直接clone项目&#xff0c;快速开发 点击快速进入源代码 拉取代码 git clone https://github.com/xygengcn/electron-devtool.git安装依赖 yarn运行项目 yarn dev打包项目 yarn build2、安装…...

干洗店服务预约小程序有什么作用

要说干洗店&#xff0c;近些年的需求度非常高&#xff0c;一方面是人们生活品质提升&#xff0c;另一方面则是各种服饰对洗涤要求提升等&#xff0c;很多人的衣服很多也会通过干洗店进行清洁。 而对从业商家来说&#xff0c;市场庞大一方面需要不断进行市场教育、品牌提升&…...

【跟小嘉学 Rust 编程】三十四、Rust的Web开发框架之一: Actix-Web的进阶

系列文章目录 【跟小嘉学 Rust 编程】一、Rust 编程基础 【跟小嘉学 Rust 编程】二、Rust 包管理工具使用 【跟小嘉学 Rust 编程】三、Rust 的基本程序概念 【跟小嘉学 Rust 编程】四、理解 Rust 的所有权概念 【跟小嘉学 Rust 编程】五、使用结构体关联结构化数据 【跟小嘉学…...

软件安装(1)——Xshell安装

一、前言 本篇文章主要用于介绍Xshell破解版的安装 二、具体步骤 1. 下载Xshell7 链接&#xff1a;https://pan.baidu.com/s/1sFZz1uPb7yeDl6dlM4xtpg 提取码&#xff1a;a7m8 2. 安装Xshell7 选择文件安装目录后安装即可...

Kafka基本原理、生产问题总结及性能优化实践 | 京东云技术团队

Kafka是最初由Linkedin公司开发&#xff0c;是一个分布式、支持分区的&#xff08;partition&#xff09;、多副本的&#xff08;replica&#xff09;&#xff0c;基于zookeeper协调的分布式消息系统&#xff0c;它的最大的特性就是可以实时的处理大量数据以满足各种需求场景&a…...

java8利用Stream方法求两个List对象的交集、差集与并集(即:anyMatch和allMatch和noneMatch的区别详解)

1、anyMatch 判断数据列表中是否存在任意一个元素符合设置的predicate条件&#xff0c;如果是就返回true&#xff0c;否则返回false。 接口定义&#xff1a; boolean anyMatch(Predicate<? super T> predicate); 方法描述&#xff1a; 在anyMatch 接口定义中是接收 P…...

Centos7下生成https自签名证书

1、安装openssl yum install openssl2、生成带密码的私有秘钥文件 openssl genrsa -des3 -out server.key 2048使用带密码的私有秘钥文件时需要输入密码&#xff0c;这里直接输入&#xff1a;123456 3、生成不带密码的私有秘钥文件 openssl rsa -in server.key -out serve…...

从中序和后序遍历序列构造二叉树

注意&#xff1a;该解法是基于二叉树中的值不存在重复所写的。 代码如下&#xff0c;可开袋即食 class Solution {private Map<Integer,Integer> map;public TreeNode buildTree(int[] inorder, int[] postorder) {map new HashMap<>();for(int i 0; i < in…...

Apache ActiveMQ (版本 < 5.18.3) (CNVD-2023-69477)RCE修复方案/缓解方案

一、漏洞描述 Apache ActiveMQ 是美国阿帕奇&#xff08;Apache&#xff09;基金会的一套开源的消息中间件&#xff0c;它支持 Java 消息服务、集群、Spring Framework 等。 二、漏洞成因 ActiveMQ 默认开放了 61616 端口用于接收 OpenWire 协议消息&#xff0c;由于针对异常…...

61. 旋转链表、Leetcode的Python实现

博客主页&#xff1a;&#x1f3c6;李歘歘的博客 &#x1f3c6; &#x1f33a;每天不定期分享一些包括但不限于计算机基础、算法、后端开发相关的知识点&#xff0c;以及职场小菜鸡的生活。&#x1f33a; &#x1f497;点关注不迷路&#xff0c;总有一些&#x1f4d6;知识点&am…...

基于tpshop开发多商户源码支持手机端+商家+门店 +分销+淘宝数据导入+APP+可视化编辑

tpshop多商户源码,tpshop商城源码,tpshop b2b2c源码-支持手机端商家门店 分销淘宝数据导入APP可视化编辑 tpshop商城源码算是 thinkphp框架里做的比较早 比较好的源码了&#xff0c;写法简明 友好面向程序猿。 这是一款前几年的版本 虽然后台看着好了些&#xff0c;丝毫不影响…...

ElasticSearch深度解析入门篇:高效搜索解决方案的介绍与实战案例讲解,带你避坑

ElasticSearch深度解析入门篇&#xff1a;高效搜索解决方案的介绍与实战案例讲解&#xff0c;带你避坑 1.Elasticsearch 产生背景 大规模数据如何检索 如&#xff1a;当系统数据量上了 10 亿、100 亿条的时候&#xff0c;我们在做系统架构的时候通常会从以下角度去考虑问题&a…...

HTML简单实现v-if与v-for与v-model

Vue启动&#xff01;&#xff01; 首先VIewModel将View和Model连接一起&#xff0c;Model的数据改变View的数据也变 使用Visual Studio Code 启动Vue需要vue.js插件和导入CDN(包) vue.js插件&#xff1a;CTRL shift x 在搜索栏搜 索vue.js安装即可 CDN&#xff1a; http…...

【学习笔记】[PA2021] Fiolki 2

Part 1 前置知识&#xff1a;LGV引理 摘抄自oi-wiki&#xff1a; L G V LGV LGV引理可以用来处理有向无环图上不相交路径计数等问题。 基本定义&#xff1a; w ( P ) w(P) w(P)表示 P P P这条路径上所有边的 边权之积 。&#xff08;路径计数时&#xff0c;可以将边权都设为…...

计算1到100的和

一、不好的写法 public static void main(String[] args) {int sum 0;int n 100;for (int i 1; i < n; i) {sum i;}System.out.println("sum" sum);}1.定义两个整型变量&#xff1b; 2.执行100次加法运算&#xff1b; 3.打印结果到控制台&#xff1b; 二、好…...

C++下OpenMP耗时统计

在C中&#xff0c;如果你使用OpenMP进行并行计算&#xff0c;你可以使用omp_get_wtime()函数来测量代码段的执行时间。这个函数返回一个double类型的值&#xff0c;表示从某一固定点到当前时间的秒数。因此&#xff0c;你可以在代码的开始和结束点分别调用这个函数&#xff0c;…...

PTA 函数题(C语言)-- 阶乘计算升级版

题目title&#xff1a; 阶乘计算升级版 题目作者&#xff1a; 陈越 浙江大学 本题要求实现一个打印非负整数阶乘的函数。 函数接口定义&#xff1a; void Print_Factorial ( const int N ); 其中N是用户传入的参数&#xff0c;其值不超过1000。如果N是非负整数&#…...

内网穿透入门

内网穿透 内网穿透&#xff08;英文&#xff1a;Port Forwarding&#xff09;是一种网络技术&#xff0c;用于将公共互联网&#xff08;外网&#xff09;的请求转发到私有局域网&#xff08;内网&#xff09;中的特定设备或服务。在许多情况下&#xff0c;设备或服务位于一个局…...

Pickle pyhton反序列化

参考文章 Python pickle反序列化浅析 Pickle包含四种方法 pickle.dump(obj, file) 将obj对象进行封存&#xff0c;即序列化&#xff0c;然后写入到file文件中 注:这里的file需要以wb打开(二进制可写模式) pickle.load(file) 将file这个文件进行解封&#xff0c;即反序列化 …...

动静分离技术

一、HAproxy 动静分离 1、概念&#xff1a; HAproxy 动静分离技术是一种用于优化 Web 服务器性能和提高用户体验的策略&#xff0c;它通过将动态内容和静态内容分别路由到不同的后端服务器来实现&#xff0c;减轻服务器负载&#xff0c;提高网站的响应速度。 动态内容包括由…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

游戏开发中常见的战斗数值英文缩写对照表

游戏开发中常见的战斗数值英文缩写对照表 基础属性&#xff08;Basic Attributes&#xff09; 缩写英文全称中文释义常见使用场景HPHit Points / Health Points生命值角色生存状态MPMana Points / Magic Points魔法值技能释放资源SPStamina Points体力值动作消耗资源APAction…...

起重机起升机构的安全装置有哪些?

起重机起升机构的安全装置是保障吊装作业安全的关键部件&#xff0c;主要用于防止超载、失控、断绳等危险情况。以下是常见的安全装置及其功能和原理&#xff1a; 一、超载保护装置&#xff08;核心安全装置&#xff09; 1. 起重量限制器 功能&#xff1a;实时监测起升载荷&a…...