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);
        }
    }

成品網址 撒花, 歡迎交流和支持