Bilibili-Evolved 稍后再看重定向组件解析：将稍后再看链接一键重定向为普通播放网址-北京尧图网络

Bilibili-Evolved 稍后再看重定向组件解析将稍后再看链接一键重定向为普通播放网址【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved稍后再看重定向watchlaterRedirect是 Bilibili-Evolved 脚本中一个小而精的实用组件它的核心职责是把「稍后再看」场景下产生的链接统一重定向为普通的 bilibili 视频播放网址。本文以组件说明文档为骨架结合组件入口源码、稍后再看数据 API 与自定义顶栏的集成代码逐层剖析该组件的两个开关选项、重定向算法与 DOM 监听机制帮助读者理解增强脚本如何在不侵入页面结构的前提下改写导航链接并掌握在自定义顶栏中联动组件设置的正确姿势。组件定位解决什么痛点「稍后再看」是 bilibili 提供的视频收藏播放功能其列表页与自定义顶栏面板中的卡片链接默认指向https://www.bilibili.com/list/watchlater?bvid...这类带watchlater语义的地址。这类地址在分享、转发或直接访问时体验不佳且进入后是稍后再看专属的播放环境。该组件做的事情非常直接——将稍后再看的链接重定向为普通播放网址https://www.bilibili.com/video/{bvid}/让链接回归标准视频页语义。从组件元数据可以看出它的作用范围被严格限定在三个稍后再看相关页面见 index.tshttps://www.bilibili.com/watchlater/#/listhttps://www.bilibili.com/watchlater/list#/listhttps://www.bilibili.com/watchlater/listurlInclude字段声明组件仅在上述页面注入执行组件标签tags同时挂载在componentsTags.utils与componentsTags.video下归类为视频类实用工具。两个配置开关页面重定向与顶栏重定向原文档对组件的功能说明非常凝练共两条重定向页面对稍后再看列表页面里的链接重定向。重定向顶栏对自定义顶栏里的稍后再看链接重定向。对应到组件元数据中的两个布尔选项见 index.ts选项键显示名默认值生效位置page重定向页面true稍后再看列表页面组件自身 entry 逻辑navbar重定向顶栏true自定义顶栏的稍后再看面板由NavbarWatchlater.vue读取两个选项虽然同属一个组件但生效机制完全不同page由组件自身的入口函数直接消费而navbar是被「自定义顶栏」这个独立组件跨组件读取的。这是理解该组件设计的关键——它不是一个单纯的自包含功能而是一个可被其他组件复用其设置的联动型开关。选项一重定向页面page入口函数的第一行就是对page选项的判定见 index.tsconst entry: ComponentEntry async ({ settings }) { if (!settings.options.page) { return } // ... }当用户关闭「重定向页面」后入口函数直接返回列表页的链接重定向逻辑完全不再执行。该选项控制的是稍后再看列表页中视频卡片链接的改写。选项二重定向顶栏navbarnavbar选项不在 entry 中使用而是由自定义顶栏的稍后再看弹窗组件读取见 NavbarWatchlater.vuedata() { const redirect getComponentSettings(watchlaterRedirect) return { // ... redirect: redirect.enabled redirect.options.navbar, } }这里通过getComponentSettings(watchlaterRedirect)跨组件获取本组件设置并取「组件启用」与「重定向顶栏开启」的交集。顶栏卡片生成链接时依据该开关分流见 NavbarWatchlater.vueconst getLink (item: RawWatchlaterItem) { if (this.redirect) { return https://www.bilibili.com/video/${item.bvid}/ } return https://www.bilibili.com/list/watchlater?bvid${item.bvid} }即顶栏重定向开启时顶栏内稍后再看卡片的跳转地址直接变为普通视频页关闭时保留原始的watchlater列表地址。同时注意读取条件是redirect.enabled redirect.options.navbar——即使顶栏开关为开启状态若整个「稍后再看重定向」组件被禁用顶栏也不会重定向。这一联动细节对使用自定义顶栏的用户尤为重要。页面重定向的底层实现三步改写链接页面重定向的完整逻辑位于入口函数entry中核心分为「获取数据 → 定位容器 → 改写链接」三步。第一步拉取稍后再看原始列表const list: RawWatchlaterItem[] await getWatchlaterList(true)getWatchlaterList(true)的第二个参数raw表示返回未转换过的原始数据列表见 src/components/video/watchlater.ts。其底层请求 bilibili 开放接口https://api.bilibili.com/x/v2/history/toview/web返回的数据结构RawWatchlaterItem包含bvid、cid、pages分 P 信息、progress观看进度等关键字段。该接口需要登录态未登录时函数会输出账号未登录警告并返回空数组——这也是该组件的使用前提必须登录 bilibili 账号。第二步定位列表容器并提取 bvidconst listContainer await select(.watch-later-list .list-box span, .watchlater-list)使用select来自 src/core/spin-query.ts一个轮询等待元素出现的查询工具等待稍后再看列表容器出现。随后对每个视频卡片执行tryRedirectisRedirected(element)检查封面链接是否已包含/video/BV特征已重定向过的卡片直接跳过保证幂等getBvidFromElement(element)从封面元素.av-pic, .bili-cover-card的href中通过正则/bvid([^])/提取bvid用提取到的bvid在第一步拉取的原始列表中find匹配项找不到则输出告警日志跳过。两个失败路径bvid 提取失败、列表无匹配项都会通过console.warn输出诊断信息方便在控制台排查。第三步根据分 P 构造普通播放地址核心改写逻辑见 index.tsconst { bvid, cid, pages } watchlaterItem const page pages.find(p p.cid cid)?.page ?? 1 const url page 1 ? https://www.bilibili.com/video/${bvid}/?p${page} : https://www.bilibili.com/video/${bvid}/这里体现了对多 P 视频的精细处理通过当前播放分 P 的cid在pages中找到对应的page序号第一 P 直接生成https://www.bilibili.com/video/{bvid}/非第一 P 则追加?p{page}参数确保重定向后仍能回到用户正在观看的那一集。改写同时作用于封面链接.av-pic, .bili-cover-card与标题链接.av-about .t, .bili-video-card__title a, .video-card__right .title并且都设置了target _blank保证新标签页打开。整个改写过程被try/catch包裹单卡失败不会影响其他卡片。动态监听防抖 MutationObserver稍后再看列表支持翻页、删除等操作DOM 会持续变化因此组件没有只做一次性改写而是双管齐下const runRedirect lodash.debounce(() { /* 遍历所有卡片改写 */ }, 200) runRedirect() // 初始执行一次 childListSubtree(listContainer, async records { // 检测新增节点是否包含视频卡片特征类名 if (hasVideoCardChange) { runRedirect() } })首次进入页面立即执行一次runRedirect之后通过childListSubtree来自 src/core/observer.ts监听目标节点及其所有子孙节点的childList变化观察列表容器的增删当新增节点带有bili-video-card__wrap、video-card、watchlater-list-container等卡片特征类名时再次触发改写改写逻辑用lodash.debounce(..., 200)做了 200ms 防抖避免频繁 DOM 变化导致的高频重跑。这套「初始化执行增量监听防抖合并」的组合是该组件应对 SPA 动态列表的通用模式。依赖的稍后再看数据层getWatchlaterList 与相关 API页面重定向和顶栏重定向都依赖 src/components/video/watchlater.ts 提供的稍后再看能力该模块是整个稍后再看生态的数据中枢getWatchlaterList(raw?)请求x/v2/history/toview/web接口返回 aid 列表或原始条目列表同时维护内存中的watchlaterList缓存并随返回结果自动增删toggleWatchlater(aid, add?)调用toview/add与toview/del接口添加/移除稍后再看需要携带 CSRF 凭证模块顶部还注释了相关接口的备用地址toview/del、toview/clear模块在脚本空闲时requestIdleCallback且已登录的情况下会预取一次列表保证后续各组件读取时有较新的缓存。顶栏面板NavbarWatchlater.vue同样基于getWatchlaterList(true)渲染卡片并利用item.pages.find(p p.cid item.cid)计算当前分 P 时长、用item.progress / duration计算观看进度百分比超过 95% 或-1视为看完可见稍后再看的数据模型在整个生态中被多处复用。与相邻组件的关系与使用边界仓库中还存在一个功能相邻的组件「稍后再看页面重定向」watchlater-page-redirect见 registry/lib/components/utils/watchlater-page-redirect/index.ts。从其描述可知两者分工明确本组件是直接改写列表/顶栏中的链接而后者是在进入稍后再看的视频页面后进行跳转用于补充本组件覆盖不到的场景例如通过其他入口进入的稍后再看播放页。用户可根据实际遇到的入口类型决定启用哪个。小结「稍后再看重定向」组件虽小却完整展现了 Bilibili-Evolved 增强脚本的典型工程模式通过defineComponentMetadata声明元数据与开关入口函数按选项分流数据层统一收敛到watchlater.ts的 API 封装DOM 改写遵循「幂等判定防抖批量处理 MutationObserver 增量监听」的稳健策略跨组件联动则通过getComponentSettings读取设置形成可组合的开关体系。对想了解增强脚本如何安全地操作 SPA 动态页面或计划在自定义顶栏中复用组件设置的开发者而言组件入口源码、稍后再看数据模块与顶栏集成组件三份文件构成了完整的研读路径。【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Bilibili-Evolved 稍后再看重定向组件解析：将稍后再看链接一键重定向为普通播放网址

相关推荐

高质量软件测试报告编写指南：缺陷聚类与覆盖率双验证

给武侠RPG加一套新武功：jynew的Mod与配置表玩法

Glances 导出 Graphite 时序数据库完全指南：配置、命令与源码实现解析

更多资讯

修复 IQ1_S_R4 / IQ1_M_R4 量化失败：ik_llama.cpp 中 GGML_ASSERT 崩溃的根因分析与边界处理方案

BabelDOC PDF翻译：从安装到保留格式出结果，只需5分钟

Arthas stop 命令详解：优雅关闭诊断服务、断开全部客户端并重置增强类

Ant Design Progress 仪表盘进度条（Dashboard）实战指南：type 与 gapDegree 完全解析

【STM32 实战】HAL 库下 DMA 循环接收 + IDLE 中断 + 状态机实现 SBUS 协议解析

TIA博途V15中用SCL实现先进后出堆栈算法

今日更新

校园网认证计费模式详解：AAA与代拨架构、原理及排障

Spring Boot+Vue垃圾分类毕设：分层、权限与排错实战

把 Cline 的 Base URL 改到 TaoToken 之后，DeepSeek 仍能修调试配置

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？