【教程、無技術含量】簡單的油猴腳本編寫教程

時間  2019-12-20
標籤 教程、無技術含量 簡單 腳本 編寫 教程 简体版
原文   原文鏈接

不建議閱讀者：javascript

  • 前端大神
  • 想要深刻學習（涉及到分析挖掘調用網站中js算法/本身寫算法）油猴腳本的讀者【備註：樓主也不會，樓主也很絕望啊...】

閱讀如下內容所需知識：php

  • javascript/jQuery基礎知識【李炎恢的JavaScript教程（http://www.ycku.com/javascript/）（http://www.ycku.com/jquery/）】
  • HTML基礎知識【李炎恢的HTML5教程（http://www.ycku.com/html5/）】




1、油猴腳本插件的介紹與安裝
一、介紹
簡單的說就是往WEB頁面嵌入本地腳本以改變頁面的動做與風格
二、安裝
一、chrome商店搜索 Violentmonkey（https://github.com/violentmonkey/violentmonkey/releases/download/v2.6.3/violentmonkey-2.6.3.crx） 並安裝
二、本地安裝，以QQ瀏覽器爲例子：css

  • 首先下載  Violentmonkey（https://github.com/violentmonkey/violentmonkey/releases/download/v2.6.3/violentmonkey-2.6.3.crx） 的crx文件
  • 而後進行以下操做（如圖所示）：打開瀏覽器-->應用中心-->管理個人應用-->將下好的crx拖到瀏覽器-->確認安裝

<ignore_js_op>html

暴力猴安裝前端

暴力猴安裝 
備註：
百度雲盤：連接: http://pan.baidu.com/s/1pLLkU2R 密碼: rwkg
問：可能會有人問爲何要使用 Violentmonkey（https://github.com/violentmonkey/violentmonkey/releases/download/v2.6.3/violentmonkey-2.6.3.crx） 而不是使用 Tampermonkey（https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo） ?
答：由於 Violentmonkey（https://github.com/violentmonkey/violentmonkey/releases/download/v2.6.3/violentmonkey-2.6.3.crx） 有搜索該網站腳本以及同步功能，更人性化、最主要是界面長得好看啊。如圖所示：
<ignore_js_op>html5

暴力猴java

暴力猴



2、教程
一、先來了解下腳本的元數據塊
元數據塊是描述腳本的一個用戶腳本部分。它一般包含腳本名稱，命名空間，描述和包含和排除規則。元數據塊出如今JavaScript行註釋中，可能會出如今腳本內的任何位置， 但一般靠近文件的頂部。node

鍵 示例 備註
@name @name  腳本名稱 腳本的名稱。該項將顯示在頁面的標題以及連接內容，必填項。
@description @description  腳本功能描述 腳本功能的描述，顯示在腳本標題下面，必填項。
@namespace   @namespace 及 @name 這兩個屬性將幫助用戶腳本管理器判斷是否已安  裝該腳本。
@version @version  0.0.1 腳本的版本標記將使用 Mozilla 版本格式 並顯示於腳本的簡介頁面，必填  項。
@include
@exclude
@match		 @match  *://www.52pojie.cn/* 描述腳本將執行的頁面。該列表會被分析並展現到腳本的簡介頁面，以及  用於腳本分類。
@require @require http://cdn.bootcss.com/jquery.min.js 引用外部腳本到您的腳本
@updateURL
@installURL,  @downloadURL		   告知用戶腳本管理器應該在哪一個地址獲取腳本更新。
@license   腳本所使用的許可協議名稱或地址，該協議需包含用戶是否容許二次分發  或修改  腳本的權利。不提供許可協議則表示用戶僅容許我的使用且不得  二次分發；該協  議將在腳本的簡介頁面顯示。
@supportURL   用戶可得到該腳本技術支持的連接地址 (如：錯誤反饋系統、論壇、電子  郵件)，該連接將顯示在腳本的反饋頁面。
@contributionURL   用於捐贈腳本做者的連接，該連接將顯示在腳本的反饋頁面。
@contributionAmount   建議捐贈金額，請配合 @contributionURL 使用。
@compatible   標記此腳本與某個瀏覽器兼容，兼容性信息將顯示在腳本的簡介頁面上。
@incompatible   標記此腳本與某個瀏覽器不兼容，兼容性信息將顯示在腳本的簡介頁面  上。


元數據塊必須遵循如下格式：jquery

[JavaScript]  純文本查看 複製代碼
?
1
2
3
// ==UserScript==
// @key value
// ==/UserScript==



備註：git

  • Greasy Fork 要讀取的腳本元鍵值【https://greasyfork.org/zh-CN/help/meta-keys】
  • Metadata Block - GreaseSpot Wiki （api文檔）【https://wiki.greasespot.net/Metadata_Block】



二、實踐是檢驗真理的惟一標準
以 微博視頻（http://weibo.com/tv/movie） 的下載輔助爲例子。


<ignore_js_op>1.jpg
在沒有下載工具的狀況下，以上的圖片就是咱們經常使用的下載方式。既然發現了包含mp4字樣的連接地址，不妨繼續到網頁標籤元素中在探索一番，說不定還會有其它的收穫。

<ignore_js_op>

圖 2-2

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

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

[JavaScript]  純文本查看 複製代碼
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
// ==UserScript==
// @icon            http://weibo.com/favicon.ico
// @name            微博視頻下載助手
// @namespace       [url=mailto:1649991905@qq.com]1649991905@qq.com[/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' ;
 
})();


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

[JavaScript]  純文本查看 複製代碼
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
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);
         }
};


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

[JavaScript]  純文本查看 複製代碼
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
//與元數據塊中的@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);
}


圖片說明：
<ignore_js_op>

圖 2-3

圖 2-3 

效果圖：
<ignore_js_op>

圖 2-4

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

[JavaScript]  純文本查看 複製代碼
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
$( 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, "/" , "?" ));
         }
     });
});



完整代碼及效果演示：

[JavaScript]  純文本查看 複製代碼
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
// ==UserScript==
// @icon            http://weibo.com/favicon.ico
// @name            微博視頻下載助手
// @namespace       [url=mailto:1649991905@qq.com]1649991905@qq.com[/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, "/" , "?" ));
             }
         });
     });
 
})();


<ignore_js_op>

腳本效果

腳本效果 


腳本發佈，首先得有個 greasyfork 賬號。點擊 我的中心（即本身的暱稱）-->提交腳本-->按要求填寫腳本信息-->提交
<ignore_js_op>

腳本發佈

腳本發佈 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程