3个技巧：深度定制你的B站浏览体验

3个技巧深度定制你的B站浏览体验【免费下载链接】BewlyBewlyJust make a few small changes to your Bilibili homepage. (English | 简体中文 | 正體中文 | 廣東話)项目地址: https://gitcode.com/gh_mirrors/be/BewlyBewlyBewlyBewly是一款专为Bilibili设计的浏览器扩展它能彻底改变你在B站的浏览体验。通过重新设计界面布局、添加实用功能和提供深度个性化选项这个开源项目让B站主页焕然一新从视频卡片设计到主题配色每一个细节都经过精心打磨。 快速上手5分钟打造个性化B站本地部署开发版如果你喜欢折腾直接从源码开始是最佳选择。项目基于Vue 3和TypeScript构建使用pnpm作为包管理器# 克隆项目仓库 git clone https://gitcode.com/gh_mirrors/be/BewlyBewly cd BewlyBewly # 安装依赖 pnpm install # 启动开发服务器 pnpm dev开发模式下扩展会自动监听文件变化并热重载你可以在Chrome或Edge的扩展管理页面加载解压的扩展文件夹。这种开发方式让你可以实时看到代码修改的效果特别适合想要自定义功能的技术用户。核心架构解析BewlyBewly采用现代化的前端技术栈主要模块包括内容脚本系统src/contentScripts/负责注入到B站页面组件库src/components/包含所有UI组件如视频卡片、设置面板等状态管理使用Pinia进行全局状态管理样式系统支持CSS自定义和主题切换项目结构清晰每个功能模块都有独立的目录便于维护和扩展。 视觉革命不只是换个皮肤视频卡片的重构传统的B站视频卡片布局紧凑但缺乏视觉层次BewlyBewly通过VideoCard组件彻底重新设计了这一核心元素!-- 视频卡片悬停预览功能实现片段 -- script setup const isHover ref(false) const previewVideoUrl ref() watch(() isHover.value, async (newValue) { if (newValue settings.value.enableVideoPreview) { // 获取视频预览数据 const previewData await api.video.getVideoPreview({ bvid: video.bvid, cid: video.cid }) previewVideoUrl.value previewData.data.url } }) /script视频卡片现在支持悬停预览功能鼠标停留在卡片上时自动播放视频片段这个功能极大地提升了浏览效率。卡片采用圆角设计、阴影效果和流畅的过渡动画视觉上更加现代化。主题系统深度定制BewlyBewly的主题系统不仅仅是简单的颜色切换。Appearance组件提供了17种预设主题色还支持完全自定义!-- 主题色选择器实现 -- div v-forcolor in themeColorOptions :keycolor w-20px h-20px rounded-8 cursor-pointer :style{ background: color, transform: color settings.themeColor ? scale(1.3) : scale(1), border: color settings.themeColor ? 2px solid white : 2px solid transparent } clickchangeThemeColor(color) /更厉害的是你甚至可以直接编写自定义CSS代码这意味着你可以完全控制B站页面的每一个像素。想要把B站变成暗黑模式想要自定义字体想要调整间距和布局一切皆有可能。⚡️ 效率提升让浏览更快更智能动漫时间表优化对于动漫爱好者来说BewlyBewly的动漫时间表功能是个神器。项目中的动漫图标系统展示了如何将复杂的时间表信息可视化这个系统不仅美观更重要的是实用。你可以一眼看到今天更新的动漫快速跳转到观看页面还能标记已追番的动漫。图标采用彩色和灰色两种状态清晰地区分已观看和未观看的内容。横向滚动浏览传统的B站首页需要不断向下滚动BewlyBewly引入了横向滚动组件让你可以像浏览手机应用一样滑动查看内容。这个功能在HorizontalScrollView.vue组件中实现特别适合浏览频道订阅和推荐内容。广告拦截与内容过滤内置的广告拦截功能会自动过滤首页和搜索结果中的推广内容让你的浏览更加纯净。这个功能通过内容脚本注入实现在不影响页面性能的前提下提供更好的用户体验。 高级玩法解锁隐藏功能自定义CSS注入如果你懂一点CSSBewlyBewly的自定义CSS功能将是你最好的朋友。在设置面板中开启自定义CSS选项后你可以编写任意样式代码/* 隐藏首页推荐区域 */ .home-feed { display: none !important; } /* 修改视频标题样式 */ .video-card__title { color: var(--bew-theme-color) !important; font-weight: 600 !important; } /* 调整卡片间距 */ .video-card { margin-bottom: 20px !important; border-radius: 12px !important; }键盘快捷键配置虽然BewlyBewly本身没有提供快捷键配置界面但你可以通过浏览器扩展API或者配合其他工具实现扩展管理快捷键在Chrome的扩展管理页面设置快捷键配合AutoHotkey创建自定义脚本实现复杂操作使用扩展API通过扩展的background脚本监听键盘事件数据持久化与备份所有设置都存储在浏览器的本地存储中你可以通过扩展的存储API访问这些数据。定期导出设置是个好习惯// 在控制台中导出设置 chrome.storage.local.get(null, (data) { console.log(JSON.stringify(data, null, 2)) }) 常见问题排错指南权限请求说明安装时浏览器可能会提示可读取浏览历史这是因为扩展使用了tabs权限来识别B站页面。实际上扩展只会检查当前标签页是否为B站页面不会收集任何浏览历史数据。项目完全开源代码透明可审计。与其他扩展的兼容性如果遇到与其他B站增强插件如Bilibili-Evolved的冲突可以尝试以下解决方案分步启用先启用一个扩展测试功能后再启用另一个功能隔离在BewlyBewly设置中关闭可能冲突的功能自定义CSS覆盖使用自定义CSS修复样式冲突性能优化技巧如果你的电脑配置较低可以关闭一些视觉效果来提升性能关闭毛玻璃效果禁用视频悬停预览减少动画过渡时间使用轻量级主题 加入社区从用户到贡献者项目架构概览BewlyBewly采用模块化设计主要目录结构如下src/ ├── components/ # 所有UI组件 ├── contentScripts/ # 注入到B站页面的脚本 ├── background/ # 扩展后台服务 ├── stores/ # 状态管理 ├── styles/ # 样式文件 └── utils/ # 工具函数如何贡献代码项目使用TypeScript和Vue 3开发代码风格遵循ESLint规范。如果你想要贡献代码Fork项目创建自己的分支安装依赖pnpm install开发调试pnpm dev提交PR确保代码通过所有测试报告问题与建议遇到bug或有功能建议可以通过以下方式参与GitHub Issues详细描述问题现象和复现步骤功能请求说明需求场景和预期效果代码审查帮助审查其他人的PR 未来展望B站浏览的新范式BewlyBewly不仅仅是一个界面美化工具它代表了B站浏览体验的进化方向。随着项目的不断发展我们期待看到更多创新功能AI推荐优化基于用户观看历史的智能推荐跨平台同步设置在多设备间同步插件生态系统允许第三方开发者创建插件无障碍支持为视障用户提供更好的体验无论你是普通用户还是开发者BewlyBewly都为你提供了一个重新定义B站浏览体验的机会。通过这个开源项目你不仅可以使用更好的界面还可以参与其中共同打造理想的B站浏览环境。记住最好的工具是那些可以按照你的需求定制的工具。BewlyBewly给了你这个能力——现在去创造属于你自己的B站体验吧【免费下载链接】BewlyBewlyJust make a few small changes to your Bilibili homepage. (English | 简体中文 | 正體中文 | 廣東話)项目地址: https://gitcode.com/gh_mirrors/be/BewlyBewly创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考