TamperMonkey油猴/暴力猴浏览器脚本插件中文网(TMchina)

油猴脚本“微博视频下载” 开发及发布教程

[复制链接]
发表于 2019-12-13 09:04:59 | 显示全部楼层 |阅读模式

马上注册,结交更多网友,浏览器插件/脚本不再愁!

您需要 登录 才可以下载或查看,没有帐号?注册会员

x
y1.jpg

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

y2.jpg

真让人惊喜,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. })();
复制代码


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

  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. //视频下载按钮的html代码
  4. var down_btn_html = '<li>';
  5. down_btn_html += '<a href="javascript:void(0);" id="down_video_btn" class="S_txt2" title="视频下载">';
  6. down_btn_html += '<span class="pos">';
  7. down_btn_html += '<span class="line S_line1" node-type="comment_btn_text">';
  8. down_btn_html += '<span>';
  9. down_btn_html += '<em class="W_ficon ficon_video_v2 S_ficon">i</em>';
  10. down_btn_html += '<em>视频下载</em>';
  11. down_btn_html += '</span>';
  12. down_btn_html += '</span>';
  13. down_btn_html += '</span>';
  14. 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>';
  15. down_btn_html += ' </li>';

  16. //将以上拼接的html代码插入到网页里的ul标签中
  17. var ul_tag = $("div.WB_handle>ul");
  18. if (ul_tag) {
  19.     ul_tag.removeClass("WB_row_r3").addClass("WB_row_r4").append(down_btn_html);
  20. }
复制代码


y4.jpg

y5.jpg

最后一步,获取播放器(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.     $("#down_video_btn").click(function () {
  10.         if (video_url) {
  11.             videoTool.download(video_url, videoTool.getFileName(video_url, "/", "?"));
  12.         }
  13.     });
  14. });
复制代码


完整代码及效果演示:

  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.     //与元数据块中的@grant值相对应,功能是生成一个style样式
  15.     GM_addStyle('#down_video_btn{color:#fa7d3c;}');

  16.     //视频下载按钮的html代码
  17.     var down_btn_html = '<li>';
  18.     down_btn_html += '<a href="javascript:void(0);" id="down_video_btn" class="S_txt2" title="视频下载">';
  19.     down_btn_html += '<span class="pos">';
  20.     down_btn_html += '<span class="line S_line1" node-type="comment_btn_text">';
  21.     down_btn_html += '<span>';
  22.     down_btn_html += '<em class="W_ficon ficon_video_v2 S_ficon">i</em>';
  23.     down_btn_html += '<em>视频下载</em>';
  24.     down_btn_html += '</span>';
  25.     down_btn_html += '</span>';
  26.     down_btn_html += '</span>';
  27.     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>';
  28.     down_btn_html += ' </li>';

  29.     //将以上拼接的html代码插入到网页里的ul标签中
  30.     var ul_tag = $("div.WB_handle>ul");
  31.     if (ul_tag) {
  32.         ul_tag.removeClass("WB_row_r3").addClass("WB_row_r4").append(down_btn_html);
  33.     }

  34.     var videoTool = {
  35.         //获取文件名
  36.         getFileName: function (url, rule_start, rule_end) {
  37.                 var start = url.lastIndexOf(rule_start) + 1;
  38.                 var end = url.lastIndexOf(rule_end);
  39.                 return url.substring(start, end);
  40.             },
  41.             //弹出下载框
  42.             download: function (videoUrl, name) {
  43.                 var content = "file content!";
  44.                 var data = new Blob([content], {
  45.                     type: "text/plain;charset=UTF-8"
  46.                 });
  47.                 var downloadUrl = window.URL.createObjectURL(data);
  48.                 var anchor = document.createElement("a");
  49.                 anchor.href = videoUrl;
  50.                 anchor.download = name;
  51.                 anchor.click();
  52.                 window.URL.revokeObjectURL(data);
  53.             }
  54.     };

  55.     $(function () {
  56.         //获取播放器(video)对象
  57.         var video = $("video");
  58.         var video_url = null;
  59.         if (video) {
  60.             video_url = video.attr("src"); //获取视频链接地址
  61.         }

  62.         //执行下载按钮的单击事件并调用下载函数
  63.         $("#down_video_btn").click(function () {
  64.             if (video_url) {
  65.                 videoTool.download(video_url, videoTool.getFileName(video_url, "/", "?"));
  66.             }
  67.         });
  68.     });

  69. })();
复制代码


w.gif

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

g.gif

本文作者@nn200433

TM中文网 - 脚本安装指南

1、本站ZIP导入包一般命名类似为tmchina.net_xxx_script.zip,一般无需解压直接导入(导入不成功则解压看是否里面还有ZIP文件,有的话再导入)。
2、JS版为代码版,可在油猴/暴力猴控制台直接添加脚本的方式把JS文件内的代码复制粘贴进去,保存即可成功安装脚本。
3、脚本导入的相关教程《油猴脚本导入教程》/《暴力猴脚本导入教程


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

最近更新的脚本

免责声明

TMchina所发布的一切浏览器脚本及应用的帖子仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该应用,请支持开发者,若有VIP相关脚本,我们推荐您购买VIP得到更好的官方服务。(如有侵犯了您权益的应用请点此处联系我们处理

联系我们|Archiver|小黑屋|sitemap|, Processed in 0.081256 second(s), 12 queries , File On.   
快速回复 返回顶部 返回列表