electron获取元素xpath、pc端网页展示获取到的xpath、websocket给两端传值

2024-02-05 07:28

本文主要是介绍electron获取元素xpath、pc端网页展示获取到的xpath、websocket给两端传值,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

  • 需求点:
  • 思路:
    • 思路:
      • 一、electron获取xpath
        • 1、创建主窗口
        • 2、创建子窗口并且setBrowserView到主窗口,子窗口默认加载error.html
        • 3、如果获取到了url,就加载url
        • 4、获取xpath并传递
      • 二、electron通过websocket传递消息
      • 三、vue监听websocket
      • 四、electron注册和多次打开问题
        • 1、electron端注册
        • 2、pc端打开
        • 3、electron端检测是第一次打开,还是重复打开

需求点:

1、打开任意网站,点击元素,获取元素xpath(这个在pc端就很难实现了,会涉及到跨域问题,所以用的electron)
2、获取的xpath需要回显到PC端网站,通过接口保存

思路:

1、electron实现获取xpath这一操作
2、pc端需要有 调起electron app 和 拿到 electron app 返回值的操作
3、传值
在传值上先后试过 mqtt、url+localstorage,mqtt因为延时,导致获取以后不能马上看到赋值,pass,url+localstorage就是electron app 通过打开一个新链接的方式跳转到pc,这样会每次打开一个新链接,并且涉及到要一直判断什么时候该保存,什么时候该清空,体验不太好,所以最后选择websocket

思路:

仅用于描述思路,代码不完整,不能直接使用

一、electron获取xpath

建2个窗口,主窗口通过 process.argv 获取 打开app时候的 参数,如果参数中包含url,则认为是pc端启动的app,这时候子窗口加载url地址,否则认为是单独启动app,这时候子窗口加载错误页面,提示需要pc端打开。
获取xpath用插件 (get-xpath)

1、创建主窗口
win = new BrowserWindow({width: 1500,height: 1200,webPreferences: {webSecurity: true,webviewTag: true, // 开启webviewnodeIntegration: true, // 启用 Node.js 集成preload: path.join(__dirname, "/static/js/preload.js"),},});
win.loadFile("./index.html");
2、创建子窗口并且setBrowserView到主窗口,子窗口默认加载error.html
view = new BrowserView({webPreferences: {webSecurity: true,webviewTag: true, // 开启webviewnodeIntegration: true, // 启用 Node.js 集成preload: path.join(__dirname, "./static/js/capturePage.js"),},});view.setBounds({x: 0,y: 0,width: 1500,height: 1200,horizontal: true,vertical: true,});winWebContents = win.webContents;viewWebContents = view.webContents;win.setBrowserView(view);viewWebContents.loadFile("./error.html");
3、如果获取到了url,就加载url
if (par && par.href && par.orderId && par.targetHref) {viewWebContents.loadURL(par.href);
}
4、获取xpath并传递

上方代码有个(preload: path.join(__dirname, “./static/js/capturePage.js”) 在这里新建一个capturePage.js文件,文件里的功能需要实现:a.引入插件; b.拦截加载页面的原生点击事件;c.给点击事件加效果;d.传递获取到的xpath给主进程

const { ipcRenderer } = require("electron");
const getXPath = require("get-xpath");// 高亮的样式
const cla = "clickClass";
const style = "background:#ffeded;outline:2px dashed #ff5050;";
// box-sizing:border-box!important;
// 清空并初始化元素
function initDom(cla) {const body = document.querySelector("html");const allChoosedDom = body.querySelectorAll(`.${cla}`);allChoosedDom &&allChoosedDom.forEach((item) => {item.style.cssText = "";item.classList.remove(cla);});
}document.addEventListener("DOMContentLoaded", (event) => {const errBox = document?.querySelector("#errBox");// console.log(errBox, "errBox");if (errBox) return;// mouseover、mouseout共用方法function changeDomStyle(env) {document.addEventListener(env, function (event) {event.preventDefault();let element = event.target;const inlineStyle = element.style.cssText;let all = inlineStyle;const hoverStyle = "background:#9eddc3;outline:2px solid #41b584;";const initStyle = "background:none; outline:none;";// box-sizing:border-box!important;if (env === "mouseover") {all += hoverStyle;element.style.cssText = all;}if (env === "mouseout") {if (element.classList.contains(cla)) {all += style;element.style.cssText = all;} else {all += initStyle;element.style.cssText = all;}}});}changeDomStyle("mouseover");changeDomStyle("mouseout");// 点击获取元素document.addEventListener("click", function (event) {event.preventDefault();initDom(cla);var element = event.target;element.classList.add(cla);element.style.cssText = style;ipcRenderer.send("submit-xpath", getXPath(element));});
});

至此,electron获取xpath交互差不多完成

二、electron通过websocket传递消息

此处需关注,初始化ws和发送消息是异步的,链接一次即可,发送消息可以多次,每次xpath获取到了就发送一次

// 初始化
const WebSocket = require("ws");
let wss, wslocal;
wss = new WebSocket.Server({ port: 66666});
wss.on("connection", (ws) => {wslocal = ws;ws.on("message", (message) => {console.log(`Received message: ${message}`);});ws.on("error", (error) => {console.log(error, "error");});
});
wss.on("error", (error) => {console.log("WebSocket-error:", error);
});
// 触发
// 子窗口给渲染进程-xpath
ipcMain.on("submit-xpath", (event, xpath) => {//给客户端发消息wslocal.send(`${decodeURIComponent(par.targetHref)}?orderId=${par.orderId}&xpath=${xpath}`);// 通过打开新窗口的方法传值-此方法体验不好,已废弃/* shell.openExternal(`${decodeURIComponent(par.targetHref)}?orderId=${par.orderId}&xpath=${xpath}`); */
});

三、vue监听websocket

这里需要实现1、判断用户是否安装app(这里是根据ws链接情况判断的,10s没有连接到,就默认没有安装)2、获取值

const loading = ref(false)const websocket = ref(null)const retryCount = ref(0)const maxRetries = ref(5)const retryDelay = ref(2000) // 2秒const timeoutId = ref(null)const createWeb = () => {if (!timeoutId.value) {loading.value = truetimeoutId.value = setTimeout(() => {gp.$baseMessage('连接超时,请先下载APP','error',false,'vab-hey-message-error')loading.value = false}, 10000)}websocket.value = new WebSocket('ws://localhost:66666')websocket.value.onopen = (event) => {console.log('WebSocket连接已建立', event)loading.value = false}websocket.value.onmessage = (event) => {clearTimeout(timeoutId.value) // 清除超时定时器const { data } = event}websocket.value.onclose = (event) => {if (event.code === 1006 && retryCount.value < maxRetries.value) {// 如果是网络问题导致的连接关闭,则重试连接retryCount.value++setTimeout(createWeb(), retryDelay.value) // 2秒后再次尝试连接} else {console.log(event, '其他原因导致的连接关闭')}}websocket.value.onerror = (error) => {console.log(error, 'error')}}

四、electron注册和多次打开问题

1、electron端注册
// 注册app,用于PC端唤醒
setDefaultProtocol: (scheme) => {//判断系统if (process.platform === "win32") {let args = [];if (!app.isPackaged) {//开发阶段调试阶段需要将运行程序的绝对路径加入启动参数args.push(path.resolve(process.argv[1]));}//添加--防御自定义协议漏洞,忽略后面追加参数args.push("--");//判断是否已经注册if (!app.isDefaultProtocolClient(scheme, process.execPath, args)) {app.setAsDefaultProtocolClient(scheme, process.execPath, args);}} else {//判断是否已经注册if (!app.isDefaultProtocolClient(scheme)) {app.setAsDefaultProtocolClient(scheme);}}
}
2、pc端打开
// myApp是我随便取的,换成自己的就可以了
const allHref = `myApp://?orderId=${orderId}&href=${href}&targetHref=${targetHref}`
window.location.href = allHref
3、electron端检测是第一次打开,还是重复打开

(因为我的需求设计是,pc端每次想要获取的时候,都可以唤醒electron app,所以需要这个,如果没有这部分的需求,这段就没必要加了)

// 获取单实例锁
const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {app.quit();
} else {app.on("second-instance", (event, argv) => {ipcMain.removeAllListeners();// 处理收到的参数protocol = mainSupplement.handleArgv(argv, "myApp");par = mainSupplement.handleURL(protocol);// 唤起已打开的窗口if (win) {if (win.isMinimized()) win.restore();win.focus();// 加载需要抓取的页面if (par && par.href && par.orderId && par.targetHref) {viewWebContents.loadURL(par.href);// 子窗口给渲染进程-xpathipcMain.on("submit-xpath", (event, xpath) => {//给客户端发消息wslocal.send(`${decodeURIComponent(par.targetHref)}?orderId=${par.orderId}&xpath=${xpath}`);});}}});//冷启动主进程代码执行直接在这里获取启动协议// 处理收到的参数protocol = mainSupplement.handleArgv(process.argv, "myApp");par = mainSupplement.handleURL(protocol);
}

因为启动分为第一次启动和第二次启动,这个部分在electron文档可以看到,不多说,就是需要根据两种情境配置2份代码,app.on(“second-instance”) 和 app.whenReady() 代码非常相似

app.whenReady().then(async () => {await createWindow();// 加载需要抓取的页面if (par && par.href && par.orderId && par.targetHref) {viewWebContents.loadURL(par.href);// 子窗口给渲染进程-xpathipcMain.removeAllListeners();ipcMain.on("submit-xpath", (event, xpath) => {//给客户端发消息wslocal.send(`${decodeURIComponent(par.targetHref)}?orderId=${par.orderId}&xpath=${xpath}`);});}

这篇关于electron获取元素xpath、pc端网页展示获取到的xpath、websocket给两端传值的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/680159

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

禁止复制的网页怎么复制

禁止复制的网页怎么复制 文章目录 禁止复制的网页怎么复制前言准备工作操作步骤一、在浏览器菜单中找到“开发者工具”二、点击“检查元素(inspect element)”按钮三、在网页中选取需要的片段,锁定对应的元素四、复制被选中的元素五、粘贴到记事本,以`.html`为后缀命名六、打开`xxx.html`,优雅地复制 前言 在浏览网页的时候,有的网页内容无法复制。比如「360

Android Environment 获取的路径问题

1. 以获取 /System 路径为例 /*** Return root of the "system" partition holding the core Android OS.* Always present and mounted read-only.*/public static @NonNull File getRootDirectory() {return DIR_ANDR

遮罩,在指定元素上进行遮罩

废话不多说,直接上代码: ps:依赖 jquer.js 1.首先,定义一个 Overlay.js  代码如下: /*遮罩 Overlay js 对象*/function Overlay(options){//{targetId:'',viewHtml:'',viewWidth:'',viewHeight:''}try{this.state=false;//遮罩状态 true 激活,f

Java Websocket实例【服务端与客户端实现全双工通讯】

Java Websocket实例【服务端与客户端实现全双工通讯】 现很多网站为了实现即时通讯,所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发 出HTTP request,然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏 览器需要不断的向服务器发出请求,然而HTTP

学习记录:js算法(二十八):删除排序链表中的重复元素、删除排序链表中的重复元素II

文章目录 删除排序链表中的重复元素我的思路解法一:循环解法二:递归 网上思路 删除排序链表中的重复元素 II我的思路网上思路 总结 删除排序链表中的重复元素 给定一个已排序的链表的头 head , 删除所有重复的元素,使每个元素只出现一次 。返回 已排序的链表 。 图一 图二 示例 1:(图一)输入:head = [1,1,2]输出:[1,2]示例 2:(图

火语言RPA流程组件介绍--浏览网页

🚩【组件功能】:浏览器打开指定网址或本地html文件 配置预览 配置说明 网址URL 支持T或# 默认FLOW输入项 输入需要打开的网址URL 超时时间 支持T或# 打开网页超时时间 执行后后等待时间(ms) 支持T或# 当前组件执行完成后继续等待的时间 UserAgent 支持T或# User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器

编程应该用 Mac 还是 PC ?

『有人的地方,就有江湖』—徐克。笑傲江湖。     序     一个竞争的市场,就会有对立的产生,这世界存在著很多不同的领域,领域好比是个江湖的缩影,因此就有许多门派的纷争,例如说浏览器领域有著最大宗的IE派,门派成长速度飞快,武功版号跳的跟台湾物价指数一样快的Chrome门,不断被模仿,一直被超越的Opera派;韧性极强,一直对抗几大势力的Firefox派等等,程序语言也有自己的领域

PC与android平板通过浏览器监控Verybot的视频

下面这个视频是PC与android平板通过浏览器监控Verybot的视频:           http://v.youku.com/v_show/id_XNjYzNzYyMTIw.html