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

2024-02-05 07:28
文章标签 网页 元素 展示 websocket 传值 获取 xpath pc electron 两端

本文主要是介绍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。

相关文章

C++中RAII资源获取即初始化

C++中RAII资源获取即初始化

《C++中RAII资源获取即初始化》RAII通过构造/析构自动管理资源生命周期,确保安全释放,本文就来介绍一下C++中的RAII技术及其应用,具有一定的参考价值,感兴趣的可以了解一下... 目录一、核心原理与机制二、标准库中的RAII实现三、自定义RAII类设计原则四、常见应用场景1. 内存管理2. 文件操
阅读更多...
SpringBoot服务获取Pod当前IP的两种方案

SpringBoot服务获取Pod当前IP的两种方案

《SpringBoot服务获取Pod当前IP的两种方案》在Kubernetes集群中,SpringBoot服务获取Pod当前IP的方案主要有两种,通过环境变量注入或通过Java代码动态获取网络接口IP... 目录方案一：通过 Kubernetes Downward API 注入环境变量原理步骤方案二：通过
阅读更多...
使用Python实现获取屏幕像素颜色值

使用Python实现获取屏幕像素颜色值

《使用Python实现获取屏幕像素颜色值》这篇文章主要为大家详细介绍了如何使用Python实现获取屏幕像素颜色值,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、一个小工具，按住F10键，颜色值会跟着显示。完整代码import tkinter as tkimport pyau
阅读更多...
python获取cmd环境变量值的实现代码

python获取cmd环境变量值的实现代码

《python获取cmd环境变量值的实现代码》：本文主要介绍在Python中获取命令行（cmd）环境变量的值,可以使用标准库中的os模块,需要的朋友可以参考下... 前言全局说明在执行py过程中，总要使用到系统环境变量一、说明1.1 环境:Windows 11 家庭版 24H2 26100.4061
阅读更多...
使用Python实现网页表格转换为markdown

使用Python实现网页表格转换为markdown

《使用Python实现网页表格转换为markdown》在日常工作中,我们经常需要从网页上复制表格数据,并将其转换成Markdown格式,本文将使用Python编写一个网页表格转Markdown工具,需... 在日常工作中，我们经常需要从网页上复制表格数据，并将其转换成Markdown格式，以便在文档、邮件或
阅读更多...
使用Python获取JS加载的数据的多种实现方法

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript（JS）动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法（一）分析网络请求1
阅读更多...
通过cmd获取网卡速率的代码

通过cmd获取网卡速率的代码

《通过cmd获取网卡速率的代码》今天从群里看到通过bat获取网卡速率两段代码,感觉还不错,学习bat的朋友可以参考一下... 1、本机有线网卡支持的最高速度：%v%@echo off & setlocal enabledelayedexpansionecho 代码开始echo 65001编码获取： >
阅读更多...
使用Python实现调用API获取图片存储到本地的方法

使用Python实现调用API获取图片存储到本地的方法

《使用Python实现调用API获取图片存储到本地的方法》开发一个自动化工具,用于从JSON数据源中提取图像ID,通过调用指定API获取未经压缩的原始图像文件,并确保下载结果与Postman等工具直接... 目录使用python实现调用API获取图片存储到本地1、项目概述2、核心功能3、环境准备4、代码实现
阅读更多...
Python实现获取带合并单元格的表格数据

Python实现获取带合并单元格的表格数据

《Python实现获取带合并单元格的表格数据》由于在日常运维中经常出现一些合并单元格的表格,如果要获取数据比较麻烦,所以本文我们就来聊聊如何使用Python实现获取带合并单元格的表格数据吧... 由于在日常运维中经常出现一些合并单元格的表格，如果要获取数据比较麻烦，现将将封装成类，并通过调用list_exc
阅读更多...
通过C#获取Excel单元格的数据类型的方法详解

通过C#获取Excel单元格的数据类型的方法详解

《通过C#获取Excel单元格的数据类型的方法详解》在处理Excel文件时,了解单元格的数据类型有助于我们正确地解析和处理数据,本文将详细介绍如何使用FreeSpire.XLS来获取Excel单元格的... 目录引言环境配置6种常见数据类型C# 读取单元格数据类型引言在处理 Excel 文件时，了解单元格
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2