脚本权限 下面简单介绍一下grant指令那里可以填写的一些权限，详情请查看 油猴脚本文档 。这里就简单介绍几个常用的，可以调用的函数全部以GM_作为开头。
|
还有一些API没有介绍，请大家直接查看官方文档吧。 编写脚本 编写脚本就很简单了，编写到 等vagrant更新时候提醒我的脚本 前段时间了解了vagrant这个东西，感觉很有意思，准备研究一下，但是照着官网教程运行的时候，第一步就发生了错误。我上网一搜，原来我更新的virtualbox比较新，vagrant恰好不支持。但是如今几个月过去了，vagrant还是没有更新，所以我要写一个脚本，等到vagrant更新的时候，给我网页上弹出一个对话框。 首先访问 vagrant官网 ，然后就可以看到中间下载按钮上大大的版本号2.2.6了。因为版本肯定是不会倒退的，所以只要判断一下版本号不是2.2.6，就可以弹出提示了。通过F12开发者工具可以看到，这三个按钮其实都是链接，只不过显示成了按钮的样子，而且他们恰好都位于 为了能在更新的时候及时获取到提示，我需要脚本在所有网站上生效，来检测版本。但是这样做会导致另外一个问题，那就是每次打开一个网页都会运行一次检查vagrant的脚本，而这是完全不必要的。所以需要一个额外的判断，这就需要利用油猴提供的API来保存当前日期，只有每天第一次的时候才会执行检查代码。本来我想的很复杂，需要一个日期变量，然后还要额外一个变量保存是否是今天第一次更新。后来我发现我想的太多了，做法其实很简单。每天先获取一次日期，然后和事先保存的日期比较，如果不一样的话才执行脚本，并将日期设置为今天的日期；如果日期一样的话无事发生。 最后一个问题就是如何来判断版本号，有两种方法：第一种就是上面提到的，直接解析HTML代码并找到版本号；第二种是更直接的办法， 因为vagrant也是Github上开源的项目，所以可以直接调用Github的API来获取最新发布的版本号。可惜的是，第二种办法我试了一下居然不成功，不知为何，没办法获取到发布信息，但是换成其他项目就可以。所以最后没办法只好采用第一种办法。有兴趣的同学可以自己试一下第二种方法。 好了，所有相关的坑我都已经解释完毕了，相信大家应该很容易就可以看懂下面的代码，我就不介绍了。虽然看着简单，但是我其实还是踩了不少的坑，就这点代码花了我好几天的时间。而且确实这个代码写的也并不是很好，因为ajax取回来的代码是完整一个html页面，貌似用原版DOM API没办法解析，最后只好用jQuery的
// ==UserScript==
// @name remind_me_vagrant_update
// @namespace https://github.com/techstay/myscripts
// @version 0.1
// @description remind me if vagrant support virtualbox
// @author techstay
// @match *
// @require https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js
// @connect vagrantup.com
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_setClipboard
// @grant GM_log
// @grant GM_xmlhttpRequest
// @grant unsafeWindow
// @grant window.close
// @grant window.focus
// ==/UserScript==
(function () {
'use strict';
const CHECKED_DATE = 'checkedDate';
function checkDateEquals(a, b) {
return a.getFullYear() === b.getFullYear() &&
a.getMonth() === b.getMonth() &&
a.getDate() === b.getDate();
}
function checkVagrantVersion() {
GM_setValue(CHECKED_DATE, new Date());
GM_xmlhttpRequest({
"method": "GET",
"url": "https://www.vagrantup.com/",
"headers": {
"user-agent": 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36'
},
"onload": function (result) {
var list = jQuery.parseHTML(result.response);
jQuery.each(list, function (i, el) {
if (el.nodeName == 'HEADER') {
var header = jQuery.parseXML(el.innerHTML);
var version = header.getElementsByTagName('a')[1].textContent.replace('Download ', '');
if (version != '2.2.6') {
alert('Vagrant update!');
}
return false;
}
});
}
});
}
var today = new Date();
var lastCheckedDay = new Date(GM_getValue(CHECKED_DATE, new Date('2006-1-1')));
if (!checkDateEquals(lastCheckedDay, today)) {
checkVagrantVersion();
}
})();
调试脚本 编写脚本很难一次成功，大部分时间都花在了调试上面。调试油猴脚本的话有几种调试方法。 第一种方法就是最原始的打印日志，可以利用 第二种就是利用浏览器的调试功能，在脚本需要调试的地方插入 将文章同步复制到Csdn和思否编辑器的脚本 我的文章一般都是简书首发，然后复制粘贴到Csdn中，但是后来我发现每次手动操作太蠢了，为什么不用脚本来自动化呢？所以我又写了个脚本帮忙完成自动化工作。本来以为这个脚本应该比较简单，不过还是踩了很多坑才凑合把功能写出来。 首先是数据的保存，利用油猴提供的 然后又遇到一个问题，那就是如果编辑器自带了保存和恢复功能，很可能会把我复制过去的文章给覆盖了，所以需要等页面加载完之后，延迟一段时间才进行复制操作。然后我又谷歌了一番，差不多解决了这个问题。 然后遇到了一个非常棘手的问题，就是SF的编辑器设计比较复杂，没办法通过直接填充 最后一个问题就是简书上这个复制按钮应该如何实现，其实简书编辑器的工具栏倒是空了一些部分，我本来想把按钮直接加到那个上面。但是我发现貌似一旦添加东西，那个工具栏会自动重载取消更改，所以水平所限没做到，只好利用jQueryUI加了一个很丑的浮动按钮，而且因为拖动的时候会触发单击，没办法把按钮改成了双击触发。 最后的脚本就是下面这样的。相比第一个脚本多了几个打开新页面、删除变量、访问剪贴板的API。
// ==UserScript==
// @name copy_jianshu_to_csdn_and_segmentfault
// @namespace https://github.com/techstay/myscripts
// @version 0.1
// @description 将简书文章复制到csdn和思否编辑器中
// @author techstay
// @match https://editor.csdn.net/md/
// @match https://segmentfault.com/write
// @match https://www.jianshu.com/writer*
// @require https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js
// @require https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_deleteValue
// @grant unsafeWindow
// @grant GM_setClipboard
// @grant window.close
// @grant window.focus
// @grant GM_openInTab
// ==/UserScript==
(function () {
'use strict';
const SF_URL = 'https://segmentfault.com/write'
const CSDN_URL = 'https://editor.csdn.net/md/'
const SF_TITLE = 'sf_title'
const SF_CONTENT = 'sf_content'
const CSDN_TITLE = 'csdn_title'
const CSDN_CONTENT = 'csdn_content'
function saveArticle() {
GM_setValue(CSDN_TITLE, $('._24i7u').val())
GM_setValue(CSDN_CONTENT, $('#arthur-editor').val())
GM_setValue(SF_TITLE, $('._24i7u').val())
GM_setValue(SF_CONTENT, $('#arthur-editor').val())
}
function copyToCsdn() {
var title = GM_getValue(CSDN_TITLE, '')
var content = GM_getValue(CSDN_CONTENT, '')
if (title != '' && content != '') {
$('.article-bar__title').delay(2000).queue(function () {
$('.article-bar__title').val(title)
$('.editor__inner').text(content)
GM_deleteValue(CSDN_TITLE)
GM_deleteValue(CSDN_CONTENT)
$(this).dequeue()
})
}
}
function copyToSegmentFault() {
$(document).ready(function () {
var title = GM_getValue(SF_TITLE, '')
var content = GM_getValue(SF_CONTENT, '')
if (title != '' && content != '') {
$('#title').delay(2000).queue(function () {
$('#title').val(title)
GM_setClipboard(content, 'text')
GM_deleteValue(SF_TITLE)
GM_deleteValue(SF_CONTENT)
$(this).dequeue()
})
}
})
}
function addCopyButton() {
$('body').append('<div id="copyToCS">双击复制到CSDN和思否</div>')
$('#copyToCS').css('width', '200px')
$('#copyToCS').css('position', 'absolute')
$('#copyToCS').css('top', '70px')
$('#copyToCS').css('left', '350px')
$('#copyToCS').css('background-color', '#28a745')
$('#copyToCS').css('color', 'white')
$('#copyToCS').css('font-size', 'large')
$('#copyToCS').css('z-index', 100)
$('#copyToCS').css('border-radius', '25px')
$('#copyToCS').css('text-align', 'center')
$('#copyToCS').dblclick(function () {
saveArticle()
GM_openInTab(SF_URL, true)
GM_openInTab(CSDN_URL, true)
})
$('#copyToCS').draggable()
}
$(document).ready(function () {
if (window.location.href.startsWith('https://www.jianshu.com')) {
addCopyButton()
} else if (window.location.href.startsWith(SF_URL)) {
copyToSegmentFault()
} else if (window.location.href.startsWith(CSDN_URL)) {
copyToCsdn()
}
})
})()
其他注意事项 脚本编写流程 踩了几天坑，最后总结一下编写油猴脚本的一点步骤。首先要思考脚本的实现方式，需要用到什么API和权限，然后填写好脚本的注释信息。 然后将功能封装成函数的形式，最后在脚本末尾调用实现的函数。写的差不多的时候复制到浏览器中尝试运行。 遇到困难的时候，可能需要直接在F12开发者工具里进行调试。有些网页不用jQuery，为了方便，我们需要自己将jQuery导入到页面中，可以将下面的代码复制到浏览器控制台中。
var jq = document.createElement('script');
jq.src = "https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
发布脚本 更新URL 脚本做完了，自然是要共享出来让大家一起使用的。当然既然要发布，自然要支持更新方便日后维护。方法也很简单，直接在上面的注释部分添加 // @updateURL https://raw.githubusercontent.com/techstay/myscripts/master/tampermonkey/remind_me_vagrant_update.js 上传脚本 油猴脚本支持好几个网站，其中目前最主流的是 GreasyFork ，登录这个网站注册一个账号，然后进入用户页面选择提交脚本，然后填写脚本代码和各项信息。
这样脚本就提交上去了，其他人也可以搜索到并安装脚本了！
总结 到此这篇关于油猴脚本编写教程详解的文章就介绍到这了,更多相关油猴脚本编写教程内容请搜索社区以前的文章或继续浏览下面的相关文章希望大家以后多多支持社区！ | |||||||||||||||||||||||||||||||||||||||||||||
转播
