国家住房和城乡建设部网站,免费营销网站制作,新闻发稿平台,怎么开网店新手入门参考#xff1a;如何使用油猴插件提高测试工作效率
一、背景
在酷家乐设计工具测试中#xff0c;总会有许多高频且较繁琐的工作#xff0c;比如#xff1a; 查询插件版本#xff1a;需要打开Chrome控制台#xff0c;输入好几个命令然后过滤出版本信息。 查询模型商品如何使用油猴插件提高测试工作效率
一、背景
在酷家乐设计工具测试中总会有许多高频且较繁琐的工作比如 查询插件版本需要打开Chrome控制台输入好几个命令然后过滤出版本信息。 查询模型商品需要先打开调试工具查询得到模型商品id然后跳转到测试平台进行加密再去商家后台拼接url最终访问到商品详情页。 修改定制高级配置至少要点击4次页面跳转才能开始配置。
类似的重复性工作实在太多无形中影响工作效率与体验。并且大量的命令记忆对新手特别不友好。
仔细分析这类行为大多都属于数据查询、“命令输入” 、“页面访问” 等简单操作的组合其实非常适合“插件化”封装成各种【一键操作】。
二、思路
基于上述背景我们期望能开发一个插件来提高测试工作效率。
对于测试插件主要有以下诉求 开发门槛低。能让更多人参与进来实现丰富的功能满足各种需求。 API 强大。便于扩展更多能力。 插件更新方便。便于新功能的推广。
最容易想到有两种方案 酷家乐工具内部集成插件、Chrome 插件。但是很明显这两种方式都存在开发门槛高、维护成本高、使用场景有限的缺点。
所以最后选择了另一种方案---油猴插件。
什么是油猴插件 篡改猴 (Tampermonkey) 是拥有 超过 1000 万用户 的最流行的浏览器扩展之一。它适用于 Chrome、Microsoft Edge、Safari 等主流浏览器。 它允许用户自定义并增强您最喜爱的网页的功能。用户脚本是小型 JavaScript 程序可用于向网页添加新功能或修改现有功能。使用 篡改猴您可以轻松在任何网站上创建、管理和运行这些用户脚本。 简单说油猴插件是一个 Chrome 插件但是它的功能是一个脚本管理器能将自定义的脚本注入到当前页面让你的代码成为网页的一部分。 油猴提供的API Documentation | Tampermonkey GM_*API 按功能主要分为
WEB请求类:GM_xmlhttpRequest(detailsGM_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
// /UserScriptconst addContainerDiv(){const containerDivdocument.createElement(div);containerDiv.idtest-toolcontainerDiv.innerHTML button刷新1/buttonGM_addStyle(#test-tool {position:fixed;right:300px;top:280px;})//containerDiv.addEventListener(click,(){window.location.reload()})document.body.appendChild(containerDiv);//设置可拖拽const dragButtondocument.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
// /UserScriptconst addContainerDiv(){const containerDivdocument.createElement(div);containerDiv.idtest-toolcontainerDiv.innerHTML button刷新1/buttonGM_addStyle(#test-tool {position:fixed;right:300px;top:280px;})var aweme_list[];containerDiv.addEventListener(click,(){console.log(aba:);console.log(aweme_listaweme_list);// 定义包含名称和链接的数组const files [];aweme_list.forEach((item){if(item.aweme_type0||item.awemeType0||item.aweme_type61||item.awemeType61){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_type68||item.awemeType68){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 dragButtondocument.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一个回调的函数// weve 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 cant 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;q0.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-toolcontainerDiv.innerHTML button获取接口/buttonGM_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();
})();
