油猴脚本的编写 |
您所在的位置：网站首页 › 启动脚本怎么写 › 油猴脚本的编写 |
油猴脚本的编写
|
前段时因为项目有重复操作配置权限按钮的需求，每次重复性体力劳动，需要好几分钟，如果页面多，时间更多，这怎么能忍得了，于是我研究起了油猴插件，自己写脚本，让程序去做这些重复性的工作，用完以后的感觉就是两个字：真香，哈哈，话不多说开始说一下油猴的使用吧，看完，您也可以编写一个简单的脚本啦 一、安装油猴很多浏览器商店都可以搜到这个浏览器，直接搜索安装就可以了，但是谷歌不fanqiang的情况下，无法直接用，但是我找了编译过的文件，也可以安装 在浏览器拓展程序中，可以看到安装好的油猴 1、安装完成，在浏览器的上方，会出现一个油猴的图标，点击图标，点击添加新脚本
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在页面中，开启此脚本，就可以看程序自己‘表演’啦~~ 四、其他油猴脚本，后续接着更新刚写油猴脚本，需要学习的地方还有很多。不好之处请谅解，记录学习的日常，一起学习，一天一天变优秀哇~~ |
【本文地址】