【教程、无技术含量】简单的油猴脚本编写教程

时间  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教程