HOWTO 如何写一个油猴子(篡改猴 / Tampermonkey)脚本

什么是油猴子?

它是一款插件，用来在浏览器里运行自定义的js脚本，以弥补某些网站的不够人性化问题。

最初油猴子诞生于firefox平台，以上面优势得到前端开发者的青睐。最初的油猴子叫Greasemonkey，后来出现了新的插件Tampermonkey，它兼容了油猴子的功能，并且支持跨浏览器运行。因此如今你们都广泛称Tampermonkey为油猴子。

说到浏览器，你们用的可能都不太同样，有用firefox，chrome的，也有用微软edge，苹果safari的，还有用chromium内核的360和qq浏览器，以及一些老旧的浏览器。

Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器，它适用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox。

360/qq浏览器应该去他们的应用商店查询
safari下的插件是付费的 （10.15之后变为付费，safari的win版并不支持插件功能）

如何安装Tampermonkey ？

网址： https://www.tampermonkey.net/
下载适合本身浏览器的插件

插件能干什么 ？

有了插件并不能实现什么功能，他只是一个平台，具体功能须要你去如下网站下载。
GreasyFork 和 OpenUserJS

这里已经有不少的功能脚本，已经能基本知足需求，搜索到满意的脚本点击安装便可。Tampermonkey支持脚本备份导出功能，方便你在不一样平台共享脚本。

若是还知足不了需求，那就继续看下面的文章。

如何写一个脚本 ？

首先，要写一个脚本须要你知足一下技术需求：

1. 掌握js脚本
2. 掌握jquery模块 （可选）
3. 正则表达式 （可选）
4. 用控制台调试
5. 发布脚本 （可选）

其中，jquery并非必需要掌握，可是懂了它以后你的效率会事半功倍，不过这个模块有些网站会失效，这时候就须要用到基本js控制网页元素了。

建立一个脚本

点击插件按钮，新建脚本：

它包含了脚本的描述和结构，做为本身努力的结晶，你须要附上你的我的网站，以及本身的名字。同时对于脚本最重要的是脚本名称，脚本版本号，对脚本的描述，以及匹配网站。

这些内容随时均可以更改，包括脚本名称。

而最下面是脚本的内容，脚本默认启动严格模式，严格的好处是提醒代码出错。

代码放置的位置就在Your code here中

匹配网站

若是是想全网站匹配，可使用

// @include     *

若是包含具体网址能够用

• 只匹配b站首页

// @match        https://www.bilibili.com/

• 匹配全网

// @match            http*://*/*

or

// @include *

• 排除匹配

// @exclude https://mail.google.com/*

扩展支持

由于提到用到jquery，因此我这里加入了它

// @require https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js

其余扩展根据你的需求来，你能够加入vue扩展，但尽可能从简，不少插件甚至为了适应更多网站，甚至抛弃了jquery

写怎样的一个脚本

为某个需求而生。
这里我有个想法，百度网盘在网上普遍分布，但每次点击都要复制密码，十分麻烦，能不能经过脚本实现大部分功能？

网上有专用脚原本实现网盘的密码复制和自动填充，我这里看看本身可否实现。

试试吧～～

写代码

如今能够正式开始写代码了，但别急，代码在这里写，既晦涩又不直观，打开控制台吧，固然打开控制台以前，先要打开对应的网站，不然打开的控制台也没法有效起做用。

• 首先咱们要知道网站的网址：window.location.href很方便就获得了，你能够在控制台试试看

• 其次，如何得到网址的二级域名呢？答案是正则：\/\/(.+?\..*?)(\/|\?)

  • 我来简单阐述一下正则的做用，它会查询网址以//开头并以/或？结束的字符串，某些字符是命令字符，因此要表达它的本意须要在前面加上\构成\?来表达本来的意思。
• 正则有了，那么执行正则获得域名
• 判断域名若是不是百度网盘，那就搜索网盘和提取码，并把密码经过#整合到网盘连接上

• 非百度网盘网址处理：

  • 全局搜索提取码关键字
  • 而后经过正则(码|问)[\s|:|：]*([a-zA-Z0-9]{4})把提取码复制出来
  • 经过对提取码附近的连接，找到跳转链连接：`find('a[href*="pan.baidu.com"]')
  • 提取它的连接 ： attr('href')

  • 拼接便可

    • 特殊：某些网站并不会直接贴出百度网站的网址，而是增长了个统计跳转连接，这时候须要ajax解析展开
    • 判断非百度网址if(link.indexOf('https://pan.baidu.com')!=0)
    • 执行解析$.ajax({type:'get',url:link, success:function(res){
    • 经过正则提取解析的百度网盘网址：(https:\/\/pan.baidu.com\/.*?\/(\d|\w|-)+)
    • 拼接网盘网址和提取码

• 百度网盘网址处理：

  • 正则解析网址上的提取码：#([a-zA-Z0-9]{4})
  • 填入到惟一输入框中：$('input').first().val(提取码)
  • 自动打开，咱比较懒 $('a[title="提取文件"]').click()
• 脚本写完，多个网站验证，还蛮不错的

提交脚本到网站

1. 注册一个greasyfork.org的帐号

2. 须要准备以下内容，方便了解脚本的做用，便于下载

   1. 脚本代码自己
   2. 对脚本的描述
   3. 脚本的运行截图
3. 提交你的脚本
4. 之后脚本更新须要再回来更新脚本，记住版本号是须要迭代的

成品

成品网址

var label = 'Zszen '
    var regexp_codeback = /#([a-zA-Z0-9]{4})/
    var regexp_code = /(码|问)[\s|:|：]*([a-zA-Z0-9]{4})/
    var regexp_url = /(https:\/\/pan.baidu.com\/.*?\/(\d|\w|-)+)/
    var url = window.location.href;
    var res = /\/\/(.+?\..*?)(\/|\?)/.exec(url);
    var site = res[1];
    console.log(site);
    //parse
    if(site=="pan.baidu.com"){
        $('input').first().val(regexp_codeback.exec(url)[1]);
        $('a[title="提取文件"]').click();
    }else{//deal
        var area = $(':contains("提取码")').last();
        if(area.length>0) replaceUrl(area);
        area = $(':contains("密码:")').last();
        if(area.length>0) replaceUrl(area);
    }

    function replaceUrl(area){
        var code = regexp_code.exec(area.text())[2];
        var atag = area.find('a[href*="pan.baidu.com"]');
        if(atag.length==0){
            atag = area.find('a');
        }
        var link = atag.attr('href');
        console.log(link);
        if(link.indexOf('https://pan.baidu.com')!=0){
            $.ajax({type:'get',url:link, success:function(res){
                link = regexp_url.exec(res)[0];
                area.find('a').attr('href', link + "#" + code);
            }});
        }else{
            area.find('a').attr('href', link + "#" + code);
        }
    }

成品网址 撒花, 欢迎交流和支持