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

finn 2023-10-9 1867

我的需求来自我工作中的需求。比如我浏览器打开了一个任务,那我需要把当前页面里的,日期、id、内容等内容 复制到excel里,手动的话很麻烦,用浏览器自动化又有点奇怪,不能随时随地触发,本来嵌入web.form控件就行,但是ie内核打开速度很慢,终于今晚开始尝试写油猴脚本,感谢ai!


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

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

Code JavaScriptLine:20复制
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
    • // ==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异步服务端,并运行

    第三步,随便打开一个网页,按F12查看控制台信息


    第四步,继续改进脚本

    Code JavaScriptLine:30复制
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
    • // ==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的工作!

    最新回复 (11)
    • finn 2023-10-9
      0 2
      Code JavaScriptLine:31复制
    • 1.
    • 2.
    • 3.
    • 4.
    • 5.
    • 6.
    • 7.
    • 8.
    • 9.
    • 10.
    • 11.
    • 12.
    • 13.
    • 14.
    • 15.
    • 16.
    • 17.
    • 18.
    • 19.
    • 20.
    • 21.
    • 22.
    • 23.
    • 24.
    • 25.
    • 26.
    • 27.
    • 28.
    • 29.
    • 30.
    • 31.
      • // ==UserScript==
      • // @name New Userscript
      • // @match https://*/*
      • // @match http://*/*
      • // @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
      • // @grant none
      • // ==/UserScript==
      • 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);
      • };
      • }
      • window.addEventListener('keydown', function(event) {
      • if (event.key === 'Control') { // 按下 Ctrl 键时触发
      • var text=document.querySelector("#body > div > div > div.col-lg-9.main > div.card.card-thread > div > div.media > div > h4").textContent;
      • myfunc(text);
      • }
      • });


      更新一个脚本。这样就可以发送帖子的标题到aardio

    • 小光芒 2023-10-10
      0 3
      顶一个
    • aardio 2023-10-10
      0 4
      这个想法好
    • lcj21 2023-10-10
      0 5
      非常巧妙的思路,感谢分享!
    • 光庆 2023-10-10
      0 6
      顶顶更健康
    • 瞌睡蟲子 2023-10-10
      0 7
      另外一个思路,用Sunny拦截html注入web.rpc.externalServer的aadio.js。通过rpc交互。
    • finn 2023-10-11
      1 8

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

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


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

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

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



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

      Code HTML/XTMLLine:6复制
    • 1.
    • 2.
    • 3.
    • 4.
    • 5.
    • 6.
      • <body>
      • <div class="container">
      • <iframe src="https://aardio.com" width="900" height="800">
      • </frame>
      • </div>
      • </body>


      第二步修改油猴脚本

      match改成了aardio

      Code JavaScriptLine:39复制
    • 1.
    • 2.
    • 3.
    • 4.
    • 5.
    • 6.
    • 7.
    • 8.
    • 9.
    • 10.
    • 11.
    • 12.
    • 13.
    • 14.
    • 15.
    • 16.
    • 17.
    • 18.
    • 19.
    • 20.
    • 21.
    • 22.
    • 23.
    • 24.
    • 25.
    • 26.
    • 27.
    • 28.
    • 29.
    • 30.
    • 31.
    • 32.
    • 33.
    • 34.
    • 35.
    • 36.
    • 37.
    • 38.
    • 39.
      • // ==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)
      • });


      效果如下

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

    • finn 2023-10-11
      0 9
      瞌睡蟲子 另外一个思路,用Sunny拦截html注入web.rpc.externalServer的aadio.js。通过rpc交互。
      仔细说说
    • 瞌睡蟲子 2023-10-11
      0 10
      finn 仔细说说
      其实目的都一样,核心就是要把你的js注入到运行时页面。不管控制台、iframe,扩展,拦截都是实现方式不同。当前比较靠谱的就扩展注入,拦截注入,其他方式个有利弊。 就像你上面帖子遇到的问题,iframe注入涉及跨域,不同浏览器解决方案不一样,得通过启动参数或者其他方式解决。 扩展注入,要不用运行时content.js来执行原生对象方法;要不把js注入到网页,可以代理执行所有页面运行时资源,这种用的最多。 拦截注入是侵入性的,最危险的方式。通过抓包工具(fiddleder,Charles,Reqable)来拦截篡改http消息,把自己的js注入到html里面去。如果自己写工具,可以通过fiddlercore,sunny这些中间件实现拦截注入。
    • finn 2023-10-11
      0 11
      瞌睡蟲子 其实目的都一样,核心就是要把你的js注入到运行时页面。不管控制台、iframe,扩展,拦截都是实现方式不同。当前比较靠谱的就扩展注入,拦截注入,其他方式个有利弊。 就像你上面帖子遇到的问题,ifra ...
      哦哦哦。还有这种思路,就是想服务器请求js,html时候,直接篡改了哦?
    • google88 2023-10-18
      0 12
      人才!
    返回