阅读以下内容所需知识:
- javascript/jQuery基础知识【李炎恢的JavaScript教程(http://www.ycku/javascript/)(http://www.ycku/jquery/)】
- HTML基础知识【李炎恢的HTML5教程(http://www.ycku/html5/)】
一、油猴脚本插件的介绍与安装
1、介绍
简单的说就是往WEB页面嵌入本地脚本以改变页面的动作与风格
2、安装
1、chrome商店搜索 Violentmonkey(https://github/violentmonkey/violentmonkey/releases/download/v2.6.3/violentmonkey-2.6.3.crx) 并安装
2、本地安装,以QQ浏览器为例子:
- 首先下载 Violentmonkey(https://github/violentmonkey/violentmonkey/releases/download/v2.6.3/violentmonkey-2.6.3.crx) 的crx文件
- 然后进行如下操作(如图所示):打开浏览器-->应用中心-->管理我的应用-->将下好的crx拖到浏览器-->确认安装
备注:
问:可能会有人问为什么要使用 Violentmonkey(https://github/violentmonkey/violentmonkey/releases/download/v2.6.3/violentmonkey-2.6.3.crx) 而不是使用 Tampermonkey(https://chrome.google/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo) ?
答:因为 Violentmonkey(https://github/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/* | 描述脚本将执行的页面。该列表会被分析并展示到脚本的简介页面,以及 用于脚本分类。 |
@require | @require http://cdn.bootcss/jquery.min.js | 引用外部脚本到您的脚本 |
@updateURL @installURL, @downloadURL | 告知用户脚本管理器应该在哪个地址获取脚本更新。 | |
@license | 脚本所使用的许可协议名称或地址,该协议需包含用户是否允许二次分发 或修改 脚本的权利。不提供许可协议则表示用户仅允许个人使用且不得 二次分发;该协 议将在脚本的简介页面显示。 | |
@supportURL | 用户可获得该脚本技术支持的链接地址 (如:错误反馈系统、论坛、电子 邮件),该链接将显示在脚本的反馈页面。 | |
@contributionURL | 用于捐赠脚本作者的链接,该链接将显示在脚本的反馈页面。 | |
@contributionAmount | 建议捐赠金额,请配合 @contributionURL 使用。 | |
@compatible | 标记此脚本与某个浏览器兼容,兼容性信息将显示在脚本的简介页面上。 | |
@incompatible | 标记此脚本与某个浏览器不兼容,兼容性信息将显示在脚本的简介页面 上。 |
元数据块必须遵循以下格式:
// ==UserScript==
// @key value
// ==/UserScript==
备注:
- Greasy Fork 要读取的脚本元键值【https://greasyfork/zh-CN/help/meta-keys】
- Metadata Block - GreaseSpot Wiki (api文档)【https://wiki.greasespot/Metadata_Block】
2、实践是检验真理的唯一标准
以 微博视频(http://weibo/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/favicon.ico
// @name 微博视频下载助手
// @namespace [url=mailto:1649991905@qq]1649991905@qq[/url]
// @author test
// @description 下载微博视频
// @match *://weibo/tv/v/*
// @require http://cdn.bootcss/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
// @namespace Violentmonkey Scripts
// @match https://item.taobao/item.htm
// @grant none
// @version 1.0
// @author -
// @require https://cdn.jsdelivr/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> " + -->
"<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);
}
})
更多推荐
暴力油猴脚本教程
发布评论