B站有个素材库平台 cool.bilibili.com/square/video ,有比较多质量还不错的素材,还有很多不错的绿幕素材,但是网页端竟然不允许下载,这就不方便在PR中使用,给我预览,不给我下载,好像不太可能吧,写了一个tampermonkey脚本,使用后就可以出现下载按钮了。
源代码
作者:skygongque。
这个脚本非常简单,去掉样式的代码,核心代码就十几行,但感觉还是有地方可以讲的,比如
chrome阻止下载不安全的内容 https://blog.chromium.org/2020/02/protecting-users-from-insecure.html ,以及绕过的方法。
在tampermonkey的执行时间设置成@run-at document-idle仍然过早,使用@run-at context-menu时发现该网页屏蔽了鼠标右键,这个时候使用setTimeout 延迟执行基本可以满足要求。
最后即使设置了a标签的download属性,仍然无法改变下载文件的名字,这很奇怪。
总之脚本不难,因为一些规则或保护遇到了不少困难。
// ==UserScript==
// home.php?mod=space&uid=170990 B站素材库平台下载按钮
// home.php?mod=space&uid=467642 http://tampermonkey.net/
// home.php?mod=space&uid=1248337 0.1.1
// @description B站素材库平台 下载按钮
// home.php?mod=space&uid=686208 You
// home.php?mod=space&uid=195849 https://cool.bilibili.com/detail/video?•
// home.php?mod=space&uid=593100 https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// home.php?mod=space&uid=609072 none
// @run-at document-idle
// @license MIT
// ==/UserScript==(function () {
'use strict';
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站风格的样式
but.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;";
var parent = document.getElementsByClassName("rules")[0];
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[0]); } node.appendChild(but) parent.appendChild(node); but.onclick = function () { downloadURI(document.getElementsByTagName('video')[0].src, document.getElementsByClassName('info-card-title')[0].innerHTML) } } // 延迟1.5秒执行,如果网速慢可以增加延迟时间 setTimeout(() => {
addBut()
}, 1500)
// Your code here...
})();
下载方式
B站素材库平台
cool.bilibili.com/square/video
脚本主页地址,安装地址