B站素材库平台下载按钮【tampermonkey脚本】

天空宫阙

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的代码是，就是更新前我贴的代码，我删了样式部分

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")[0];
        var node = document.createElement("div");
        // 样式删除
        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)

核心代码是

downloadURI(document.getElementsByTagName('video')[0].src, document.getElementsByClassName('info-card-title')[0].innerHTML)

其中document.getElementsByTagName('video')[0].src可以取到视频的链接

添加一个a标签的代码是

 // ==UserScript==
 // @name         B站素材库平台下载按钮a 标签
 // @namespace    http://tampermonkey.net/
 // @version      0.1
 // @description  B站素材库平台 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')[0].src;
         a.download = 'name';
         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(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,所以解除限制的方法就一行代码

document.oncontextmenu = null

更加完善的解除右键限制脚本如下

// ==UserScript==
// @name         B站素材库平台下载（解除右键限制）
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  B站素材库平台 下载按钮
// @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[i]);
      }
    }

    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号前没时间增加分析

sohuso

感谢分享

ciker_li

感谢分享，学习学习

shiys8

感谢分享，学习中

Wolts

谢谢分享教程

蓝风徐来

感谢分享

叫我小王叔叔

谢谢分享教程

dork

虽然用不上，支持一下