前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载Bilibili-Evolved 是一款面向哔哩哔哩网站的增强脚本其功能以组件Component为基本单元组织。本篇文章聚焦于其中一个非常轻量却颇具代表性的组件——seoRedirectSEO 页面重定向它以极少的代码完成了一个明确的任务当脚本运行在哔哩哔哩的 SEO 视频页面https://www.bilibili.com/s/video/时自动跳转到对应的原视频页面。读完本文你将掌握该组件的完整定义方式、URL 匹配与拦截机制、跳转实现细节以及它在 Bilibili-Evolved 组件体系中的运行原理并可据此举一反三理解整个仓库中大量同类轻量级入口组件的编写范式。一、功能背景为什么需要 SEO 页面重定向搜索引擎爬虫通常无法执行 JavaScript因此哔哩哔哩为视频提供了专供搜索引擎收录的静态 SEO 页面其 URL 结构为https://www.bilibili.com/s/video/BVxxxxxxxxxx这类页面与正常的视频播放页https://www.bilibili.com/video/BVxxxxxxxxxx内容基本相同但缺少完整播放器与交互功能。当真实用户而非爬虫通过搜索引擎结果进入这类页面时体验会明显受限。Bilibili-Evolved 的seoRedirect组件正是为解决这一问题而生。该组件的官方说明非常凝练仅有一句见 registry/lib/components/video/seo-redirect/index.md进入 SEO 视频页面时 (https://www.bilibili.com/s/video/) 自动跳转到原视频页面.而它的完整实现同样精简全部逻辑集中在一个组件元数据定义中见 registry/lib/components/video/seo-redirect/index.tsimport { defineComponentMetadata } from /components/define export const component defineComponentMetadata({ name: seoRedirect, displayName: SEO 页面重定向, entry: () { window.location.assign(document.URL.replace(/s/, /)) }, urlInclude: [//www.bilibili.com/s/video/], tags: [componentsTags.video], })整个组件只有 11 行代码却覆盖了定义、匹配、执行三个环节下面逐层拆解。二、组件元数据defineComponentMetadata与入口函数Bilibili-Evolved 中的每个组件都通过defineComponentMetadata工厂函数声明该函数定义在 src/components/define.tsexport const defineComponentMetadata O extends UnknownOptions EmptyOptions( m: ComponentMetadataO, ): ComponentMetadataO m它本质上是返回一个带类型约束的对象字面量作用在于让组件声明获得完整的 TypeScript 类型检查。ComponentMetadata接口见 src/components/types.ts要求组件至少提供name组件唯一名称用于在设置面板、组件映射componentsMap中索引displayName在设置界面中展示给用户的名称tags组件分类标签seoRedirect归类于componentsTags.video即视频分类entry主入口函数组件被加载时执行一次重新开启时不会再次运行除非另行定义reload。除这些必填字段外FunctionalMetadata见 src/components/types.ts还定义了urlInclude、urlExclude、instantStyles、widget、extraOptions等可选能力。seoRedirect用到的正是entry与urlInclude这一经典组合用 URL 模式限定生效范围用入口函数执行实际动作。三、URL 白名单匹配urlInclude的判定机制urlInclude表示设置匹配的 URL不匹配则不运行此组件。seoRedirect将其设为urlInclude: [//www.bilibili.com/s/video/]注意这里使用的是协议相对形式以//开头省略了https:这是仓库内 URL 模式约定中的常见写法可同时匹配http与https两种协议。该模式既匹配https://www.bilibili.com/s/video/BVxxx也匹配http://www.bilibili.com/s/video/BVxxx。组件在运行前必须通过 URL 判定判定逻辑集中在isComponentEnabled见 src/core/settings/helpers.tsexport const isComponentEnabled (component: ComponentMetadata | string) { // ... 组件存在性检查与启用状态检查 ... // 若指定了排除URL, 任意URL匹配就不加载 if (component.urlExclude component.urlExclude.some(matchUrlPattern)) { return false } // 若指定了包含URL, 所有URL都不匹配时不加载 if (component.urlInclude component.urlInclude.every(lodash.negate(matchUrlPattern))) { return false } return true }判定规则可以总结为组件必须存在且处于启用状态不可配置组件的启用状态固定为其默认值enabledByDefault若定义了urlExclude当前 URL 命中任意一条排除规则则不加载排除优先级高于包含若定义了urlInclude当前 URL 必须命中至少一条包含规则否则不加载。matchUrlPattern是这套判定的核心工具函数见 src/core/utils/index.ts/** 以document.URL作为被测字符串, 移除URL查询参数并调用matchPattern */ export const matchUrlPattern (pattern: string | RegExp) matchPattern(document.URL.replace(window.location.search, ), pattern)它有两个关键行为以当前页面 URLdocument.URL为被测对象并先移除查询参数window.location.search因此像?fromsearch这类跟踪参数不会干扰匹配支持字符串与正则表达式两种模式字符串模式走子串包含判断str.includes(pattern)正则模式走pattern.test(str)。对seoRedirect而言//www.bilibili.com/s/video/作为字符串模式执行的是包含匹配——只要当前 URL 包含该子串组件即被判定为应在当前页面生效。这正是该组件能被限制在 SEO 视频页面运行、而不会在其他页面误触发的根本保障。同一套urlInclude/urlExclude机制还被用于组件加载时src/components/component.ts以及设置面板中组件可见性的判断src/components/settings-panel/WidgetsPanel.vue是整个组件体系通用的页面生效范围约定。四、跳转实现一行代码完成 URL 重写当 URL 匹配通过后组件入口函数被调用entry: () { window.location.assign(document.URL.replace(/s/, /)) }这行代码包含两个动作URL 重写document.URL.replace(/s/, /)将当前地址中的第一个/s/路径段替换为/。以https://www.bilibili.com/s/video/BV1xx为例替换后得到https://www.bilibili.com/video/BV1xx即对应的原视频页面地址。注意String.prototype.replace配合字符串参数只替换第一个匹配而/s/在 URL 中的出现位置正是路径段恰好满足需求。整页跳转window.location.assign(url)在保留浏览器历史记录的前提下导航到新地址用户可按后退键返回 SEO 页。与之相对若使用window.location.replace(url)则会替换当前历史记录条目。该组件未定义reload与unload生命周期——跳转是一次性动作页面即将离开无需清理任何副作用因此保持最小实现是合理的。这一设计也体现了仓库中轻量组件的普遍取舍能用同步entry完成的逻辑绝不引入状态管理。五、完整运行链路从页面加载到跳转发生将上述机制串起来seoRedirect在一次真实访问中的完整运行链路如下用户通过搜索引擎结果进入https://www.bilibili.com/s/video/BVxxxBilibili-Evolved 脚本初始化遍历组件列表并逐个调用isComponentEnabled判定isComponentEnabled对seoRedirect检查组件已启用、urlInclude中//www.bilibili.com/s/video/与当前 URL去除查询参数后匹配成功组件通过判定进入loadComponentsrc/components/component.ts调用其entryentry执行window.location.assign(...)浏览器导航至原视频页面用户获得完整的播放器与弹幕体验。在整个过程中该组件不注入样式、不修改 DOM、不监听事件属于纯入口函数型组件这也使其成为理解 Bilibili-Evolved 组件最小形态的理想范例。六、使用与配置seoRedirect是 Bilibili-Evolved 的内置组件随脚本默认分发无需额外安装。它没有暴露任何可配置选项OptionsMetadata为空行为固定为SEO 页面自动重定向。用户可以在脚本设置面板的视频分类componentsTags.video下找到SEO 页面重定向displayName通过开关控制其启用或停用停用后再次进入 SEO 视频页面将不再自动跳转。若需扩展类似行为例如将其他路径也纳入重定向范围可以参照该组件的结构自行编写用户组件通过urlInclude限定目标页面模式在entry中执行 URL 重写与跳转即可完整类型定义参考 src/components/types.ts 与 registry/lib/components/video/seo-redirect/index.ts。七、小结seoRedirect以 11 行代码展示了 Bilibili-Evolved 组件体系的核心范式defineComponentMetadata声明元数据、urlInclude限定生效范围、entry执行动作。理解它的实现细节等于掌握了阅读和编写仓库内绝大多数轻量组件的钥匙——从 URL 模式匹配matchUrlPattern到启用判定isComponentEnabled再到组件加载loadComponent这条链路贯穿整个项目值得每一位希望深入该项目的开发者仔细研读。赞分享前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载相关推荐Bilibili-Evolved「稍后再看页面-重定向」组件解析连播页跳转普通视频页的实现原理Bilibili Evolved「稍后再看页面 重定向」组件解析连播页跳转普通视频页的实现原理 导读 Bilibili Evolved哔哩哔哩增强脚本中有前端音视频Bilibili-Evolved 极简首页minimalHome组件全面解析配置、实现原理与源码导读Bilibili Evolved 极简首页minimalHome组件全面解析配置、实现原理与源码导读 极简首页 minimalHome 是 Bilib前端音视频Bilibili-Evolved架构深度解析组件化设计与源码实现原理Bilibili Evolved架构深度解析组件化设计与源码实现原理 Bilibili Evolved作为一款强大的哔哩哔哩增强脚本采用基于Webpack的前端音视频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考