B站素材库平台下载按钮【tampermonkey脚本】
本帖最后由 天空宫阙 于 2022-4-28 15:40 编辑# B站素材库平台 视频下载
## 介绍
目标网站，B站素材库平台
```
https://cool.bilibili.com/square/video
```
B站素材库平台，有比较多质量还不错的素材，比如nice，黑人流泪，土拨鼠尖叫，还有很多不错的绿幕素材，但是网页端竟然不允许下载，这就不方便在`PR`中使用。**可是给我预览，不给我下载，好像不太可能吧**，写了一个`tampermonkey`脚本，使用后就可以出现下载按钮了。
## 脚本主页地址，安装地址
tampermonkey脚本已经发布
再安装tampermonkey脚本管理器后，就可以去以下地址安装
```
https://greasyfork.org/zh-CN/scripts/443506-b%E7%AB%99%E7%B4%A0%E6%9D%90%E5%BA%93%E5%B9%B3%E5%8F%B0%E4%B8%8B%E8%BD%BD%E6%8C%89%E9%92%AE
```
## 如果对实现原理不感兴趣可以不用往下看了
这个脚本非常简单，去掉样式的代码，核心代码就十几行，但感觉还是有地方可以讲的，比如
1. chrome阻止下载不安全的内容 https://blog.chromium.org/2020/02/protecting-users-from-insecure.html ，以及绕过的方法
2. 在tampermonkey的执行时间设置成`@run-at document-idle`仍然过早，使用`@run-at context-menu`时发现该网页屏蔽了鼠标右键，这个时候使用setTimeout 延迟执行基本可以满足要求
3. 最后即使设置了a标签的download属性，仍然无法改变下载文件的名字，这很奇怪
4. 总之脚本不难，因为一些规则或保护遇到了不少困难。
##
2022.4.28更新
总体来说我写tampermonkey脚本很少，还是个新手，如果发现我有讲的不当的地方，欢迎在评论区指正。
首先我的目的就是可以下载视频，可以想到的方法有
| 方法 | 特点 |
| ----------------------------------------------------- | ---------------------------------------- |
| 1.直接按F12打开浏览器开发者工具审查元素得到视频的链接 | 无需额外安装插件或脚本，但使用不是很方便 |
| 2. 添加一个下载的按钮(button)或链接(a标签) | 使用方便，依赖tampermonkey脚本 |
| 3. 解除网页的右键限制 | 使用方便，依赖tampermonkey脚本 |
**以上的方便不仅适用于目标网站，对于获取其他受限制的网站（没有下载按钮，限制右键）的视频或图片也有参考价值**
## 方法1 浏览器开发者工具
直接按F12打开浏览器开发者工具审查元素得到视频的链接，粘贴到地址栏即可
会使用该方法的一般也是开发者，网站一般也不会禁用开发者工具，**万一按F12无法打开开发者工具，可以先打开**
**开发者工具再打开网页**。另外即使使用obfuscator等类似的js混淆库进行反调试，审查元素一般还是可以，所以该方法还是比较通用。
## 方法2添加一个下载的按钮(button)或链接(a标签)
添加一个button的代码是，就是更新前我贴的代码，我删了样式部分
```javascript
function downloadURI(uri, name) {
var link = document.createElement("a");
// 改download参数也不能改下载下来的名字，很奇怪
link.download = name;
console.log(link.download)
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
function addBut() {
var but = document.createElement("button");
but.innerHTML = "下载";
// 更新符合B站风格的样式
// 样式删除
var parent = document.getElementsByClassName("rules");
var node = document.createElement("div");
// 样式删除
var childLength = parent.childNodes.length;
for (var i = 0; i < childLength; i++) {
parent.removeChild(parent.childNodes);
}
node.appendChild(but)
parent.appendChild(node);
// 核心代码
but.onclick = function () {
downloadURI(document.getElementsByTagName('video').src, document.getElementsByClassName('info-card-title').innerHTML)
}
}
// 延迟1.5秒执行，如果网速慢可以增加延迟时间
setTimeout(() => {
addBut()
}, 1500)
```
核心代码是
```
downloadURI(document.getElementsByTagName('video').src, document.getElementsByClassName('info-card-title').innerHTML)
```
其中`document.getElementsByTagName('video').src`可以取到视频的链接
添加一个a标签的代码是
```javascript
// ==UserScript==
// @name B站素材库平台下载按钮a 标签
// @namespace http://tampermonkey.net/
// @version 0.1
// @descriptionB站素材库平台 a 标签
// @author You
// @match https://cool.bilibili.com/detail/video?*
// @icon https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant none
// @run-at document-idle
// @license MIT
// ==/UserScript==
(function () {
'use strict';
function addBut() {
debugger;
var a = document.createElement("a");
a.innerHTML = "下载视频";
// 更新符合B站风格的样式
a.style = "margin-top: 22px;width: 76px;height: 40px;font-size: 14px;line-height: 40px;text-align: center;background: #20aae2;border: 1px solid #20aae2;color: #fff;border-radius: 20px;box-sizing: border-box;";
a.href = document.getElementsByTagName('video').src;
a.download = 'name';
var parent = document.getElementsByClassName("rules");
var node = document.createElement("div");
node.style = "display: flex;height: inherit;width: inherit;justify-content: space-evenly;justify-content: space-evenly;align-items: center;";
var childLength = parent.childNodes.length;
for (var i = 0; i < childLength; i++) {
parent.removeChild(parent.childNodes);
}
node.appendChild(a)
parent.appendChild(node);
}
// 延迟1秒执行，如果网速慢可以增加延迟时间
setTimeout(() => {
addBut()
}, 1500)
// Your code here...
})();
```
我发现以上的代码也是可以成功的。。。。
之前我使用button的原因是chrome阻止下载不安全的内容 https://blog.chromium.org/2020/02/protecting-users-from-insecure.html ，但现在莫名其妙又不出现了
## 方法3 解除网页的右键限制
后来我发现如果右键保存视频可以用的话也是很方便的，但是再目标网站点击右键没有反应
禁用右键的方式如下
因为我们知道是动了`document.oncontextmenu`,所以解除限制的方法就一行代码
```javascript
document.oncontextmenu = null
```
更加完善的解除右键限制脚本如下
```javascript
// ==UserScript==
// @name B站素材库平台下载（解除右键限制）
// @namespace http://tampermonkey.net/
// @version 0.1
// @descriptionB站素材库平台 下载按钮
// @author You
// @match https://cool.bilibili.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant none
// @run-at document-idle
// @license MIT
// ==/UserScript==
(function () {
'use strict';
// https://stackoverflow.com/questions/21335136/how-to-re-enable-right-click-so-that-i-can-inspect-html-elements-in-chrome
function enableContextMenu(aggressive = false) {
void(document.ondragstart=null);
void(document.onselectstart=null);
void(document.onclick=null);
void(document.onmousedown=null);
void(document.onmouseup=null);
void(document.body.oncontextmenu=null);
enableRightClickLight(document);
if (aggressive) {
enableRightClick(document);
removeContextMenuOnAll("body");
removeContextMenuOnAll("img");
removeContextMenuOnAll("td");
} }
function removeContextMenuOnAll(tagName) {
var elements = document.getElementsByTagName(tagName);
for (var i = 0; i < elements.length; i++) {
enableRightClick(elements);
}
}
function enableRightClickLight(el) {
el || (el = document);
el.addEventListener("contextmenu", bringBackDefault, true);
}
function enableRightClick(el) {
el || (el = document);
el.addEventListener("contextmenu", bringBackDefault, true);
el.addEventListener("dragstart", bringBackDefault, true);
el.addEventListener("selectstart", bringBackDefault, true);
el.addEventListener("click", bringBackDefault, true);
el.addEventListener("mousedown", bringBackDefault, true);
el.addEventListener("mouseup", bringBackDefault, true);
}
function restoreRightClick(el) {
el || (el = document);
el.removeEventListener("contextmenu", bringBackDefault, true);
el.removeEventListener("dragstart", bringBackDefault, true);
el.removeEventListener("selectstart", bringBackDefault, true);
el.removeEventListener("click", bringBackDefault, true);
el.removeEventListener("mousedown", bringBackDefault, true);
el.removeEventListener("mouseup", bringBackDefault, true);
}
function bringBackDefault(event) {
event.returnValue = true;
(typeof event.stopPropagation === 'function') &&
event.stopPropagation();
(typeof event.cancelBubble === 'function') &&
event.cancelBubble();
}
enableContextMenu();
// Your code here...
})();
```
解除限制的方法参考https://stackoverflow.com/questions/21335136/how-to-re-enable-right-click-so-that-i-can-inspect-html-elements-in-chrome 之前用爬虫爬的几百个素材百度网盘地址 链接：https://pan.baidu.com/s/1W2g6tF4BtzySfrPlt0bTJw提取码：6666 Hmily 发表于 2022-4-18 14:35
@天空宫阙 本贴无技术分析内容，如果只是单纯脚本我就要删除了，你可以发到经历福利区，或者你追加编辑分析 ...
那您帮我移动到福利区或删除吧，改论文间隙水了一个脚本，技术含量确实不高，24号前没时间增加分析 感谢分享 感谢分享，学习学习 感谢分享，学习中 谢谢分享教程 感谢分享 谢谢分享教程
虽然用不上，支持一下