通过油猴脚本让edge浏览器与aardio进行WebSocket通讯的例子

By 周山下樵夫 at 2023-10-09 • 1人收藏 • 774人看过

好多年前想到这个

EXCEL和aardio交互:利用httpserver功能(学习记录) - 上位机开发笔记

随着跳槽,现在单位的系统都是web页面了,所以又有了新的需求

通过油猴脚本让edge浏览器与aardio进行WebSocket通讯的例子


第一步给浏览器安装油猴脚本(省略)

第二步写一个油猴脚本(来自ai的例子)

// ==UserScript==
// @name         New Userscript
// @match        https://*/*
// @match        http://*/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

console.log("开始");
var socket = new WebSocket('ws://localhost:8876/aardio');

// 连接打开时发送消息
socket.onopen = function() {
socket.send('Hello 来自edge的消息!');
};

// 接收到消息时的处理
socket.onmessage = function(event) {
console.log('来自aardio的消息:', event.data);
};

第三步,打开aarido的范例,WebSocket异步服务端,并运行

QQ截图20231009223528.png

第三步,随便打开一个网页,按F12查看控制台信息QQ截图20231009224912.png

第四步,继续改进脚本

// ==UserScript==
// @name         New Userscript
// @match        https://*/*
// @match        http://*/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

function myfunc() {
console.log("开始");
var socket = new WebSocket('ws://localhost:8876/aardio');

// 连接打开时发送消息
socket.onopen = function() {
socket.send('Hello 来自edge的消息!');
};

// 接收到消息时的处理
socket.onmessage = function(event) {
console.log('来自aardio的消息:', event.data);
};
}



window.addEventListener('keydown', function(event) {
if (event.key === 'Control') { // 按下 Ctrl 键时触发
myfunc();
}
});

写成一个函数,这样在任意网页按下ctrl就可以触发函数,就可以满足我的需求把数据发送aardio,再用aar完成excel的工作!


同时也发在光庆的博客,希望大佬们不吝赐教啊。


5 个回复 | 最后更新于 2023-10-11
2023-10-10   #1

优秀

这种功能 要我是想半年都无从下手...

2023-10-10   #2

非常好的方法,点个赞,感谢分享

2023-10-10   #3

2023-10-10   #4

感谢分享

2023-10-11   #5

今天碰到一个跨域问题。因为普通的edge浏览器有限制跨域,所以我的油猴脚本操作iframe跨域时,会提示出错。

百度了很久,发现没有直接跨域操作的方法,要么给2个不同的页面注入js进行通讯。


然后我就想到退而求其次,我直接在ifame网址上注入脚本,抓取网页数据不就行了。

然后console.log()成功,但是无法通过热键触发(我真搞不定),

转而再想办法,就用网上常见的办法加入一个按钮!



第一步,我自己搭的网站,里面就一个iframe

<body>
<div class="container">
<iframe src="https://aardio.com" width="900" height="800">
</frame>
</div>
</body>


第二步修改油猴脚本

match改成了aardio

// ==UserScript==
// @name         New Userscript
// @match        https://aardio.com/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

console.log("注入成功")



function myfunc(text) {
console.log("开始");
var socket = new WebSocket('ws://localhost:8876/aardio');

// 连接打开时发送消息
socket.onopen = function() {
socket.send('Hello 来自edge的消息!'+text);
};

// 接收到消息时的处理
socket.onmessage = function(event) {
console.log('来自aardio的消息:', event.data);
};
}


// 在页面上生成一个按钮
var button = document.createElement('button');
button.innerHTML = '点击我';
button.id = 'myButton';
document.body.appendChild(button);
// 为按钮添加点击事件处理程序
button.addEventListener('click', function() {
//alert('你点击了按钮!');
//提取aardio网站的内容
var text=document.querySelector("#main-content > section.section.services > div > astro-island > div > div.mt-6.lg\\:col-5.lg\\:order-1.lg\\:mt-0 > div > h3").textContent
myfunc(text)
});

效果如下

按钮在最下面,我就不截图了。点击后成功了!曲线救国


登录后方可回帖

登 录
信息栏
 私人小站

本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



快速上位机开发学习,本站主要记录了学习过程中遇到的问题和解决办法及上位机代码分享

这里主要专注于学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.
如果侵权,联系 Popdes@126.com

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap

Loading...