BewlyBewly开源项目帮助指南
【免费下载链接】BewlyBewlyImprove your Bilibili homepage by redesigning it, adding more features, and personalizing it to match your preferences. (English | 简体中文 | 正體中文 | 廣東話)项目地址: https://gitcode.com/gh_mirrors/bew/BewlyBewly
BewlyBewly 是一个专为提升Bilibili用户体验设计的浏览器扩展程序。它通过重设计B站首页界面并添加更多功能，允许用户根据个人偏好进行个性化定制。灵感源自YouTube、Vision OS及iOS，这款扩展提供了更加美观且用户友好的界面。
如何解决多平台部署问题
问题现象
无法确定适合自己浏览器的安装方式，或安装后无法正常启用扩展。
排查步骤
- 确认使用的浏览器类型及版本
- 检查浏览器扩展商店的可用性
- 查看扩展是否需要特定权限
解决验证
Chrome/Edge浏览器
- 访问浏览器内置扩展商店
- 搜索"BewlyBewly"并安装
- 启用扩展并刷新B站页面
Firefox浏览器
- 打开Firefox附加组件页面
- 搜索并安装BewlyBewly扩展
- 在扩展管理中启用所有必要权限
开发环境部署
- 克隆仓库：
git clone https://gitcode.com/gh_mirrors/bew/BewlyBewly - 安装依赖：
pnpm install - 构建项目：
pnpm run build - 在浏览器中加载解压后的扩展文件夹
- 克隆仓库：
验证方法
打开B站首页，观察界面是否已应用新的设计样式，顶部导航栏是否显示BewlyBewly特有的功能按钮。
如何解决权限设置问题
问题现象
扩展安装后提示权限不足，或部分功能无法正常使用。
排查步骤
- 检查扩展的权限请求列表
- 确认是否授予了必要的网站访问权限
- 查看浏览器隐私设置是否限制了扩展功能
解决验证
- 打开浏览器扩展管理页面
- 找到BewlyBewly扩展并点击"详情"
- 确保"网站访问"权限设置为"在bilibili.com上"
- 启用"存储"和"标签"相关权限
💡 最小权限原则：仅授予扩展完成其核心功能所必需的权限，减少潜在的安全风险。例如，本扩展只需要访问bilibili.com的权限，无需访问所有网站的权限。
验证方法
尝试使用收藏、历史记录等需要权限的功能，确认是否可以正常保存和读取数据。
如何解决界面显示异常问题
问题现象
安装扩展后B站页面布局错乱、样式异常或部分功能缺失。
排查步骤
- 检查扩展是否为最新版本
- 确认是否有其他扩展与之冲突
- 尝试刷新页面或重启浏览器
解决验证
资源刷新
- 按下Ctrl+Shift+R强制刷新页面
- 清除浏览器缓存数据
- 重新加载B站页面
版本检查
- 查看扩展管理页面的版本信息
- 确认是否有可用更新
- 更新至最新版本
冲突排查
- 暂时禁用其他浏览器扩展
- 逐一启用排查冲突扩展
- 保留必要扩展，禁用冲突项
验证方法
观察B站首页布局是否恢复正常，所有功能按钮是否显示完整，动画效果是否流畅。
环境依赖说明
| 依赖项 | 版本要求 | 功能说明 |
|---|---|---|
| Node.js | ≥14.0.0 | 运行环境 |
| pnpm | ≥6.0.0 | 包管理工具 |
| 现代浏览器 | 最新版 | 扩展运行环境 |
| TypeScript | 内置 | 类型检查 |
| Vite | 内置 | 构建工具 |
技术原理（点击展开）
BewlyBewly基于vitesse-webext模板开发，采用现代前端技术栈构建。扩展通过内容脚本(content scripts)方式注入到B站页面，修改DOM结构并添加自定义样式。核心功能通过Vue.js组件实现，使用Pinia进行状态管理，通过浏览器的storage API实现数据持久化。
扩展的工作流程：
- 浏览器加载B站页面
- 扩展注入内容脚本
- 脚本修改页面结构和样式
- 通过背景页与B站API交互
- 提供个性化界面和功能
附录：常见问题速查表
| 问题 | 快速解决方案 |
|---|---|
| 扩展无法安装 | 检查浏览器版本，确保兼容 |
| 界面无变化 | 强制刷新页面(Ctrl+Shift+R) |
| 功能按钮缺失 | 检查扩展权限设置 |
| 页面加载缓慢 | 禁用其他冲突扩展 |
| 数据无法保存 | 确认存储权限已启用 |
| 多语言不生效 | 检查系统语言设置 |
【免费下载链接】BewlyBewlyImprove your Bilibili homepage by redesigning it, adding more features, and personalizing it to match your preferences. (English | 简体中文 | 正體中文 | 廣東話)项目地址: https://gitcode.com/gh_mirrors/bew/BewlyBewly
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
