Bilibili-Evolved技术指南模块化B站增强脚本架构解析与配置实践【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-EvolvedBilibili-Evolved是一款基于TypeScript和Vue.js构建的模块化用户脚本增强工具通过组件化架构为Bilibili平台提供深度定制能力。该工具采用现代前端技术栈支持超过70个功能组件涵盖界面优化、内容过滤、交互增强等核心领域为中级开发者提供高度可扩展的B站体验增强解决方案。技术架构解析模块化设计与插件系统Bilibili-Evolved采用分层架构设计核心系统分为三个主要层次基础框架层、组件管理层和用户界面层。项目基于TypeScript 5.8.3和Vue.js 2.7.14构建使用Webpack 5进行模块打包支持现代JavaScript特性。核心架构设计基础框架层位于src/core/目录提供核心API和服务core-apis.ts导出所有核心API模块settings.ts配置管理系统life-cycle.ts组件生命周期管理observer.tsDOM观察器与响应式系统组件管理层采用声明式配置模式每个组件通过元数据定义其行为// registry/lib/components/video/player/remember-speed/index.ts export const component RememberSpeedComponent.createOptions({ name: rememberVideoSpeed, displayName: 记忆倍速, description: { zh-CN: 提高视频播放器的倍速记忆体验..., }, tags: [componentsTags.video], urlInclude: playerUrls, options: { globalSpeed: { displayName: 全局记忆倍速值, defaultValue: 1, validator: val lodash.clamp(parseFloat(val), 0.5, 5) || 1, }, fixGlobalSpeed: { displayName: 固定全局倍速值, defaultValue: false, }, }, })插件系统支持动态加载和热更新组件通过registry/lib/components/目录组织按功能分类管理。每个组件包含独立的TypeScript源码、Vue组件和样式文件。配置管理系统配置管理采用响应式设计支持实时更新和持久化存储配置类型存储位置更新机制作用范围组件开关localStorage实时同步全局生效组件参数组件私有存储条件触发页面级作用域用户偏好独立配置对象手动保存会话级持久化核心功能模块详解界面定制系统界面定制模块位于registry/lib/components/style/目录提供完整的视觉重定义能力。主要功能包括自定义顶栏(custom-navbar/)支持动态替换B站原生导航栏夜间模式(dark-mode/)提供多种暗色主题方案首页重设计(home-redesign/)重构B站首页布局图Bilibili-Evolved设置面板提供完整的组件管理和配置界面内容过滤引擎动态过滤器组件(registry/lib/components/feeds/filter/)采用规则引擎设计支持多维度内容筛选// registry/lib/components/feeds/filter/options.ts export const options defineOptionsMetadata({ types: { defaultValue: [] as number[], displayName: 过滤动态类型, hidden: true, }, patterns: { defaultValue: [] as FeedsFilterPatternConfig[], displayName: 过滤关键词, hidden: true, }, sideCards: { defaultValue: [] as number[], displayName: 过滤侧边栏, hidden: true, }, })过滤规则配置示例{ patterns: [ { key: ad_filter, pattern: 广告|推广|营销, enabled: true }, { key: spam_filter, pattern: 点击查看|立即下载, enabled: true } ], types: [1, 3, 5], sideCards: [2, 4] }播放器增强模块视频播放器增强组件位于registry/lib/components/video/player/目录提供丰富的播放控制功能组件名称功能描述技术实现remember-speed记忆播放速度localStorage存储 播放器事件监听extend-speed扩展倍速范围播放器API重写 UI覆盖custom-auto-play自定义自动播放页面状态管理 媒体查询screenshot视频截图Canvas绘制 Blob生成配置实践从基础到高级环境搭建与项目部署系统要求Node.js 16 或 Bun 1.0TypeScript 5.8.3pnpm 10.3.0 (推荐包管理器)项目初始化# 克隆项目仓库 git clone https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved # 安装依赖 cd Bilibili-Evolved pnpm install # 开发环境构建 pnpm run build-core pnpm run build-features开发服务器启动# 启动开发服务器 cd dev-tools/dev-server pnpm start # 浏览器访问 http://localhost:5173组件开发规范组件目录结构registry/lib/components/{category}/{component-name}/ ├── index.ts # 组件主入口 ├── component.ts # 组件逻辑实现 ├── options.ts # 配置选项定义 ├── Widget.vue # 可选UI组件 └── *.scss # 样式文件组件元数据定义import { defineComponentMetadata } from /components/define export const component defineComponentMetadata({ name: customComponent, displayName: 自定义组件, description: 组件功能描述, author: { name: 开发者名称, link: https://github.com/username, }, tags: [video, player], urlInclude: [*://*.bilibili.com/video/*], urlExclude: [], options: { // 配置项定义 }, entry: async () { // 组件入口逻辑 }, unload: async () { // 组件卸载逻辑 }, reload: async () { // 组件重载逻辑 }, })性能优化配置组件加载策略优化按需加载根据URL匹配规则动态加载组件延迟执行非关键组件延迟到页面加载完成后执行资源缓存利用Service Worker缓存组件资源配置示例// 在设置面板中配置性能选项 { performance: { lazyLoadComponents: true, componentLoadDelay: 2000, maxConcurrentLoads: 3, cacheStrategy: aggressive }, memoryManagement: { unloadInactiveComponents: true, gcInterval: 300000, maxComponentInstances: 20 } }故障排查与调试方法常见问题诊断问题1组件加载失败# 检查浏览器控制台错误 1. 打开开发者工具 (F12) 2. 切换到Console标签页 3. 查看组件加载错误信息 4. 检查网络请求状态问题2样式冲突/* 添加组件作用域前缀避免冲突 */ .be-component-name { /* 组件样式 */ } /* 使用!important覆盖B站原生样式 */ .be-override { display: none !important; }问题3API调用限制// 使用代理模式处理API限制 const proxyApiCall async (url, options) { try { return await fetch(url, options) } catch (error) { if (error.status 429) { // 实现指数退避重试 await delayWithExponentialBackoff(retryCount) return proxyApiCall(url, options) } throw error } }调试工具使用内置调试功能组件追踪src/core/performance/component-trace.tsPromise追踪src/core/performance/promise-trace.ts性能统计src/core/performance/stats.ts调试命令// 在浏览器控制台中执行 window.BE_DEBUG { components: true, // 启用组件调试 performance: true, // 启用性能监控 events: true // 启用事件追踪 } // 查看组件状态 console.log(window.__BE_COMPONENTS__)进阶应用自定义组件开发组件开发工作流开发环境配置// tsconfig.json 关键配置 { compilerOptions: { target: ES2020, module: ESNext, lib: [ES2020, DOM], baseUrl: ., paths: { /*: [src/*], /core/*: [src/core/*], /components/*: [src/components/*] } } }组件测试流程在registry/lib/components/创建组件目录实现组件逻辑和UI运行本地开发服务器测试提交到组件仓库通过设置面板在线安装测试集成第三方服务API服务集成示例// 集成外部翻译服务 export const translateComponent defineComponentMetadata({ name: externalTranslate, entry: async () { const { addComponentListener } await import(/core/settings) addComponentListener(externalTranslate, async (enabled) { if (enabled) { // 加载翻译服务SDK await loadTranslationService() // 注册文本翻译处理器 registerTextProcessor((text) { return translateText(text, zh-CN, en-US) }) } }) } })性能监控与优化组件性能指标// 组件性能监控实现 const monitorComponentPerformance (componentName: string) { const startTime performance.now() return { start: () { performance.mark(${componentName}-start) }, end: () { performance.mark(${componentName}-end) performance.measure( ${componentName}-duration, ${componentName}-start, ${componentName}-end ) const duration performance.now() - startTime if (duration 100) { console.warn(组件 ${componentName} 加载时间过长: ${duration}ms) } } } }部署与维护策略生产环境构建构建配置# 生产环境构建命令 pnpm run build-core --mode production pnpm run build-features --mode production # 生成用户脚本 # 输出文件: dist/bilibili-evolved.user.jsCDN部署// webpack/webpack.prod.ts 生产配置 export default { mode: production, optimization: { minimize: true, minimizer: [new TerserPlugin()], splitChunks: { chunks: all, minSize: 20000, maxSize: 50000, }, }, output: { filename: bilibili-evolved.user.js, path: path.resolve(__dirname, ../../dist), }, }版本管理与更新版本控制策略主版本架构重大变更次版本功能新增或修改修订版本Bug修复和优化更新机制// src/core/version.ts 版本检查 export const checkForUpdates async () { const currentVersion getCurrentVersion() const latestVersion await fetchLatestVersion() if (isNewerVersion(latestVersion, currentVersion)) { showUpdateNotification(latestVersion, { changelog: await fetchChangelog(latestVersion), downloadUrl: getDownloadUrl(latestVersion), isBreakingChange: checkBreakingChanges(currentVersion, latestVersion) }) } }最佳实践与性能调优内存管理优化组件生命周期管理// 组件资源清理 const manageComponentResources (component) { const resources { observers: [], listeners: [], timers: [], elements: [] } return { addObserver: (observer) { resources.observers.push(observer) }, addListener: (element, event, handler) { element.addEventListener(event, handler) resources.listeners.push({ element, event, handler }) }, cleanup: () { // 清理所有资源 resources.observers.forEach(obs obs.disconnect()) resources.listeners.forEach(({ element, event, handler }) { element.removeEventListener(event, handler) }) resources.timers.forEach(timer clearTimeout(timer)) resources.elements.forEach(el el.remove()) } } }错误处理与日志错误收集系统// 统一错误处理 export const errorHandler { logError: (error: Error, context: string) { console.error([Bilibili-Evolved] ${context}:, error) // 发送错误报告可选 if (ENABLE_ERROR_REPORTING) { sendErrorReport({ error: error.message, stack: error.stack, context, timestamp: Date.now(), userAgent: navigator.userAgent }) } }, wrapComponent: (componentFunction: Function, componentName: string) { return async (...args) { try { return await componentFunction(...args) } catch (error) { errorHandler.logError(error, 组件 ${componentName} 执行失败) throw error } } } }图组件管理界面支持在线安装、批量操作和配置管理通过模块化架构设计和完善的配置系统Bilibili-Evolved为B站用户提供了高度可定制的增强体验。项目采用现代前端技术栈支持热更新和动态加载开发者可以基于现有组件体系快速扩展功能或创建自定义组件。对于需要深度定制B站体验的中级用户和开发者该项目提供了完整的技术解决方案和丰富的扩展能力。【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考