浏览器书签还能一键下载B站视频封面？

说在前面

说起浏览器书签，大家下意识都只会想到可以用来收藏的网址吧？那你知不知道浏览器书签还可以用来制作一些很实用的小工具。

有些小功能通过浏览器插件来实现的话有点"杀鸡用牛刀 "，这时候我们就可以用浏览器书签制作一个小工具来实现，比如我们今天要实现的一个功能：B站视频封面下载

页面分析

封面图片链接

首先我们需要先分析一下B站视频页面，直接F12，简单看一眼不难发现，视频的封面就藏在代码之中

我们可以直接获取到这个图片元素的 src

javascript 复制代码

const img = document.querySelector("#wxwork-share-pic").src;

图片最后的 @100w_100h_1c 规定了图片显示的大小规格，我们直接去掉规格说明获取原图

javascript 复制代码

const img = document.querySelector("#wxwork-share-pic").src.split("@")[0];

图片标题

图片链接获取到了，我们想要下载的图片以视频标题命名，所以我们需要获取到视频的标题

还是直接 F12 一键获取

javascript 复制代码

const title = document.querySelector(
  "#viewbox_report > div.video-info-title > div > h1"
).innerText;

图片下载

图片链接和标题我们都拿到了，那就差最后一步：下载图片 了

直接创建个a标签下载？

javascript 复制代码

const link = document.createElement("a");
link.href = img ;
link.download = title;
link.click();

运行一下发现浏览器直接在标签页将图片显示出来了，并不会直接下载到本地，这是因为浏览器的预览机制：浏览器默认将图片链接视为可预览资源。

若链接指向图片且未设置 download 属性，浏览器会尝试在新标签页中预览（如 .jpg/.png 等常见格式）。
即使设置 download ，部分浏览器（如 Chrome）对同源图片仍可能优先预览，尤其是小尺寸图片。

转为Blob对象再下载

将图片转换为 Blob 对象后下载，可绕过浏览器预览机制

javascript 复制代码

const response = await fetch(img);
if (!response.ok) throw new Error( response.status);
const blob = await response.blob();
const blobUrl = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = blobUrl;
link.download = title + img.substring(img.lastIndexOf("."));
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(blobUrl);

这样就能成功下载了~

制作成书签工具

将我们前面的代码改成一个立即执行函数，并且用 javascript: 声明

javascript 复制代码

javascript: (async () => {
  const img = document.querySelector("#wxwork-share-pic").src.split("@")[0];
  const title = document.querySelector(
    "#viewbox_report > div.video-info-title > div > h1"
  ).innerText;
  try {
    const response = await fetch(img);
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    const blob = await response.blob();
    const blobUrl = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = blobUrl;
    link.download = title + img.substring(img.lastIndexOf("."));
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(blobUrl);
  } catch (error) {
    console.error("下载图片失败:", error);
    alert("下载失败，请检查图片URL是否有效");
  }
})();

新建书签，名称改成自己喜欢的名称，再将前面写好的代码复制到网址栏就可以，后面想要下载视频封面直接点击书签就可以了~

源码

gitee

gitee.com/zheng_yongt...

github

github.com/yongtaozhen...

🌟 觉得有帮助的可以点个 star~
🖊 有什么问题或错误可以指出，欢迎 pr~
📬 有什么想要实现的功能或想法可以联系我~

公众号

关注公众号『 前端也能这么有趣 』，获取更多有趣内容。

发送加群还可以加入群聊，一起来学习（摸鱼）吧~

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。