参考：如何使用油猴插件提高测试工作效率
一、背景
在酷家乐设计工具测试中，总会有许多高频且较繁琐的工作，比如：
-
查询插件版本：需要打开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()
demo：页面上增加刷新按钮，且可以实现拖拽：
// ==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()
})();
效果：（注意：如果加上刷新动作的话，会导致拖拽无效；所以先把这行代码注释掉了）
