前段时因为项目有重复操作配置权限按钮的需求，每次重复性体力劳动，需要好几分钟，如果页面多，时间更多，这怎么能忍得了，于是我研究起了油猴插件，自己写脚本，让程序去做这些重复性的工作，用完以后的感觉就是两个字：真香，哈哈，话不多说开始说一下油猴的使用吧，看完，您也可以编写一个简单的脚本啦
一、安装油猴
很多浏览器商店都可以搜到这个浏览器，直接搜索安装就可以了，但是谷歌不fanqiang的情况下，无法直接用，但是我找了编译过的文件，也可以安装
在浏览器拓展程序中，可以看到安装好的油猴
二、油猴配置介绍
1、安装完成，在浏览器的上方，会出现一个油猴的图标，点击图标，点击添加新脚本
2、接着就进入添加脚本的页面，如下图，您可以在下方直接编写js代码，也可以在您喜欢的编辑器里编辑好javascript代码，然后再复制油猴脚本进去
3、主要的代码是在function函数中，但是上面的注释是什么意思呢？是不是没有作用，可以删掉呢？
No,千万不要，他们的作用非常的重要，是一些配置项，下面是关于常用配置的解释，不过，想要知道全面的还是要自己去官网查看哈，
| 名称 | 作用 |
|---|---|
| name | 名称，可自己给脚本取一个名字 |
| namespace | 命名空间，可写成网址 |
| version | 油猴的版本号 |
| description | 解释一下这个脚本具体做什么的 |
| author | 作者名字 |
| match | 需要匹配那个网址才执行这个脚本，例如 ://ok99ok99.com/ |
| grant | 指定脚本运行所需权限，如果脚本拥有相应的权限，就可以调用油猴扩展提供的API与浏览器进行交互。如果设置为none的话，则不使用沙箱环境，脚本会直接运行在网页的环境中，这时候无法使用大部分油猴扩展的API。如果不指定的话，油猴会默认添加几个最常用的API |
| require | 脚本依赖其他js库，在运行脚本之前先加载其他库，常用于加载jquery |
| connect | 当用户使用GM_xmlhttpRequest请求远程数据的时候，需要使用connect指定允许访问的域名，支持域名、子域名、IP地址以及*通配符 |
| updateURL | 脚本更新网址，当油猴扩展检查更新的时候，会尝试从这个网址下载脚本，然后比对版本号确认是否更新 |
3、脚本权限 下面简单介绍一下grant指令那里可以填写的一些权限，详情请查看油猴脚本文档。这里就简单介绍几个常用的，可以调用的函数全部以GM_作为开头。（下面权限是别的优秀博主归纳）
| 权限名 | 功能 |
|---|---|
| unsafeWindow | 允许脚本可以完整访问原始页面，包括原始页面的脚本和变量。 |
| GM_getValue(name,defaultValue) | 从油猴扩展的存储中访问数据。可以设置默认值，在没成功获取到数据的时候当做初始值。如果保存的是日期等类型的话，取出来的数据会变成文本，需要自己转换一下。 |
| GM_setValue(name,value) | 将数据保存到存储中 |
| GM_xmlhttpRequest(details) | 异步访问网页数据的API，这个方法比较复杂，有大量参数和回调，详情请参考官方文档。 |
| GM_setClipboard(data, info) | 将数据复制到剪贴板中，第一个参数是要复制的数据，第二个参数是MIME类型，用于指定复制的数据类型。 |
| GM_log(message) | 将日志打印到控制台中，可以使用F12开发者工具查看。 |
| GM_notification(details, ondone), GM_notification(text, title, image, onclick) | 设置网页通知，请参考文档获取用法。 |
| GM_openInTab(url, loadInBackground) | 在浏览器中打开网页，可以设置是否在后台打开等几个选项 |
三、编写油猴脚本
1、第一个脚本是项目自动配置按钮权限的脚本，其实代码很简单，但是对于第一次接触的我来说，还是好一阵研究的，当然现在回头看就是容易的多，因为页面中的按钮，需要根据不同的角色，查看到的按钮不同，为了便于操作，做了几个页面，但是还是费时间，特别是在更改了好几个页面的情况下，又有不同的环境，开发，测试，预测试，生产环境，至少要配四遍，有了这个就省很多力气啦~~ 首先思路就是进入项目的地址，配置自动点击菜单，进入相关的页面，去配置，最重要的是，每个按钮的id名称都是严格按照规范来的，比如中间有下划线的话，要统一都有下划线，有了规范，代码就会自动配置这种规范的代码啦
2遇到的问题 因为修改一点内容，就在油猴插件上面更新，然后在浏览器上面看效果，很不方便，所以我前期都是，在vscode上面写代码，功能效果，在控制台执行，这样可以大大提高效率
3直接上代码，看的更直观
// ==UserScript==
// @name 配置按钮权限
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author XXX
// @include http://dev.XXX.com:6800/home
// @include http://tes.XXX.com:8091/home
// @include http://uat.XXX.com:8091/home
// @include http://localhost:3000/home
// @grant none
// @require http://code.jquery.com/jquery-migrate-1.2.1.min.js
/* globals jQuery, $, waitForKeyElements */
// ==/UserScript==
(function() {
'use strict';
$(document).ready(function() {
const resourceArr = [
{
code: 'duty__add__',
resource: 'duty__add__',
address: '/DutyManager/#duty__add__',
type: 'Add'
},
{
code: 'duty_update_',
resource: 'duty_update_',
address: '/DutyManager/#duty_update_',
type: 'Edit'
},
{
code: 'duty__delete__',
resource: 'duty__delete__',
address: '/DutyManager/#duty__delete__',
type: 'Delete'
}
]
const menuName = "Position Management"
$('.nav-toggle')[2].click()
$('.resourceManager').parent()[0].click()
// 循环生成按钮资源
resourceArr.forEach((item, index) => {
setTimeout(()=>{
$('#system_resource__add__').click()
setTimeout(() => {
$('#ajax-modal').ready(function(){
$('input[name=resCode]')[0].value = item.code
$('input[name=resName]')[0].value = item.resource
$('input[name=resUrl]')[0].value = item.address
$('select[name=resType]')[0].value = 'F'
$('input[name=showIndex]')[0].value = index
$('button[type=submit]').click()
})
},1000)
}, 100)
})
// 菜单配置按钮
setTimeout(() => {
$('.title')[5].click()
setTimeout(() => {
$.each($("li .mt-checkbox"),function(i,n){
if ($(n).text() === menuName) {
$(n).click()
resourceArr.unshift(
{
type: 'Table'
}
)
resourceArr.forEach((item,index) => {
setTimeout(() => {
$('#system_menu_fun__add__').click()
setTimeout(() => {
$('#ajax-modal').ready(function(){
$('input[name=funName]')[0].value = item.type
item.type === 'Table' ? $('#radio6')[0].click() : $('#radio7')[0].click()
$.each($('.ms-list').eq(2).find('span'), function(val, span) {
if ($(span).text() === item.code) {
if (item.type === 'Table') {
return
} else {
$($('.form-control')[4])[0].value = $($(span)).value
}
$(span).click()
}
})
$('button[type=submit]').click()
})
},1000)
}, 3000);
})
}
})
},1000)
}, 4000)
});
})();
4在页面中，开启此脚本，就可以看程序自己‘表演’啦~~
四、其他油猴脚本，后续接着更新
刚写油猴脚本，需要学习的地方还有很多。不好之处请谅解，记录学习的日常，一起学习，一天一天变优秀哇~~
