油猴插件录制请求，封装接口自动化参数

2024-09-06 16:44
文章标签 参数 接口 封装 请求 自动化 插件 录制 油猴

本文主要是介绍油猴插件录制请求，封装接口自动化参数，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

参考：如何使用油猴插件提高测试工作效率

一、背景

在酷家乐设计工具测试中，总会有许多高频且较繁琐的工作，比如：

  • 查询插件版本：需要打开Chrome控制台，输入好几个命令然后过滤出版本信息。

  • 查询模型商品：需要先打开调试工具，查询得到模型商品id，然后跳转到测试平台进行加密，再去商家后台拼接url，最终访问到商品详情页。

  • 修改定制高级配置：至少要点击4次页面跳转，才能开始配置。

类似的重复性工作实在太多，无形中影响工作效率与体验。并且大量的命令记忆对新手特别不友好。

仔细分析这类行为，大多都属于"数据查询"、“命令输入” 、“页面访问” 等简单操作的组合，其实非常适合“插件化”，封装成各种【一键操作】。

二、思路

基于上述背景，我们期望能开发一个插件来提高测试工作效率。

对于测试插件，主要有以下诉求：

  • 开发门槛低。能让更多人参与进来，实现丰富的功能，满足各种需求。

  • API 强大。便于扩展更多能力。

  • 插件更新方便。便于新功能的推广。

最容易想到有两种方案： 酷家乐工具内部集成插件、Chrome 插件。但是很明显，这两种方式都存在开发门槛高、维护成本高、使用场景有限的缺点。

所以最后选择了另一种方案---油猴插件。

什么是油猴插件？

篡改猴 (Tampermonkey) 是拥有 超过 1000 万用户 的最流行的浏览器扩展之一。它适用于 Chrome、Microsoft Edge、Safari 等主流浏览器。
它允许用户自定义并增强您最喜爱的网页的功能。用户脚本是小型 JavaScript 程序，可用于向网页添加新功能或修改现有功能。使用 篡改猴，您可以轻松在任何网站上创建、管理和运行这些用户脚本。

简单说，油猴插件是一个 Chrome 插件，但是它的功能是一个脚本管理器，能将自定义的脚本注入到当前页面，让你的代码成为网页的一部分。

油猴提供的API：

Documentation | Tampermonkey

GM_*API 按功能主要分为
WEB请求类:GM_xmlhttpRequest(details）GM_webRequest(rules, listener)cookie操作:GM_cookie.list(details[, callback])GM_cookie.set(details[, callback])GM_cookie.delete(details, callback)
tab选项卡操作：GM_getTab(callback)
GM_saveTab(tab)
GM_getTabs(callback)
键值对操作：
GM_setValue(key, value)
GM_getValue(key, defaultValue)
GM_deleteValue(key)
GM_listValues()
GM_addValueChangeListener(key, (key, old_value, new_value, remote) => void)
GM_removeValueChangeListener(listenerId)
修改dom:
GM_addElement(tag_name, attributes), GM_addElement(parent_node, tag_name, attributes)
添加样式：
GM_addStyle(css)
下载:
GM_download(details), GM_download(url, name)
获取@resource 引入的资源文件的文本内容(比如js)
GM_getResourceText(name)
获取@resource 引入的资源文件的源地址
GM_getResourceURL(name)
控制台打印GM_log(message)屏幕通知GM_notification(details, ondone),GM_notification(text, title, image, onclick)打开新选项卡GM_openInTab(url, options),GM_openInTab(url, loadInBackground)菜单注册 GM_registerMenuCommand(name, callback, accessKey)
菜单注销 GM_unregisterMenuCommand(menuCmdId)
设置剪切板 GM_setClipboard(data, info)
windows窗体操作:
窗口地址改变 window.onurlchange
窗口关闭 window.close()
窗口聚焦 window.focus()

油猴脚本开发详解+油猴爬虫脚本实例_其它综合_脚本之家

demo1：页面上增加刷新按钮，且可以实现拖拽：

// ==UserScript==
// @name         测试插件
// @version      0.0.1
// @description  百度首页刷新
// @namespace    baidu.com
// @match        *://*/*
// @grant        GM_addStyle
// ==/UserScript==const addContainerDiv=()=>{const containerDiv=document.createElement("div");containerDiv.id="test-tool"containerDiv.innerHTML= "<button>刷新1</button>"GM_addStyle('#test-tool {position:fixed;right:300px;top:280px;}')//containerDiv.addEventListener("click",()=>{window.location.reload()})document.body.appendChild(containerDiv);//设置可拖拽const dragButton=document.getElementById("test-tool");dragButton.onmousedown = function(ev){// 获取鼠标相对于盒子的坐标var x2 = ev.offsetX;var y2 = ev.offsetY;// 鼠标移动document.onmousemove = function (ev) {var x3 = ev.pageX;var y3 = ev.pageY;dragButton.style.top = y3 - y2 + "px";dragButton.style.left = x3 - x2 + "px"}}// 4.鼠标松开事件dragButton.onmouseup = function () {document.onmousemove = null;}
}(function() {'use strict';addContainerDiv()
})();

 效果：（注意：如果加上刷新动作的话，会导致拖拽无效；所以先把这行代码注释掉了） 

demo2:录制接口

可以看到接口一般有两种类型，分别是fetch和xhr

Fetch和XHR都是用于发起HTTP请求的技术，但它们有以下几点区别：
1
原生API vs ES6新增函数：XHR是浏览器提供的原生API，而Fetch是ES6中新增的全局函数。
2
使用对象差异：XHR使用XMLHttpRequest对象，而Fetch使用Promise对象。
3
Cookies默认携带：Fetch默认不会携带cookies，需要手动设置credentials属性；而XHR请求会自动携带cookies。
4
请求取消能力：XHR可以取消一个正在进行的请求，而Fetch目前没有原生的请求取消机制。
5
响应类型处理：XHR的responseType属性可以设置响应类型（text、json、blob等），而Fetch需要手动解析响应。
6
进度监听功能：XHR可以监听上传和下载的进度，而Fetch不支持此功能。
7
错误处理方式：在错误处理方面，Fetch只会在网络错误时reject Promise，其他错误都会被视为成功的响应，需要手动判断；而XHR则会在出现错误时reject Promise。
8
兼容性：XHR兼容性更好，在一些旧版本的浏览器中可能无法使用Fetch2。
9
关注分离：Fetch是一种关注分离的技术，把复杂的事情拆分成几个简单的步骤实现，并得到结果3。
10
底层抽象：Fetch API更底层，包括Request、Response、Headers、Body等原生对象，而XHR需要使用一个实例来发出请求和处理响应。
11
灵活性：Fetch API比XHR更灵活，可以明确的配置请求和响应4。
12
兼容性：XHR兼容性更好，在一些旧版本的浏览器中可能无法使用Fetch2。
综上所述，Fetch和XHR各有优缺点，开发者应当根据项目需求和兼容性要求选择合适的请求技术

针对xhr：

  •  把运行时间设置为document-start，确保能拦截到较早发出的请求。
  • 使用 @grant unsafeWindow 声明，授予脚本访问或修改全局窗口对象的权限。

参考：油猴脚本高级应用：拦截与修改网页Fetch请求实战指南_油猴拦截请求-CSDN博客

这里有一点点无用代码，自己改改

// ==UserScript==
// @name         测试插件
// @run-at    document-start
// @version      0.0.1
// @description  百度首页刷新
// @namespace    baidu.com
// @match        *://*/*
// @grant        GM_addStyle
// @require      http://code.jquery.com/jquery-1.11.0.min.js
// @grant        unsafeWindow
// ==/UserScript==const addContainerDiv=()=>{const containerDiv=document.createElement("div");containerDiv.id="test-tool"containerDiv.innerHTML= "<button>刷新1</button>"GM_addStyle('#test-tool {position:fixed;right:300px;top:280px;}')var aweme_list=[];containerDiv.addEventListener("click",()=>{console.log('aba:');console.log("aweme_list"+aweme_list);// 定义包含名称和链接的数组const files = [];aweme_list.forEach((item)=>{if(item.aweme_type==0||item.awemeType==0||item.aweme_type==61||item.awemeType==61){try{files.push({name:item.desc,url:item.video.play_addr.url_list[0]})}catch{files.push({name:item.desc,url:item.video.playAddr[0]})}}if(item.aweme_type==68||item.awemeType==68){var urlList=[]item.images.forEach(img=>{try{urlList.push(img.url_list[0])}catch{urlList.push(img.urlList[0])}})files.push({name:item.desc,urlList:urlList})}});console.log(files);})document.body.appendChild(containerDiv);//设置可拖拽const dragButton=document.getElementById("test-tool");dragButton.onmousedown = function(ev){// 获取鼠标相对于盒子的坐标var x2 = ev.offsetX;var y2 = ev.offsetY;// 鼠标移动document.onmousemove = function (ev) {var x3 = ev.pageX;var y3 = ev.pageY;dragButton.style.top = y3 - y2 + "px";dragButton.style.left = x3 - x2 + "px"}}// 4.鼠标松开事件dragButton.onmouseup = function () {document.onmousemove = null;}
}(function() {'use strict';addContainerDiv();$(() => {function addXMLRequestCallback(callback) {// 是一个劫持的函数var oldSend, i;if (XMLHttpRequest.callbacks) {//   判断XMLHttpRequest对象下是否存在回调列表，存在就push一个回调的函数// we've already overridden send() so just add the callbackXMLHttpRequest.callbacks.push(callback);} else {// create a callback queueXMLHttpRequest.callbacks = [callback];// 如果不存在则在xmlhttprequest函数下创建一个回调列表// store the native send()oldSend = XMLHttpRequest.prototype.send;// 获取旧xml的send函数，并对其进行劫持// override the native send()XMLHttpRequest.prototype.send = function () {// process the callback queue// the xhr instance is passed into each callback but seems pretty useless// you can't tell what its destination is or call abort() without an error// so only really good for logging that a request has happened// I could be wrong, I hope so...// EDIT: I suppose you could override the onreadystatechange handler thoughfor (i = 0; i < XMLHttpRequest.callbacks.length; i++) {XMLHttpRequest.callbacks[i](this);}// 循环回调xml内的回调函数//    由于我们获取了send函数的引用，并且复写了send函数，这样我们在调用原send的函数的时候，需要对其传入引用，而arguments是传入的参数// call the native send()oldSend.apply(this, arguments);}}}// e.g.addXMLRequestCallback(function (xhr) {// 调用劫持函数，填入一个function的回调函数// 回调函数监听了对xhr调用了监听load状态，并且在触发的时候再次调用一个function，进行一些数据的劫持以及修改xhr.addEventListener("load", function () {if (xhr.readyState == 4 && xhr.status == 200) {// 获取URLvar url = new URL(xhr.responseURL);console.log("xhr接口：" + url);}});});})})();

 另一种写法，可以拿到url+参数：

var originalSend = XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.send = function(body) {var xhr = this;// 保存原始的onreadystatechange事件处理器var originalOnReadyStateChange = xhr.onreadystatechange;// 重写onreadystatechange事件处理器xhr.onreadystatechange = function() {if (xhr.readyState === 4) { // 请求已完成// 打印URL和请求参数console.log('Request URL:', xhr.responseURL);console.log('Request Parameters:', body);}// 如果存在，则调用原始的onreadystatechange事件处理器if (originalOnReadyStateChange) {originalOnReadyStateChange.apply(this, arguments);}};// 调用原始的send方法originalSend.apply(this, arguments);};

fetch的录制下来：

 const originFetch = fetch;
unsafeWindow.fetch = (...arg) => {console.log('fetch arg', ...arg);//console.log('通过')return originFetch(...arg);}

如果想要修改响应的数据： 

参考：https://zhuanlan.zhihu.com/p/436757974

let oldfetch = fetch;
function fuckfetch() {return new Promise((resolve, reject) => {oldfetch.apply(this, arguments).then(response => {const oldJson = response.json;response.json = function() {return new Promise((resolve, reject) => {oldJson.apply(this, arguments).then(result => {result.hook = 'success';resolve(result);});});};resolve(response);});});
}
window.fetch = fuckfetch;

完整demo要求：抓捕当前页面上的所有请求，得到fetch格式：

得到这一串代码： 

fetch("http://xx/compare", {"headers": {"accept": "application/json, text/plain, */*","accept-language": "zh-CN,zh;q=0.9","content-type": "application/json","proxy-connection": "keep-alive","token": “”，"referrerPolicy": "strict-origin-when-cross-origin","body": "{\"id\":\"3862\",“\Version\":\"001420240626\"}","method": "POST",
});

然后可以拷贝url和body，之后可以直接粘贴到接口自动化脚本中，方便编写脚本

// ==UserScript==
// @name         测试插件
// @run-at    document-start
// @version      0.0.1
// @description  百度首页刷新
// @namespace    baidu.com
// @match        *://*/*
// @grant        GM_addStyle
// @require      http://code.jquery.com/jquery-1.11.0.min.js
// @grant        unsafeWindow
// ==/UserScript==(function () {//'use strict';var apiList = [];var originalSend = XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.send = function (body) {var xhr = this;// 保存原始的onreadystatechange事件处理器var originalOnReadyStateChange = xhr.onreadystatechange;// 重写onreadystatechange事件处理器xhr.onreadystatechange = function () {if (xhr.readyState === 4) { // 请求已完成apiList.push({url: xhr.responseURL,status: xhr.status,body: body})console.log("apiList", apiList);}// 如果存在，则调用原始的onreadystatechange事件处理器if (originalOnReadyStateChange) {originalOnReadyStateChange.apply(this, arguments);}};// 调用原始的send方法originalSend.apply(this, arguments);};const originFetch = fetch;unsafeWindow.fetch = (...arg) => {console.log('fetch arg', ...arg);//console.log('通过')return originFetch(...arg);}//控件function addContainerDiv() {const containerDiv = document.createElement("div");containerDiv.id = "test-tool"containerDiv.innerHTML = "<button>获取接口</button>"GM_addStyle('#test-tool {position:fixed;right:300px;top:280px;}')containerDiv.addEventListener("click", () => {//console.log(apiList);})document.body.appendChild(containerDiv);//设置可拖拽const dragButton = document.getElementById("test-tool");dragButton.onmousedown = function (ev) {// 获取鼠标相对于盒子的坐标var x2 = ev.offsetX;var y2 = ev.offsetY;// 鼠标移动document.onmousemove = function (ev) {var x3 = ev.pageX;var y3 = ev.pageY;dragButton.style.top = y3 - y2 + "px";dragButton.style.left = x3 - x2 + "px"}}// 4.鼠标松开事件dragButton.onmouseup = function () {document.onmousemove = null;}}addContainerDiv();
})();

这篇关于油猴插件录制请求，封装接口自动化参数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1142558。

相关文章

Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人，AI大神Andrej Karpathy，曾是OpenAI联合创始人之一，特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ，宣布将长期致力于AI原生教育。 近日，Andrej Karpathy接受了No Priors（投资博客）的采访，与硅谷知名投资人 Sara Guo 和 Elad G
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
4B参数秒杀GPT-3.5：MiniCPM 3.0惊艳登场！

4B参数秒杀GPT-3.5：MiniCPM 3.0惊艳登场！

​ 面壁智能 在 AI 的世界里，总有那么几个时刻让人惊叹不已。面壁智能推出的 MiniCPM 3.0，这个仅有4B参数的"小钢炮"，正在以惊人的实力挑战着 GPT-3.5 这个曾经的AI巨人。 MiniCPM 3.0 MiniCPM 3.0 MiniCPM 3.0 目前的主要功能有： 长上下文功能：原生支持 32k 上下文长度，性能完美。我们引入了
阅读更多...
【Linux 从基础到进阶】Ansible自动化运维工具使用

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具，采用无代理架构（agentless），基于 SSH 连接进行管理，具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用，旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念
阅读更多...
AI(文生语音)-TTS 技术线路探索学习:从拼接式参数化方法到Tacotron端到端输出

AI(文生语音)-TTS 技术线路探索学习:从拼接式参数化方法到Tacotron端到端输出

AI(文生语音)-TTS 技术线路探索学习:从拼接式参数化方法到Tacotron端到端输出 在数字化时代，文本到语音（Text-to-Speech, TTS）技术已成为人机交互的关键桥梁，无论是为视障人士提供辅助阅读，还是为智能助手注入声音的灵魂，TTS 技术都扮演着至关重要的角色。从最初的拼接式方法到参数化技术，再到现今的深度学习解决方案，TTS 技术经历了一段长足的进步。这篇文章将带您穿越时
阅读更多...
如何使用Ansible实现CI/CD流水线的自动化

如何使用Ansible实现CI/CD流水线的自动化

如何使用Ansible实现CI/CD流水线的自动化 持续集成（CI）和持续交付（CD）是现代软件开发过程中的核心实践，它们帮助团队更快地交付高质量的软件。Ansible，作为一个强大的自动化工具，可以在CI/CD流水线中发挥关键作用。本文将详细介绍如何使用Ansible实现CI/CD流水线的自动化，包括设计流水线的结构、配置管理、自动化测试、部署、以及集成Ansible与CI/CD工具（如Jen
阅读更多...
Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

加密效果： 解密后的数据就是正常数据： 后端：使用的是spring-cloud框架，在gateway模块进行操作 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version></dependency> 编写一个AES加密
阅读更多...
如何确定 Go 语言中 HTTP 连接池的最佳参数？

如何确定 Go 语言中 HTTP 连接池的最佳参数？

确定 Go 语言中 HTTP 连接池的最佳参数可以通过以下几种方式： 一、分析应用场景和需求 并发请求量： 确定应用程序在特定时间段内可能同时发起的 HTTP 请求数量。如果并发请求量很高，需要设置较大的连接池参数以满足需求。例如，对于一个高并发的 Web 服务，可能同时有数百个请求在处理，此时需要较大的连接池大小。可以通过压力测试工具模拟高并发场景，观察系统在不同并发请求下的性能表现，从而
阅读更多...
JavaSE——封装、继承和多态

JavaSE——封装、继承和多态

1. 封装 1.1 概念      面向对象程序三大特性：封装、继承、多态 。而类和对象阶段，主要研究的就是封装特性。何为封装呢？简单来说就是套壳屏蔽细节 。     比如：对于电脑这样一个复杂的设备，提供给用户的就只是：开关机、通过键盘输入，显示器， USB 插孔等，让用户来和计算机进行交互，完成日常事务。但实际上：电脑真正工作的却是CPU 、显卡、内存等一些硬件元件。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2