TamperMonkey油猴/暴力猴浏览器脚本插件中文网（原TMchina）

标题: 油猴脚本“微博视频下载” 开发及发布教程 [打印本页]

---

作者: 疯子先生    时间: 2019-12-13 09:04
标题: 油猴脚本“微博视频下载” 开发及发布教程
(, 下载次数: 402)

上传

点击文件名下载附件

在没有下载工具的情况下，以上的图片就是我们常用的下载方式。既然发现了包含mp4字样的链接地址，不妨继续到网页标签元素中在探索一番，说不定还会有其它的收获。

(, 下载次数: 410)

上传

点击文件名下载附件

真让人惊喜，video元素中竟然有视频直链。既然这样，我们只需要获取到video的src属性，再往页面上添加个下载按钮就能撇弃资源嗅探的繁琐下载方式了！！！
思路已经想好了，那么就开始动手写代码吧。

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

1. // ==UserScript==
   
2. // @icon            http://weibo.com/favicon.ico
   
3. // @name            微博视频下载助手
   
4. // @namespace       [url=mailto:1649991905@qq.com]1649991905@qq.com[/url]
   
5. // @author          猎隼丶止戈
   
6. // @description     下载微博视频
   
7. // @match           *://weibo.com/tv/v/*
   
8. // @require         http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js
   
9. // @version         0.0.1
   
10. // @grant           GM_addStyle
    
11. // ==/UserScript==
    
12. (function () {
    
13.     'use strict';
    
14. 
    
15. })();

复制代码

第二步，编写下载弹出框与获取文件名的工具对象

1. var videoTool = {
   
2.     //获取文件名
   
3.     getFileName: function (url, rule_start, rule_end) {
   
4.             var start = url.lastIndexOf(rule_start) + 1;
   
5.             var end = url.lastIndexOf(rule_end);
   
6.             return url.substring(start, end);
   
7.         },
   
8.         //弹出下载框
   
9.         download: function (videoUrl, name) {
   
10.             var content = "file content!";
    
11.             var data = new Blob([content], {
    
12.                 type: "text/plain;charset=UTF-8"
    
13.             });
    
14.             var downloadUrl = window.URL.createObjectURL(data);
    
15.             var anchor = document.createElement("a");
    
16.             anchor.href = videoUrl;
    
17.             anchor.download = name;
    
18.             anchor.click();
    
19.             window.URL.revokeObjectURL(data);
    
20.         }
    
21. };

复制代码

第三步，生成一个下载按钮，并嵌入页面

1. //与元数据块中的@grant值相对应，功能是生成一个style样式
   
2. GM_addStyle('#down_video_btn{color:#fa7d3c;}');
   
3. 
   
4. //视频下载按钮的html代码
   
5. var down_btn_html = '<li>';
   
6. down_btn_html += '<a href="javascript:void(0);" id="down_video_btn" class="S_txt2" title="视频下载">';
   
7. down_btn_html += '<span class="pos">';
   
8. down_btn_html += '<span class="line S_line1" node-type="comment_btn_text">';
   
9. down_btn_html += '<span>';
   
10. down_btn_html += '<em class="W_ficon ficon_video_v2 S_ficon">i</em>';
    
11. down_btn_html += '<em>视频下载</em>';
    
12. down_btn_html += '</span>';
    
13. down_btn_html += '</span>';
    
14. down_btn_html += '</span>';
    
15. 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>';
    
16. down_btn_html += ' </li>';
    
17. 
    
18. //将以上拼接的html代码插入到网页里的ul标签中
    
19. var ul_tag = $("div.WB_handle>ul");
    
20. if (ul_tag) {
    
21.     ul_tag.removeClass("WB_row_r3").addClass("WB_row_r4").append(down_btn_html);
    
22. }

复制代码

(, 下载次数: 411)

上传

点击文件名下载附件

(, 下载次数: 401)

上传

点击文件名下载附件

最后一步，获取播放器（video）对象中的视频地址并编写下载按钮的单击事件

1. $(function () {
   
2.     //获取播放器（video）对象
   
3.     var video = $("video");
   
4.     var video_url = null;
   
5.     if (video) {
   
6.         video_url = video.attr("src"); //获取视频链接地址
   
7.     }
   
8. 
   
9.     //执行下载按钮的单击事件并调用下载函数
   
10.     $("#down_video_btn").click(function () {
    
11.         if (video_url) {
    
12.             videoTool.download(video_url, videoTool.getFileName(video_url, "/", "?"));
    
13.         }
    
14.     });
    
15. });

复制代码

完整代码及效果演示：

1. // ==UserScript==
   
2. // @icon            http://weibo.com/favicon.ico
   
3. // @name            微博视频下载助手
   
4. // @namespace       [url=mailto:1649991905@qq.com]1649991905@qq.com[/url]
   
5. // @author          猎隼丶止戈
   
6. // @description     下载微博视频
   
7. // @match           *://weibo.com/tv/v/*
   
8. // @require         http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js
   
9. // @version         0.0.1
   
10. // @grant           GM_addStyle
    
11. // ==/UserScript==
    
12. (function () {
    
13.     'use strict';
    
14. 
    
15.     //与元数据块中的@grant值相对应，功能是生成一个style样式
    
16.     GM_addStyle('#down_video_btn{color:#fa7d3c;}');
    
17. 
    
18.     //视频下载按钮的html代码
    
19.     var down_btn_html = '<li>';
    
20.     down_btn_html += '<a href="javascript:void(0);" id="down_video_btn" class="S_txt2" title="视频下载">';
    
21.     down_btn_html += '<span class="pos">';
    
22.     down_btn_html += '<span class="line S_line1" node-type="comment_btn_text">';
    
23.     down_btn_html += '<span>';
    
24.     down_btn_html += '<em class="W_ficon ficon_video_v2 S_ficon">i</em>';
    
25.     down_btn_html += '<em>视频下载</em>';
    
26.     down_btn_html += '</span>';
    
27.     down_btn_html += '</span>';
    
28.     down_btn_html += '</span>';
    
29.     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>';
    
30.     down_btn_html += ' </li>';
    
31. 
    
32.     //将以上拼接的html代码插入到网页里的ul标签中
    
33.     var ul_tag = $("div.WB_handle>ul");
    
34.     if (ul_tag) {
    
35.         ul_tag.removeClass("WB_row_r3").addClass("WB_row_r4").append(down_btn_html);
    
36.     }
    
37. 
    
38.     var videoTool = {
    
39.         //获取文件名
    
40.         getFileName: function (url, rule_start, rule_end) {
    
41.                 var start = url.lastIndexOf(rule_start) + 1;
    
42.                 var end = url.lastIndexOf(rule_end);
    
43.                 return url.substring(start, end);
    
44.             },
    
45.             //弹出下载框
    
46.             download: function (videoUrl, name) {
    
47.                 var content = "file content!";
    
48.                 var data = new Blob([content], {
    
49.                     type: "text/plain;charset=UTF-8"
    
50.                 });
    
51.                 var downloadUrl = window.URL.createObjectURL(data);
    
52.                 var anchor = document.createElement("a");
    
53.                 anchor.href = videoUrl;
    
54.                 anchor.download = name;
    
55.                 anchor.click();
    
56.                 window.URL.revokeObjectURL(data);
    
57.             }
    
58.     };
    
59. 
    
60.     $(function () {
    
61.         //获取播放器（video）对象
    
62.         var video = $("video");
    
63.         var video_url = null;
    
64.         if (video) {
    
65.             video_url = video.attr("src"); //获取视频链接地址
    
66.         }
    
67. 
    
68.         //执行下载按钮的单击事件并调用下载函数
    
69.         $("#down_video_btn").click(function () {
    
70.             if (video_url) {
    
71.                 videoTool.download(video_url, videoTool.getFileName(video_url, "/", "?"));
    
72.             }
    
73.         });
    
74.     });
    
75. 
    
76. })();

复制代码

(, 下载次数: 401)

上传

点击文件名下载附件

脚本发布，首先得有个 greasyfork 帐号。点击 个人中心（即自己的昵称）-->提交脚本-->按要求填写脚本信息-->提交
脚本发布

(, 下载次数: 405)

上传

点击文件名下载附件

本文作者@nn200433

---

欢迎光临 TamperMonkey油猴/暴力猴浏览器脚本插件中文网（原TMchina） (https://tampermonkey.cn/)

Powered by Discuz! X3.3