1135 积分	1 好友	152 主题

[JS/TS] 基于Vue与TypeScript的B站界面美化与功能增强浏览器插件开发

发表于昨天 17:47 | 查看: 4| 回复: 0

BewlyCat 是一个基于开源项目 BewlyBewly 二次开发并授权的 Bilibili（哔哩哔哩）浏览器扩展。它在保留原版核心美化功能的基础上，针对开发者个人习惯与用户需求进行了大量功能增删与体验优化，旨在为 B 站网页端用户提供更轻量、更强大的定制化体验。

BewlyCat扩展界面示意图

该插件最初源于开发者对自身使用习惯的调整，现已演变为一个专注于 B站界面美化与功能增强 的工具。它通过移除冗余资源、新增实用功能，在实现高度定制化的同时，将插件体积大幅压缩，提升了加载与运行效率。

功能设置面板展示

BewlyCat 引入了一系列增强交互与内容管理的新特性：

播放体验优化：
- 音量均衡：支持为不同 UP 主设置独立的音量增减值。
- 播放记忆：自动记录视频上次播放的倍速。
- 合集优化：支持合集视频随机播放、播放完毕后自动关闭页面、保持合集默认播放模式。
- 播放器样式：可设置默认播放器样式，并优化宽屏模式下的页面滚动对齐。
交互与效率提升：
- 后台打开：支持通过后台标签页打开视频卡片及顶栏链接。
- 快捷键自定义：参考了同类插件的设计，提供了高度可定制的快捷键支持，这对于熟悉前端框架如 Vue 和 TypeScript 的开发者来说，定制起来也更为直观。
- 导航增强：首页推荐列表支持前进与后退操作。
界面与内容管理：
- 暗黑模式调色：允许自定义暗色模式的基准色调。
- 外置“稍后再看”：在视频详情页外部直接提供“稍后再看”按钮。
- 内容过滤：在 Web 端支持按“点赞数/播放量”比例过滤推荐视频。
- 权益快捷入口：在用户面板中集成大会员权益领取入口。

为追求极致轻量化与可维护性，项目也进行了一些精简：

体积大幅缩减：移除了内置字体文件，将扩展包体积从 14.4MB 锐减至约 600KB。
功能精简：
- 移除了粤语翻译功能（依赖原版模块，缺失时显示英文）。
- 移除了部分非必要的交互动画（如抽屉开关动画）。
- 重构并移除了旧版顶栏设计，以降低维护复杂度。

支持平台：
- Chrome：主推平台，可通过 Chrome 网上应用商店安装（审核可能有延迟）。
- Edge：支持通过 Edge 外接程序商店安装。
- Firefox：已上架 Firefox 浏览器扩展商店。
本地安装：可从项目的 GitHub Release 页面下载稳定版 .zip 文件，解压后通过浏览器“开发者模式”加载已解压的扩展程序进行安装。
版本适配：请注意，为适配 B 站于 2025 年 5 月进行的页面分区调整，请确保安装 v1.0.2 及以上版本，否则部分功能（如排行榜）可能无法正常使用。