// ==UserScript==// @name         BilibiliCover - 获取并显示B站视频封面图片// @version      3.9.0// @description  获取并显示B站视频封面// @author       AnnAngela// @namespace    https://greasyfork.org/users/129402// @mainpage     https://greasyfork.org/zh-CN/scripts/33411-bilibilicover// @supportURL   https://greasyfork.org/zh-CN/scripts/33411-bilibilicover/feedback// @license      GNU General Public License v3.0 or later// @compatible   chrome 80// @compatible   firefox// @compatible   opera// @compatible   safari// @match        https://www.bilibili.com/watchlater/#/*// @match        https://www.bilibili.com/video/av*// @match        https://www.bilibili.com/video/bv*// @match        https://www.bilibili.com/video/BV*// @match        https://www.bilibili.com/bangumi/play/*// @match        https://www.bilibili.com/medialist/play/watchlater/*// @match        https://live.bilibili.com/*// @run-at       document-start// @grant        unsafeWindow// @grant        GM_xmlhttpRequest// @noframes// @icon         https://public.annangela.cn/script/Bilibili.png// @icon64       https://public.annangela.cn/script/Bilibili.png// ==/UserScript=="use strict";/*** @type {Window & typeof globalThis}*/const win = unsafeWindow;const doc = win.document;win.addEventListener("load", () => {let response;const helper = {Uri: class Uri {constructor(href = location.href) {this._url = new URL(href);this.query = Object.fromEntries(Array.from(this._url.searchParams.entries()));this.protocol = this._url.protocol.replace(/:$/, "");this.user = this._url.username;this.password = this._url.password;this.host = this._url.hostname;this.port = this._url.port;this.path = this._url.pathname;this.fragment = this._url.hash.length > 0 ? `#${decodeURIComponent(this._url.hash).substring(1)}` : "";}_updateUrl() {this._url.protocol = `${(this.protocol || "").replace(/:$/, "")}:`;this._url.username = this.user;this._url.password = this.password;this._url.hostname = this.host;this._url.port = this.port;this._url.pathname = this.path;this._url.hash = `#${this.fragment.replace(/^#/, "")}`.replace(/^#$/, "");this._url.search = "";Object.entries(this.query).forEach(([k, v]) => {this._url.searchParams.set(k, v);});}getUserInfo() {this._updateUrl();return this.user.length > 0 ? `${this.user}:${this.password}` : "";}getHostPort() {this._updateUrl();return this._url.host;}getAuthority() {this._updateUrl();const userInfo = this.getUserInfo();const hostPort = this.getHostPort();return userInfo.length > 0 ? `${userInfo}@${hostPort}` : hostPort;}getQueryString() {this._updateUrl();return this._url.search.substring(1);}getRelativePath() {this._updateUrl();return this.path + this._url.search + this.fragment;}toString() {this._updateUrl();return this._url.href;}},hsts: function (link) {try {let url = link?.toString?.();if (url.startsWith("//")) {url = `https:${url}`;}else if (url.startsWith("http:")) {url = url.replace(/^http:/, "https:");}return url;} catch {return link;}},coverImage: function (url) {/* 本函数来自 https://greasyfork.org/zh-CN/scripts/30714-获取哔哩哔哩视频的封面图片-get-bilibili-cover-image/code?version=202372 特此感谢*/let coverImageBigUrl = url;// 去除url中的裁剪标识if (url.indexOf("@") > -1) {//处理以@做裁剪标识的urlcoverImageBigUrl = url.split("@")[0];}if (url.indexOf("jpg_") > -1) {//处理以_做裁剪标识的urlcoverImageBigUrl = `${url.split("jpg_")[0]}jpg`;}if (url.indexOf("png_") > -1) {//处理以_做裁剪标识的urlcoverImageBigUrl = `${url.split("png_")[0]}png`;}if (url.indexOf("/320_200/") > -1) {//有时裁剪标识是在后缀名之前的 目前主要发现的是“番剧”板块的列表里有，但尚不清楚其他地方的情况coverImageBigUrl = url.replace("/320_200", "");}return coverImageBigUrl;},/*** @type {Window | undefined}*/window: undefined,openWin: function (wind, src) {if (this.window) {this.setImg(src);} else {const doc = wind.document;const w = wind.outerWidth || doc.docElement.clientWidth || doc.body.clientWidth,h = wind.outerHeight || doc.docElement.clientHeight || doc.body.clientHeight;this.window = window.open("about:blank", "bilibiliCover", `location=1,scrollbars=1,channelmode=1,width=${w * 0.8},height=${h * 0.8},left=${w * 0.1},top=${h * 0.1}`);setTimeout(() => {this.window.document.title = "BilibiliCover - 封面获取窗口";this.window.document.body.innerHTML = `<div style="text-align: start;">视频封面地址：</div><textarea readonly="readonly" style="width: 100%; height: 1.1em; font-size: 24px; box-sizing: content-box; overflow: hidden; background-color: white; color: initial;"></textarea><hr><img src="${src}" style="max-width: 100%; height: auto; min-height: 300px;"><p id="realsize" style="text-align: center;"></p>`;this.window.document.body.innerHTML += "<style> a { cursor: pointer; background-position: center right;background-repeat: no-repeat;background-image: -webkit-linear-gradient(transparent, transparent), url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cg%20transform%3D%22translate%28-826.429%20-698.791%29%22%3E%3Crect%20width%3D%225.982%22%20height%3D%225.982%22%20x%3D%22826.929%22%20y%3D%22702.309%22%20fill%3D%22%23fff%22%20stroke%3D%22%2306c%22%2F%3E%3Cg%3E%3Cpath%20d%3D%22M831.194%20698.791h5.234v5.391l-1.571%201.545-1.31-1.31-2.725%202.725-2.689-2.689%202.808-2.808-1.311-1.311z%22%20fill%3D%22%2306f%22%2F%3E%3Cpath%20d%3D%22M835.424%20699.795l.022%204.885-1.817-1.817-2.881%202.881-1.228-1.228%202.881-2.881-1.851-1.851z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E); background-image: linear-gradient(transparent, transparent), url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cg%20transform%3D%22translate%28-826.429%20-698.791%29%22%3E%3Crect%20width%3D%225.982%22%20height%3D%225.982%22%20x%3D%22826.929%22%20y%3D%22702.309%22%20fill%3D%22%23fff%22%20stroke%3D%22%2306c%22%2F%3E%3Cg%3E%3Cpath%20d%3D%22M831.194%20698.791h5.234v5.391l-1.571%201.545-1.31-1.31-2.725%202.725-2.689-2.689%202.808-2.808-1.311-1.311z%22%20fill%3D%22%2306f%22%2F%3E%3Cpath%20d%3D%22M835.424%20699.795l.022%204.885-1.817-1.817-2.881%202.881-1.228-1.228%202.881-2.881-1.851-1.851z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E); padding-right: 13px; } </style>";this.window.document.body.innerHTML += '<p style="display: flex; flex-wrap: nowrap; justify-content: space-around;"><a target="_blank" id="baidu">Baidu识图搜索</a><a target="_blank" id="google">Google识图搜索</a></p>';this.window.document.body.style.textAlign = "center";this.setImg(src);const t = this.window.document.querySelector("textarea");t.addEventListener("mouseup", (e) => {if (e.which !== 1) { return; }const selection = this.window.getSelection();if (selection.toString() !== "") { return; }this.focus();this.select();});const gLink = this.window.document.querySelector("#google");gLink.addEventListener("mousedown", () => {gLink.href = `https://www.google.com/searchbyimage?encoded_image=&image_content=&filename=&hl=zh-CN&image_url=${encodeURIComponent(t.value)}`;}, {capture: true,});const bLink = this.window.document.querySelector("#baidu");bLink.addEventListener("click", (e) => {const s = getComputedStyle(bLink);if (s.fontWeight === "700") {return;}if (s.cursor === "not-allowed") {e.preventDefault();e.stopImmediatePropagation();e.stopPropagation();return;}bLink.style.cursor = "not-allowed";bLink.style.fontStyle = "italic";bLink.innerText = "正在预搜索中，不要离开，请稍候……";GM_xmlhttpRequest({url: `https://graph.baidu.com/upload?tn=pc&from=pc&image_source=PC_UPLOAD_IMAGE_ICONURL&image=${encodeURIComponent(t.value)}`,method: "POST",headers: {referer: "https://image.baidu.com/",origin: "https://image.baidu.com",},onerror: (detail) => {this.window.alert(`百度识图搜索失败：网络故障\n${detail}`);bLink.innerText = "Baidu识图搜索";},onload: (res) => {if (getComputedStyle(bLink).cursor !== "not-allowed") {return;}let response;try {response = JSON.parse(res.responseText);console.info("BilibiliCover", "BaiduNetworkResponse", res, JSON.parse(res.response));} catch (e) {response = false;console.error("BilibiliCover", "BaiduNetworkResponse", res, e);}if (!response) {this.window.alert(`百度识图搜索失败：返回数据无法识别\n${res.responseText}`);bLink.innerText = "Baidu识图搜索";return;}if (!response.data || !response.data.url) {this.window.alert(`百度识图搜索失败：返回数据格式错误\n${res.responseText}`);bLink.innerText = "Baidu识图搜索";return;}bLink.href = response.data.url;bLink.style.cursor = "pointer";bLink.style.fontStyle = "normal";bLink.style.fontWeight = "700";bLink.innerText = "预搜索完成，请再次点击此处以使用Baidu识图搜索！";},});}, {capture: true,});this.window.addEventListener("beforeunload", () => {this.window = undefined;});this.window.focus();this.window.addEventListener("load", () => {this.resize();});this.window.document.querySelector("img").addEventListener("load", () => {this.resize();});this.window.addEventListener("resize", () => {this.resize();});this.window.setInterval(() => {this.resize();}, 500);this.resize();}, 0);}},resize: function () {if (!this.window) { return; }const collection = this.window.document.querySelectorAll("body > *:not(img):not(style)");let totalHeight = 0;Array.from(collection).forEach((t) => {totalHeight += this.getRealHeight(t);});this.window.document.querySelector("body > img").style.maxHeight = `calc(100vh - ${totalHeight}px)`;},getRealHeight: function (ele) {const style = (this.window || window).getComputedStyle(ele);let realHeight = 0;["marginTop", "paddingTop", "height", "paddingBottom", "marginBottom", "borderTopWith", "borderBottomWith"].forEach((p) => {const v = style[p];if (/^\d/.test(v)) { realHeight += parseFloat(v); }});return realHeight;},setImg: function (src) {if (!this.window) { return; }const img = this.window.document.querySelector("img");this.window.document.querySelector("img").src = src;this.window.document.querySelector("textarea").value = src;const bLink = this.window.document.querySelector("#baidu");bLink.style.cursor = "pointer";bLink.style.fontStyle = "normal";bLink.style.fontWeight = "400";bLink.innerText = "Baidu识图搜索";this.setNaturalSize(img, this.window.document.querySelector("#realsize"));this.window.focus();},setNaturalSize: function (img, node) {if (img.naturalWidth > 0 && img.naturalHeight > 0) { node.innerText = `(${img.naturalWidth}×${img.naturalHeight})`; }else {setTimeout(() => {this.setNaturalSize(img, node);}, 100);}},closeWin: function () {if (this.window) {this.window.close();}},};const url = new helper.Uri();const match = (str) => (str.match(/(?:\/video\/|\/watchlater\/(?:#\/)?)(av\d+|[bB][vV]1[fZodR9XQDSUm21yCkr6zBqiveYah8bt4xsWpHnJE7jL5VG3guMTKNPAwcF]{9})/) || [0, -1])[1];if (win.location.host.includes("www.bilibili.com")) {const wait = () => {if (!doc.querySelector(".bilibili-player-video-btn-quality > .bilibili-player-video-quality-menu.bui-select-quality-menu, .bpx-player-ctrl-quality > .bpx-player-ctrl-quality-menu")) {return true;}const v = doc.getElementsByTagName("video");if (v.length === 0) {return true;}const vb = doc.getElementsByTagName("video")[0].buffered;if (!(vb instanceof TimeRanges)) {return true;}try {const vbe = vb.end(vb.length - 1);if (typeof vbe !== "number" || vbe < 2) {return true;}} catch {return true;}return false;};const c = setInterval(() => {if (wait()) {return;}const plw = doc.querySelector("#arc_toolbar_report > .ops, #toolbar_module, .video-toolbar-module, .play-options-ul, #arc_toolbar_report > .toolbar-left");if (!plw) {return;}const coin = plw.querySelector(".coin, .coin-info span, .coin-box .num, :scope > li:nth-child(2) > span");if (!/\d+/.test(coin?.innerText?.trim?.() ?? "--")) {return;}clearInterval(c);let IS_ORIGIN_VIDEO = true;let IS_NEW_BANGUMI = false;const IS_WATCHLATER = url.toString().includes("/watchlater/#/");const IS_NEW_WATCHLATER = url.toString().includes("/watchlater/");const svgFromNewPanel = coin.querySelector("svg");let aid_bvid = match(url.toString());if (aid_bvid === -1) {if (!IS_WATCHLATER && !IS_NEW_WATCHLATER && (url.path.match(/\/bangumi\/play\/(?:ep|ss)(\d+)/) || [0, -1])[1] !== -1) {IS_NEW_BANGUMI = true;}IS_ORIGIN_VIDEO = false;}const style = doc.querySelector("#bilibiliCoverStyle") || doc.createElement("style");style.innerText = '.bilibiliCoverButtonInWatcherLater { background: rgba(0, 0, 0, 0) url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'22\' height=\'22\' style=\'\'%3E%3Crect id=\'backgroundrect\' width=\'100%25\' height=\'100%25\' x=\'0\' y=\'0\' fill=\'none\' stroke=\'none\'/%3E%3Cg class=\'currentLayer\' style=\'\'%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cpath d=\'M17.982 9.275L8.06 3.27A2.013 2.013 0 005 4.994v12.011a2.017 2.017 0 003.06 1.725l9.922-6.005a2.017 2.017 0 000-3.45z\' id=\'svg_1\' class=\'selected\' fill=\'%23757575\' fill-opacity=\'1\'/%3E%3C/g%3E%3C/svg%3E") no-repeat scroll 50% 50% / 100% padding-box border-box };';style.id = "bilibiliCoverStyle";if (style.parentElement !== doc.body) { doc.body.appendChild(style); }const img = doc.createElement("img");img.addEventListener("error", (...args) => {args.unshift("BilibiliCover");args.unshift("NetworkError");console.error(...args);const s = new helper.Uri(img.src);s.query.t = new Date().getTime();img.src = s;});try {const meta = doc.querySelector('meta[property="og:image"], meta[itemprop="image"], meta[itemprop="thumbnailUrl"]');const metacontent = meta.getAttribute("content");const metacontentUri = new helper.Uri(metacontent);if (metacontentUri.host.endsWith("hdslb.com") && metacontentUri.path.startsWith("/bfs/")) {img.src = helper.hsts(metacontent);}} catch { }/**** @param {string} ifIsOriginVideo* @param {string} ifIsNewBangumi* @param {string} ifIsWatchLater* @param {string} ifIsNewWatchLater* @returns {string}*/const detectType = (ifIsOriginVideo, ifIsNewBangumi, ifIsWatchLater, ifIsNewWatchLater) => {switch (true) {case IS_WATCHLATER: return ifIsWatchLater;case IS_NEW_WATCHLATER: return ifIsNewWatchLater;case IS_ORIGIN_VIDEO: return ifIsOriginVideo;case IS_NEW_BANGUMI: return ifIsNewBangumi;}};setInterval(() => {if (doc.querySelector("#BilibiliCoverButton")) {return;}if (wait()) {return;}const button = doc.createElement(detectType("span", "div", "div", "span"));button.id = "BilibiliCoverButton";button.title = "获取封面";button.innerHTML = detectType("<i class=\"van-icon-info_playnumber\"></i>获取封面", "<i class=\"iconfont icon-views\" style=\"display: inline-block; vertical-align: top; width: 28px; height: 28px; line-height: 28px; font-size: 28px; color: #757575; margin-right: 4px; text-align: center;\"></i><span style=\"display: inline-block; vertical-align: top; width: 62px; height: 28px; line-height: 28px; font-size: 14px; color: #505050;\">获取封面</span>", "<div class=\"btn-item\"><i class=\"icon-move s-icon-moved bilibiliCoverButtonInWatcherLater\" style=\"background-size: 50px;\"></i><span class=\"t\">获取封面</span><span class=\"num\">鼠标悬浮查看</span></div>", '<i class="bilibiliCoverButtonInWatcherLater" style="width: 28px; height: 28px; display: inline-block;"></i> <span>获取封面</span></li>');if (IS_NEW_BANGUMI) {button.setAttribute("style", "display: block; float: left; height: 36px; margin-left: 12px; cursor: pointer;");}if (IS_WATCHLATER) {button.setAttribute("style", "position: relative; float: left;");}if (svgFromNewPanel) {const svgFromNewPanelStyle = getComputedStyle(svgFromNewPanel);const i = button.querySelector("i");i.style.height = svgFromNewPanelStyle.height;i.style.width = svgFromNewPanelStyle.width;i.style.lineHeight = svgFromNewPanelStyle.height;i.style.fontSize = svgFromNewPanelStyle.width;}if (IS_NEW_WATCHLATER) {button.setAttribute(coin.getAttributeNames().filter((n) => n.startsWith("data-v-"))[0], "");button.querySelectorAll("*").forEach((ele) => {ele.setAttribute(coin.getAttributeNames().filter((n) => n.startsWith("data-v-"))[0], "");});}let code = null;button.addEventListener("click", () => {const src = img.src;if (src) {helper.openWin(window, src, 1);}});button.addEventListener("mouseover", () => {if (code) {code = null;clearTimeout(code);}img.style.display = "block";let X = 0,Y = 0,W = 0;let p = button;do {X += p.offsetTop;Y += p.offsetLeft;p = p.offsetParent;} while (p !== doc.body);const style = win.getComputedStyle(button);X += parseInt(style.marginTop) + parseInt(style.height) + parseInt(style.marginBottom) + 10;Y += parseInt(style.marginLeft) + parseInt(style.width) + parseInt(style.marginRight) + 10;W = win.innerWidth - Y - 150;if (W > img.naturalWidth) { W = img.naturalWidth; }img.style.top = `${X - W * img.naturalHeight / img.naturalWidth - 10}px`;img.style.left = `${Y}px`;img.style.width = `${W}px`;img.style.opacity = "1";});button.addEventListener("mouseleave", () => {if (code) {code = null;clearTimeout(code);}img.style.opacity = "0";code = setTimeout(() => {img.style.top = "-99999px";code = null;}, 130);});if (plw.querySelector(".more")) {plw.insertBefore(button, plw.querySelector(".more"));}else {plw.appendChild(button);}}, 500);style.innerText += ".video-toolbar .ops .app { margin-right: 12px; }";img.id = "cover_img";doc.body.appendChild(img);img.style.position = "absolute";img.style.top = "-99999px";img.style.left = "0";img.style.zIndex = "99999";img.style.border = "1px black solid";img.style.opacity = "0";img.style.transition = "opacity .13s linear";img.style.display = "none";let running = false;const err = (...args) => {args.unshift("BilibiliCover");args.unshift("NetworkError:");console.error(...args);img.alt = args.map((e) => { return JSON.stringify(e); }).join("\n");running = false;};setInterval(() => {if (!running && IS_ORIGIN_VIDEO || IS_WATCHLATER) {const aidDetected = match(new helper.Uri().toString());if (aidDetected !== -1 && aidDetected !== aid_bvid || !img.src) {aid_bvid = aidDetected;running = true;GM_xmlhttpRequest({url: `https://api.bilibili.com/x/web-interface/search/type?search_type=video&keyword=${aid_bvid}`,method: "GET",onerror: err,onload: (res) => {try {response = JSON.parse(res.responseText);} catch (e) {response = false;}console.info("BilibiliCover", "NetworkResponse:", res, ", parse r###lt:", response);if (!response) {err("Unable to parse response");return;}const data = response.data.r###lt;if (!Array.isArray(data)) {err(`Backend returns incompatible data(${typeof data})`);return;}let cover;data.forEach((info) => {if ((`av${info.aid}` === aid_bvid || info.bvid === aid_bvid) && info.pic) {cover = helper.hsts(helper.coverImage(info.pic));}});if (cover) {img.src = helper.hsts(cover);} else {err("Unable to get the cover picture url");}running = false;},});}} else {try {img.src = helper.hsts(helper.coverImage(doc.querySelector("#bofqi .bilibili-player-watchlater-item[data-state-play=true] .bilibili-player-watchlater-cover-cell img, .bangumi-info-wrapper .info-cover img, #media_module > a > img, .player-auxiliary-playlist-item-active .player-auxiliary-playlist-item-img-self").src));// clearInterval(loop_code);img.removeAttribute("alt");} catch (_) {console.info("bilibiliCover:", "no img");img.alt = "bilibiliCover: no img";}}}, 100);}, 500);} else if (win.location.host.includes("live.bilibili.com")) {const link = win.document.createElement("div");const error = (...args) => {const detail = args[0];link.innerHTML = `<span style="color: red">封面获取失败=。=（${detail}）</span>`;args.unshift("BilibiliCover");args.unshift("NetworkError");console.error(...args);};(function loop() {const roomid = win.location.pathname.match(/^\/(?:blanc\/)?(\d+)/)[1];// const userName = (((unsafeWindow.document.querySelector(".room-owner-username") || {}).href || "").match(/\d+/) || [])[0];if (roomid) {const container = win.document.querySelector(".seeds-wrap");if (!container) { return setTimeout(loop, 100); }GM_xmlhttpRequest({url: `https://api.live.bilibili.com/xlive/web-room/v1/index/getInfoByRoom?room_id=${roomid}`,method: "GET",onerror: error,onload: (res) => {link.style.display = "inline-block";link.style.marginLeft = link.style.marginRight = "1em";link.style.verticalAlign = "bottom";link.innerHTML = '<a href="javascript:void(0);" style="color: #23ade5;">查看封面</a>';container.insertBefore(link, container.firstChild);console.info("BilibiliCover", "NetworkResponse", res, JSON.parse(res.response));try {response = JSON.parse(res.responseText);} catch (e) {response = false;}if (!response) { error("无法解析后端返回数据", res); }const cover = response.data?.room_info?.cover;if (!cover) {error("解析出现错误", response);} else {link.querySelector("a").addEventListener("click", () => {helper.openWin(win, cover);});}},});}})();}window.addEventListener("beforeunload", () => {helper.closeWin();});});