BewlyBewly：重新定义Bilibili体验的浏览器扩展
项目地址: https://gitcode.com/gh_mirrors/be/BewlyBewly BewlyBewly是一个专为Bilibili平台设计的现代化浏览器扩展，通过重新设计用户界面来显著提升用户体验。该项目采用Vue 3、TypeScript、Vite、UnoCSS和Pinia等前沿技术栈，结合精心设计的视觉美学，为用户带来焕然一新的Bilibili浏览体验。扩展支持深色模式、现代化的界面设计、增强的内容展示和性能优化等核心功能，兼容Chrome、Edge和Firefox等主流浏览器。
BewlyBewly项目概述与核心价值
BewlyBewly是一个专为Bilibili平台设计的现代化浏览器扩展，旨在通过重新设计用户界面来显著提升用户体验。该项目采用前沿的前端技术栈，结合精心设计的视觉美学，为用户带来焕然一新的Bilibili浏览体验。
项目定位与技术架构
BewlyBewly基于vitesse-webext模板构建，采用了现代化的技术栈：
| 技术组件 | 版本 | 用途 |
|---|---|---|
| Vue 3 | 3.4.27 | 核心前端框架 |
| TypeScript | 5.4.5 | 类型安全的开发 |
| Vite | 5.3.6 | 快速的构建工具 |
| UnoCSS | 0.59.4 | 原子化CSS框架 |
| Pinia | 2.1.7 | 状态管理 |
项目的架构设计采用了模块化的思想，各个功能模块清晰分离：
核心功能特性
BewlyBewly通过以下核心功能重新定义Bilibili体验：
1. 现代化的界面设计
- 借鉴YouTube、Vision OS和iOS的设计理念
- 流畅的动画过渡效果
- 响应式布局适配不同设备
2. 深色模式支持
- 智能的主题切换系统
- 对常用页面的深度适配
- 视觉舒适的色彩方案
3. 增强的内容展示
- 优化的视频卡片布局
- 改进的信息展示方式
- 个性化的内容推荐
4. 性能优化
- 懒加载机制提升页面性能
- 高效的资源管理
- 平滑的滚动体验
技术实现亮点
BewlyBewly在技术实现上展现了多个创新点：
// 示例：使用Composition API实现的状态管理
import { defineStore } from 'pinia'
export const useSettingsStore = defineStore('settings', () => {
const darkMode = ref(false)
const layoutType = ref('grid')
const animationEnabled = ref(true)
return { darkMode, layoutType, animationEnabled }
})
项目的权限配置体现了对用户隐私的重视：
{
"permissions": [
"storage",
"declarativeNetRequest",
"tabs"
],
"host_permissions": [
"*://*.bilibili.com/*",
"*://*.hdslb.com/*"
]
}
多平台兼容性
BewlyBewly支持主流浏览器平台：
| 浏览器 | 安装方式 | 特色支持 |
|---|---|---|
| Chrome | Web Store | 完整功能支持 |
| Edge | Web Store | 原生兼容 |
| Firefox | Add-ons | 特殊权限配置 |
开发理念与设计哲学
BewlyBewly的开发遵循以下核心原则：
- 用户体验优先 - 所有功能设计都以提升用户体验为出发点
- 性能与美观并重 - 在保证视觉美观的同时注重性能优化
- 渐进式增强 - 在不破坏原有功能的基础上添加新特性
- 开源透明 - 代码完全开源，确保用户信任和安全
项目的模块化架构确保了良好的可维护性和扩展性：
BewlyBewly不仅仅是一个简单的样式修改扩展，而是一个完整的Bilibili体验优化解决方案。它通过现代化的技术栈、精心的界面设计和用户至上的开发理念，为用户带来了前所未有的Bilibili浏览体验。
项目技术栈与架构设计分析
BewlyBewly作为一个现代化的浏览器扩展项目，采用了前沿的技术栈和精心设计的架构模式，为Bilibili用户提供了全新的视觉体验和功能增强。该项目在技术选型和架构设计上体现了现代Web开发的核心理念。
技术栈深度解析
前端框架与构建工具
项目采用Vue 3作为核心前端框架，充分利用其Composition API的优势来实现组件逻辑的复用和状态管理。构建工具链基于Vite，提供了极快的冷启动和热更新体验。
样式与UI系统
项目采用UnoCSS作为原子化CSS框架，结合SASS预处理器，构建了高度可定制的样式系统：
| 技术 | 用途 | 优势 |
|---|---|---|
| UnoCSS | 原子化样式 | 极小的包体积，高性能 |
| SASS | CSS预处理 | 变量、嵌套、混合等功能 |
| OverlayScrollbars | 自定义滚动条 | 统一的视觉风格 |
| 自适应样式系统 | 暗色模式适配 | 多主题支持 |
浏览器扩展核心技术
项目基于Manifest V3规范开发，充分利用现代浏览器扩展API：
// 典型的扩展API使用示例
import browser from 'webextension-polyfill'
class BackgroundService {
async initialize() {
// 监听消息通信
browser.runtime.onMessage.addListener(this.handleMessage)
// 管理标签页状态
browser.tabs.onUpdated.addListener(this.handleTabUpdate)
}
private handleMessage = (message: any, sender: any) => {
// 处理扩展内部通信
switch (message.type) {
case 'FETCH_BILIBILI_DATA':
return this.fetchBilibiliData(message.payload)
case 'UPDATE_SETTINGS':
return this.updateSettings(message.payload)
}
}
}
架构设计模式
模块化架构
项目采用高度模块化的架构设计，各个功能模块职责清晰：
状态管理架构
采用Pinia作为状态管理库，设计了清晰的状态流：
// 设置存储示例
export const useSettingsStore = defineStore('settings', {
state: () => ({
theme: 'auto' as 'light' | 'dark' | 'auto',
layoutMode: 'grid' as 'grid' | 'list',
videoQuality: '1080p' as string,
// ...其他设置项
}),
actions: {
async updateSettings(newSettings: Partial<SettingsState>) {
this.$patch(newSettings)
// 持久化到本地存储
await browser.storage.local.set({ settings: this.$state })
},
async loadSettings() {
const result = await browser.storage.local.get('settings')
if (result.settings) {
this.$patch(result.settings)
}
}
},
getters: {
isDarkMode: (state) => {
if (state.theme === 'auto') {
return window.matchMedia('(prefers-color-scheme: dark)').matches
}
return state.theme === 'dark'
}
}
})
通信机制设计
项目实现了高效的扩展内部通信机制：
性能优化策略
资源加载优化
项目采用了多种性能优化技术：
-
代码分割与懒加载
// 动态导入示例 const HeavyComponent = defineAsyncComponent(() => import('./HeavyComponent.vue') ) -
图片优化策略
- WebP格式优先
- 响应式图片加载
- 懒加载实现
-
样式优化
- UnoCSS按需生成
- CSS变量动态主题
- 减少重绘和回流
内存管理
针对浏览器扩展的特殊性，实现了精细的内存管理：
class MemoryManager {
private static instance: MemoryManager
private components = new WeakMap()
static getInstance() {
if (!MemoryManager.instance) {
MemoryManager.instance = new MemoryManager()
}
return MemoryManager.instance
}
// 组件生命周期跟踪
trackComponent(component: any, element: HTMLElement) {
this.components.set(component, {
element,
createdAt: Date.now(),
lastUsed: Date.now()
})
}
// 定期清理不再使用的组件
cleanupUnusedComponents() {
const now = Date.now()
for (const [component, info] of this.components) {
if (now - info.lastUsed > 300000) { // 5分钟未使用
// 执行清理逻辑
this.components.delete(component)
}
}
}
}
安全性与兼容性
安全措施
项目实施了多层次的安全防护：
| 安全层面 | 实施措施 | 效果 |
|---|---|---|
| CSP策略 | 严格的内容安全策略 | 防止XSS攻击 |
| 数据验证 | 输入输出验证 | 防止注入攻击 |
| 权限控制 | 最小权限原则 | 减少攻击面 |
| 通信加密 | HTTPS强制 | 数据传输安全 |
浏览器兼容性
支持多浏览器平台是项目的重要特性：
通过条件编译和特性检测，确保在各浏览器中的一致体验：
// 浏览器特性检测
export class BrowserFeatureDetector {
static supportsWebP(): boolean {
const canvas = document.createElement('canvas')
if (canvas.getContext && canvas.getContext('2d')) {
return canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0
}
return false
}
static isFirefox(): boolean {
return navigator.userAgent.toLowerCase().includes('firefox')
}
static isSafari(): boolean {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
}
}
开发体验与工具链
项目配置了完整的开发工具链，提升开发效率：
| 工具 | 用途 | 配置特点 |
|---|---|---|
| TypeScript | 类型安全 | 严格模式配置 |
| ESLint | 代码质量 | Antfu配置预设 |
| Prettier | 代码格式化 | 统一代码风格 |
| Vitest | 单元测试 | 组件测试支持 |
| HMR | 热重载 | 扩展开发优化 |
这种技术栈和架构设计使得BewlyBewly不仅功能强大，而且具有良好的可维护性和扩展性，为后续功能迭代奠定了坚实基础。
主要功能特性与用户体验改进
BewlyBewly作为一款专注于Bilibili界面优化的浏览器扩展，通过一系列精心设计的功能特性和用户体验改进，为用户带来了全新的B站浏览体验。该扩展借鉴了YouTube、Vision OS和iOS的设计理念，在保持Bilibili原有功能的基础上，实现了视觉和交互上的全面提升。
界面设计与视觉优化
BewlyBewly对Bilibili的界面进行了全面的重新设计，采用了现代化的设计语言和视觉风格：
视觉风格统一化：扩展采用了更加现代化和简洁的设计语言，移除了冗余的视觉元素，使界面更加清爽。通过统一的色彩方案、图标设计和排版规范，确保了整个B站体验的一致性。
暗色模式深度适配：BewlyBewly对常用页面进行了完整的暗色模式适配，包括：
- 主页推荐流
- 视频播放页面
- 动态页面
- 收藏页面
- 历史记录页面
暗色模式不仅提供了舒适的夜间浏览体验，还通过精心调整的色彩对比度确保了内容的可读性。
功能组件与交互优化
扩展引入了多个创新的功能组件，显著提升了用户的操作效率和体验：
智能视频卡片组件：重新设计的视频卡片提供了更丰富的信息展示和更直观的操作入口：
| 功能特性 | 原生B站 | BewlyBewly优化 |
|---|---|---|
| 信息密度 | 较高，信息拥挤 | 合理间距，层次清晰 |
| 操作入口 | 隐藏式，需要悬停 | 显性化，一键操作 |
| 预览功能 | 基础预览 | 增强型预览体验 |
| 响应速度 | 一般 | 优化加载性能 |
增强型搜索体验：搜索功能得到了全面升级，支持：
- 智能搜索建议
- 搜索历史管理
- 快速筛选和排序
- 跨页面搜索一致性
// 搜索历史管理示例代码
class SearchHistoryProvider {
private maxHistoryItems = 10;
private storageKey = 'search_history';
async addToHistory(query: string) {
const history = await this.getHistory();
const filtered = history.filter(item => item !== query);
const updated = [query, ...filtered].slice(0, this.maxHistoryItems);
await this.saveHistory(updated);
}
async getHistory(): Promise<string[]> {
// 从存储中获取搜索历史
return await storage.get(this.storageKey) || [];
}
}
个性化与定制能力
BewlyBewly提供了丰富的个性化设置选项，让用户可以根据自己的偏好定制B站体验：
布局自定义：用户可以根据屏幕尺寸和浏览习惯调整界面布局，包括：
- 卡片大小和密度
- 侧边栏显示/隐藏
- 顶部工具栏配置
- 内容区域宽度
主题与外观：支持多种主题配色方案，并允许用户自定义：
- 主色调和强调色
- 字体大小和样式
- 圆角程度和阴影效果
- 动画速度和效果
性能优化与效率提升
扩展在性能方面进行了深度优化，确保用户体验的流畅性：
资源加载优化：通过懒加载技术和资源预加载策略，减少了页面加载时间：
- 图片懒加载，按需加载可视区域内容
- 组件按需加载，减少初始包体积
- 缓存策略优化，提升重复访问速度
内存管理：采用高效的内存管理机制，避免内存泄漏和性能下降：
- 组件销毁时的资源释放
- 事件监听器的合理管理
- 大数据集的分页和虚拟滚动
// 懒加载实现示例
class LazyLoader {
private observer: IntersectionObserver;
private elements: Map<Element, () => void> = new Map();
constructor() {
this.observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const callback = this.elements.get(entry.target);
if (callback) {
callback();
this.observer.unobserve(entry.target);
this.elements.delete(entry.target);
}
}
});
}, { threshold: 0.1 });
}
observe(element: Element, callback: () => void) {
this.elements.set(element, callback);
this.observer.observe(element);
}
}
无障碍与兼容性考虑
BewlyBewly在设计时充分考虑了无障碍访问和浏览器兼容性：
无障碍支持：确保所有用户都能获得良好的使用体验：
- 键盘导航支持
- 屏幕阅读器兼容
- 高对比度模式
- 字体大小自适应
多浏览器兼容：支持主流的现代浏览器：
- Chrome/Chromium系列
- Microsoft Edge
- Firefox
- 其他基于Chromium的浏览器
通过以上功能特性和用户体验改进，BewlyBewly成功地将Bilibili从一个功能性的视频平台转变为一个既美观又易用的现代化网络应用，为用户提供了更加愉悦和高效的浏览体验。
安装部署与多浏览器兼容性
BewlyBewly作为一款现代化的Bilibili体验增强浏览器扩展，提供了多种灵活的安装方式和出色的多浏览器兼容性支持。无论您是普通用户还是开发者，都能找到适合您的部署方案。
在线商店安装（推荐）
对于大多数用户而言，通过官方浏览器商店安装是最简单安全的方式：
| 浏览器 | 安装链接 | 审核速度 | 更新频率 |
|---|---|---|---|
| Chrome | Chrome Web Store | 快速 | 高 |
| Edge | Edge Add-ons | 中等 | 高 |
| Firefox | Firefox Add-ons | 较慢 | 中等 |
Firefox用户特别注意：安装时需要启用所有请求的权限以确保扩展正常功能。由于Firefox的安全策略限制，某些功能可能需要额外的权限确认。
本地安装方式
对于希望使用最新开发版本或进行自定义修改的用户，BewlyBewly支持本地安装：
Chrome/Edge浏览器本地安装
# 下载最新发布版本
wget https://github.com/hakadao/BewlyBewly/releases/latest/download/extension.zip
# 解压文件
unzip extension.zip -d bewlybewly-extension
安装流程如下：
Firefox本地安装
Firefox需要专门的构建版本：
# 构建Firefox专用版本
pnpm build-firefox
# 生成的扩展文件位于extension-firefox目录
多浏览器兼容性架构
BewlyBewly采用模块化的架构设计来支持多浏览器兼容：
权限系统兼容性
不同浏览器的权限模型存在差异，BewlyBewly通过条件编译实现兼容：
// 权限配置示例
permissions: [
'storage',
'declarativeNetRequest',
'tabs',
...isFirefox
? ['webRequest', 'webRequestBlocking', 'cookies']
: [],
]
后台脚本兼容性
Manifest V3在不同浏览器中的实现差异：
background: (isFirefox || isSafari)
? { scripts: ['./dist/background/index.js'], persistent: isFirefox ? undefined : false }
: { service_worker: './dist/background/index.js' }
开发环境搭建
对于开发者，BewlyBewly提供了完整的开发工具链：
Chrome/Edge开发环境
# 安装依赖
pnpm install
# 创建配置文件目录
mkdir web-ext-profile
# 启动开发服务器
pnpm dev
# 启动带扩展的浏览器实例
pnpm start:chromium
Firefox开发环境
# Firefox专用开发模式
pnpm dev-firefox
# 启动Firefox测试实例
pnpm start:firefox
构建系统详解
BewlyBewly使用现代化的构建工具链：
| 构建目标 | 命令 | 输出目录 | 特性 |
|---|---|---|---|
| Chrome/Edge | pnpm build | extension/ | Manifest V3 |
| Firefox | pnpm build-firefox | extension-firefox/ | 兼容Manifest V2/V3 |
| Safari | pnpm build-safari | extension-safari/ | Safari App Extension |
构建流程如下：
内容安全策略配置
针对不同浏览器的CSP策略：
content_security_policy: isFirefox
? {
extension_pages: 'script-src \'self\'; object-src \'self\'',
}
: {
extension_pages: isDev
? `script-src 'self' http://localhost:${port}; object-src 'self' http://localhost:${port}`
: 'script-src \'self\'; object-src \'self\'',
}
浏览器特定配置
Firefox特定配置
if (isFirefox) {
manifest.browser_specific_settings = {
gecko: {
id: 'addon@bewlybewly.com',
},
}
}
声明式网络请求规则
declarative_net_request: {
rule_resources: [
{
id: 'ruleset_1',
enabled: true,
path: 'assets/rules.json',
},
],
}
故障排除与常见问题
权限问题：如果扩展无法正常工作，请检查浏览器是否授予了所有必要权限。
安装失败：确保使用对应浏览器版本的扩展包，Chrome/Edge使用extension.zip，Firefox使用专门构建的版本。
开发模式问题：开发时如果修改未生效，尝试重新加载扩展并刷新页面。
通过这种精心设计的安装部署和多浏览器兼容性架构，BewlyBewly确保了在各种浏览器环境中都能提供一致优秀的Bilibili体验增强功能。
总结
BewlyBewly通过精心设计的安装部署和多浏览器兼容性架构，确保了在各种浏览器环境中都能提供一致优秀的Bilibili体验增强功能。该项目不仅提供了简单安全的在线商店安装方式，还支持本地安装和灵活的开发者环境搭建。通过模块化的架构设计和条件编译技术，BewlyBewly成功解决了不同浏览器平台的兼容性问题，包括权限系统、后台脚本、内容安全策略等方面的差异，为用户和开发者提供了完整的解决方案。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
