編寫油猴腳本

油猴Tampermonkey

一、介紹

Tampermonkey是一個瀏覽器插件，Tampermonkey通過加載第三方的腳本文件，改變頁面中的CSS和JS元素，可以讓整個網頁大變樣，也可以在網頁中增加額外的功能。

Tampermonkey文檔：https://www.tampermonkey.net/documentation.php?version=4.8.41&ext=dhdg&show=dhdg#_homepage

二、安裝

Tampermonkey下載

常用瀏覽器安裝：

 搜狗瀏覽器：       http://ie.sogou.com/app/search/Tampermonkey
 360安全瀏覽器： https://ext.se.360.cn/webstore/search/tampermonkey
 360極速瀏覽器：https://ext.chrome.360.cn/webstore/search/tampermonkey
 火狐瀏覽器：       https://addons.mozilla.org/zh-CN/firefox/addon/tampermonkey/?src=search
 遨游瀏覽器：      http://extension.maxthon.cn/detail/index.php?view_id=1680&category_id=
 歐朋瀏覽器：     https://addons.opera.com/zh-cn/extensions/details/tampermonkey-beta/?display=en

三、編寫腳本

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    // Your code here...
})();

@name就是腳本名，@namespace是腳本的主頁，@version是版本，@description是介紹，@author是作者，@match是匹配到什么頁面執行此腳本，@grant是需求權限。其他屬性在 油猴的文檔 里可以看到。

中間那個 // Your code here... 就是放置代碼的地方，這些代碼會在頁面加載完畢后運行。
這個腳本會在每次打開我的博客的任意頁面的時候，彈出對話框，顯示“Hello, world!”。在油猴編輯器里可以使用文件菜單來保存，也可以直接Ctrl+S。保存后的腳本會出現在已安裝腳本中。來打開我的博客首頁看一下效果。
同時，油猴腳本的圖標上會出現小紅點，上面寫着“1”，表示當前頁面有1個腳本正在運行。

以 微博視頻（http://weibo.com/tv/movie） 的下載輔助為例子。

在沒有下載工具的情況下，以上的圖片就是我們常用的下載方式。既然發現了包含mp4字樣的鏈接地址，不妨繼續到網頁標簽元素中在探索一番，說不定還會有其它的收獲。

真讓人驚喜，video元素中竟然有視頻直鏈。既然這樣，我們只需要獲取到video的src屬性，再往頁面上添加個下載按鈕就能撇棄資源嗅探的繁瑣下載方式了！！！
思路已經想好了，那么就開始動手寫代碼吧。

第一步，先把最基本的框架搭好。

// ==UserScript==
// @icon            http://weibo.com/favicon.ico
// @name            微博視頻下載助手
// @namespace       [url=mailto:[e-mail]][e-mail][/url]
// @author          獵隼丶止戈
// @description     下載微博視頻
// @match           *://weibo.com/tv/v/*
// @require         http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js
// @version         0.0.1
// @grant           GM_addStyle
// ==/UserScript==
(function () {
    'use strict';
})();

第二步，編寫下載彈出框與獲取文件名的工具對象

var videoTool = {
    //獲取文件名
    getFileName: function (url, rule_start, rule_end) {
            var start = url.lastIndexOf(rule_start) + 1;
            var end = url.lastIndexOf(rule_end);
            return url.substring(start, end);
        },
        //彈出下載框
        download: function (videoUrl, name) {
            var content = "file content!";
            var data = new Blob([content], {
                type: "text/plain;charset=UTF-8"
            });
            var downloadUrl = window.URL.createObjectURL(data);
            var anchor = document.createElement("a");
            anchor.href = videoUrl;
            anchor.download = name;
            anchor.click();
            window.URL.revokeObjectURL(data);
        }
};

第三步，生成一個下載按鈕，並嵌入頁面

//與元數據塊中的@grant值相對應，功能是生成一個style樣式
GM_addStyle('#down_video_btn{color:#fa7d3c;}');
//視頻下載按鈕的html代碼
var down_btn_html = '<li>';
down_btn_html += '<a href="javascript:void(0);" id="down_video_btn" class="S_txt2" title="視頻下載">';
down_btn_html += '<span class="pos">';
down_btn_html += '<span class="line S_line1" node-type="comment_btn_text">';
down_btn_html += '<span>';
down_btn_html += '<em class="W_ficon ficon_video_v2 S_ficon">i</em>';
down_btn_html += '<em>視頻下載</em>';
down_btn_html += '</span>';
down_btn_html += '</span>';
down_btn_html += '</span>';
down_btn_html += ' <span class="arrow"><span class="W_arrow_bor W_arrow_bor_t"><i class="S_line1"></i><em class="S_bg1_br"></em></span></span>';
down_btn_html += ' </li>';
//將以上拼接的html代碼插入到網頁里的ul標簽中
var ul_tag = $("div.WB_handle>ul");
if (ul_tag) {
    ul_tag.removeClass("WB_row_r3").addClass("WB_row_r4").append(down_btn_html);
}

圖片說明：

效果圖：

最后一步，獲取播放器（video）對象中的視頻地址並編寫下載按鈕的單擊事件

$(function () {
    //獲取播放器（video）對象
    var video = $("video");
    var video_url = null;
    if (video) {
        video_url = video.attr("src"); //獲取視頻鏈接地址
    }
    //執行下載按鈕的單擊事件並調用下載函數
    $("#down_video_btn").click(function () {
        if (video_url) {
            videoTool.download(video_url, videoTool.getFileName(video_url, "/", "?"));
        }
    });
});

完整代碼及效果演示：

// ==UserScript==
// @icon            http://weibo.com/favicon.ico
// @name            微博視頻下載助手
// @namespace       [url=mailto:[e-mail]][e-mail][/url]
// @author          獵隼丶止戈
// @description     下載微博視頻
// @match           *://weibo.com/tv/v/*
// @require         http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js
// @version         0.0.1
// @grant           GM_addStyle
// ==/UserScript==
(function () {
    'use strict';
    //與元數據塊中的@grant值相對應，功能是生成一個style樣式
    GM_addStyle('#down_video_btn{color:#fa7d3c;}');
    //視頻下載按鈕的html代碼
    var down_btn_html = '<li>';
    down_btn_html += '<a href="javascript:void(0);" id="down_video_btn" class="S_txt2" title="視頻下載">';
    down_btn_html += '<span class="pos">';
    down_btn_html += '<span class="line S_line1" node-type="comment_btn_text">';
    down_btn_html += '<span>';
    down_btn_html += '<em class="W_ficon ficon_video_v2 S_ficon">i</em>';
    down_btn_html += '<em>視頻下載</em>';
    down_btn_html += '</span>';
    down_btn_html += '</span>';
    down_btn_html += '</span>';
    down_btn_html += ' <span class="arrow"><span class="W_arrow_bor W_arrow_bor_t"><i class="S_line1"></i><em class="S_bg1_br"></em></span></span>';
    down_btn_html += ' </li>';
    //將以上拼接的html代碼插入到網頁里的ul標簽中
    var ul_tag = $("div.WB_handle>ul");
    if (ul_tag) {
        ul_tag.removeClass("WB_row_r3").addClass("WB_row_r4").append(down_btn_html);
    }
    var videoTool = {
        //獲取文件名
        getFileName: function (url, rule_start, rule_end) {
                var start = url.lastIndexOf(rule_start) + 1;
                var end = url.lastIndexOf(rule_end);
                return url.substring(start, end);
            },
            //彈出下載框
            download: function (videoUrl, name) {
                var content = "file content!";
                var data = new Blob([content], {
                    type: "text/plain;charset=UTF-8"
                });
                var downloadUrl = window.URL.createObjectURL(data);
                var anchor = document.createElement("a");
                anchor.href = videoUrl;
                anchor.download = name;
                anchor.click();
                window.URL.revokeObjectURL(data);
            }
    };
    $(function () {
        //獲取播放器（video）對象
        var video = $("video");
        var video_url = null;
        if (video) {
            video_url = video.attr("src"); //獲取視頻鏈接地址
        }
        //執行下載按鈕的單擊事件並調用下載函數
        $("#down_video_btn").click(function () {
            if (video_url) {
                videoTool.download(video_url, videoTool.getFileName(video_url, "/", "?"));
            }
        });
    });
})();