暴力油猴脚本教程

最新推荐文章于 2024-05-11 09:44:50 发布

qq2276031

最新推荐文章于 2024-05-11 09:44:50 发布

阅读量8.4k

点赞数 5

分类专栏： javascript

本文链接：https://blog.csdn.net/qq2276031/article/details/117774423

版权

javascript 专栏收录该内容

22 篇文章 5 订阅

订阅专栏

阅读以下内容所需知识：

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

一、油猴脚本插件的介绍与安装
1、介绍
简单的说就是往WEB页面嵌入本地脚本以改变页面的动作与风格
2、安装
1、chrome商店搜索 Violentmonkey（https://github.com/violentmonkey/violentmonkey/releases/download/v2.6.3/violentmonkey-2.6.3.crx）并安装
2、本地安装，以QQ浏览器为例子：

首先下载 Violentmonkey（https://github.com/violentmonkey/violentmonkey/releases/download/v2.6.3/violentmonkey-2.6.3.crx）的crx文件
然后进行如下操作（如图所示）：打开浏览器-->应用中心-->管理我的应用-->将下好的crx拖到浏览器-->确认安装

备注：
问：可能会有人问为什么要使用 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）有搜索该网站脚本以及同步功能，更人性化、最主要是界面长得好看啊。如图所示：

二、教程
1、先来了解下脚本的元数据块
元数据块是描述脚本的一个用户脚本部分。它通常包含脚本名称，命名空间，描述和包含和排除规则。元数据块出现在JavaScript行注释中，可能会出现在脚本内的任何位置，但通常靠近文件的顶部。

键	示例	备注
@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		标记此脚本与某个浏览器不兼容，兼容性信息将显示在脚本的简介页面上。

元数据块必须遵循以下格式：

// ==UserScript==
// @key value
// ==/UserScript==

备注：

Greasy Fork 要读取的脚本元键值【https://greasyfork.org/zh-CN/help/meta-keys】
Metadata Block - GreaseSpot Wiki （api文档）【https://wiki.greasespot.net/Metadata_Block】

2、实践是检验真理的唯一标准
以微博视频（http://weibo.com/tv/movie）的下载辅助为例子。

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

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

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

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

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:1649991905@qq.com]1649991905@qq.com[/url]
// @author          test
// @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, "/", "?"));
            }
        });
    });
 
})();

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

例子:

// ==UserScript==
// @name        New script - taobao.com
// @namespace   Violentmonkey Scripts
// @match       https://item.taobao.com/item.htm
// @grant       none
// @version     1.0
// @author      -
// @require     https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js
// @description 2021/6/17下午2:08:40
// ==/UserScript==
$(function() {
  'use strict'
  
  //创建菜单
  setMenu()
  

  
  function start() {
    changeBF(document.querySelector("#rwl-start"), "#fff", "#67c23a")
    changeBF(document.querySelector("#rwl-close"), "rgb(96, 98, 102)", "#fff")

    console.log('start')
     
  }
  
  function close() {
    changeBF(document.querySelector("#rwl-close"), "#fff", "#f56c6c")
    changeBF(document.querySelector("#rwl-start"), "rgb(96, 98, 102)", "#fff")
    
    console.log('close')
  }
  
  function changeBF(e, f, b) {
    e.style.color = f
    e.style.backgroundColor = b
  }
  

  
  function setMenu(){
            var oldEditBox = document.querySelector("#rwl-setMenu");
        
            if(oldEditBox){
                oldEditBox.parentNode.removeChild(oldEditBox);
                return;
            }
            // var userSetting = GM_getValue("rwl_userData");
            var upload_checked = "";
            var btnchecked =  ''
             // style button
            let cssText = 
                  "border-radius: 50%;" +
                  "padding: 12px;" +
                  // "padding: 12px 20px;" +
                  "display: inline-block;" +
                  "line-height: 1;" +
                  "cursor: pointer;" +
                  "transition: .1s;" +
                  "margin: 0;" +
                  "outline: none;" +
                  "box-sizing: border-box;" +
                  "text-align: center;" +
                  "color: #606266;" +
                  "border: 1px solid #dcdfe6;" +
                  "font-size: 14px;"
  
            var odom = document.createElement("div");
            odom.id = "rwl-setMenu";
            odom.style.cssText ="position: fixed;" +
                "top: 100px;" +
                "right: 20px;" +
                "z-index: 1000;";+
              
                // "padding: 10px;" +
                // "background: #fff;" +
                "border-radius: 4px;";

            var innerH = "" +
                "<button id='rwl-start'>开</button> <br><br>" +
                <!--"<button id='rwl-close' onclick='this.parentNode.parentNode.removeChild(this.parentNode);' title='如果无法关闭 请刷新界面' >关闭</qxinbutton> &nbsp;&nbsp;&nbsp;" + -->
                "<button id='rwl-close'>关</button>" +
                ""
            "";
            odom.innerHTML = innerH;
            document.body.appendChild(odom);
            
                
            document.querySelector("#rwl-start").style.cssText = cssText + "background: #fff;"
            document.querySelector("#rwl-close").style.cssText = cssText + "background: #f56c6c;" + "color:#fff"
            
            document.querySelector("#rwl-start").addEventListener("click",start);
            document.querySelector("#rwl-close").addEventListener("click",close);
 
        }
  

  
 
})

qq2276031

关注

5
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
暴力油猴脚本教程

阅读以下内容所需知识：javascript/jQuery基础知识【李炎恢的JavaScript教程（http://www.ycku.com/javascript/）（http://www.ycku.com/jquery/）】 HTML基础知识【李炎恢的HTML5教程（http://www.ycku.com/html5/）】一、油猴脚本插件的介绍与安装1、介绍简单的说就是往WEB页面嵌入本地脚本以改变页面的动作与风格2、安装1、chrome商店搜索 Violentmonkey（https://git
复制链接

扫一扫

专栏目录