超全BewlyBewly开发指南：从环境搭建到插件打包

你还在为Bilibili主页样式单调、功能有限而烦恼吗？BewlyBewly项目通过重新设计界面、添加更多功能并根据个人喜好进行个性化设置，帮助你打造专属的Bilibili主页体验。本文将带你从零开始搭建开发环境，深入了解项目结构，并完成插件打包的全流程，让你轻松参与到这个强大工具的开发中。

项目概述

BewlyBewly是一个旨在改进Bilibili主页的开源项目，它允许用户通过重新设计界面、添加更多功能以及根据个人偏好进行个性化设置来提升Bilibili的使用体验。项目支持多语言，包括英文、简体中文、繁体中文和广东话，满足不同用户群体的需求。

项目的核心功能模块包括：

• 自定义主页设计
• 增强的视频推荐系统
• 个性化设置选项
• 多种主题和样式选择

环境搭建

准备工作

在开始开发之前，确保你的开发环境满足以下要求：

• Node.js v20.14.2或更高版本
• pnpm包管理器 v9.4.0或更高版本
• Git版本控制工具

克隆仓库

首先，克隆项目仓库到本地：

git clone https://gitcode.com/gh_mirrors/bew/BewlyBewly.git
cd BewlyBewly

安装依赖

使用pnpm安装项目依赖：

pnpm install

项目的依赖配置文件为package.json，其中包含了开发和生产环境所需的各种依赖包，如Vue、Vite、TypeScript等。

项目结构解析

BewlyBewly项目采用了清晰的模块化结构，主要分为以下几个部分：

核心目录结构

src/
├── background/        # 后台服务脚本
├── components/        # Vue组件
├── contentScripts/    # 内容脚本，用于修改网页内容
├── options/           # 插件选项页面
├── popup/             # 浏览器扩展弹出页面
├── styles/            # 样式文件
└── manifest.ts        # 扩展清单配置

关键文件说明

• src/manifest.ts: 浏览器扩展的清单文件，定义了扩展的基本信息、权限、内容脚本等。
• vite.config.ts: Vite构建工具的配置文件，用于开发环境和生产环境的构建配置。
• tsup.config.ts: TypeScript打包工具的配置文件，用于处理TypeScript代码的编译和打包。

开发流程

启动开发服务器

使用以下命令启动开发服务器：

pnpm dev

这将启动一个开发服务器，并监听文件变化，自动重新构建和刷新页面。开发服务器的配置可以在vite.config.ts中找到。

主要开发模块

1. UI组件开发：所有的Vue组件都存放在src/components/目录下。例如，搜索栏组件src/components/SearchBar/SearchBar.vue用于实现自定义搜索功能。

2. 内容脚本开发：内容脚本存放在src/contentScripts/目录下，这些脚本会被注入到Bilibili网页中，用于修改页面结构和样式。例如，src/contentScripts/views/Home/Home.vue是主页的自定义视图组件。

3. 后台逻辑开发：后台服务脚本存放在src/background/目录下，用于处理扩展的后台任务和消息通信。

调试扩展

开发过程中，可以通过以下命令在浏览器中加载扩展进行调试：

# Chrome浏览器
pnpm start:chromium

# Firefox浏览器
pnpm start:firefox

这些命令会自动构建扩展并在相应的浏览器中加载，方便开发人员进行调试和测试。

插件打包

构建生产版本

当开发完成后，可以使用以下命令构建生产版本的扩展：

# 构建Chrome版本
pnpm build

# 构建Firefox版本
pnpm build-firefox

构建过程会将源代码编译、压缩并打包到extension或extension-firefox目录中。

生成发布包

构建完成后，可以使用以下命令生成浏览器扩展的发布包：

# 生成Chrome扩展包 (CRX格式)
pnpm pack:crx

# 生成Firefox扩展包 (XPI格式)
pnpm pack:xpi

生成的扩展包将保存在项目根目录下，可以直接提交到Chrome Web Store或Firefox Add-ons市场。

高级配置

自定义主题

BewlyBewly支持自定义主题，主题样式文件存放在src/styles/目录下。你可以通过修改src/styles/variables.scss文件来自定义颜色、字体等样式变量。

多语言支持

项目支持多语言，语言文件存放在src/_locales/目录下。你可以通过添加新的语言文件来支持更多语言，或修改现有文件来完善翻译。

总结与展望

通过本指南，你已经了解了BewlyBewly项目的环境搭建、开发流程和插件打包的全流程。项目的模块化结构和清晰的代码组织使得扩展功能的开发变得简单而高效。

未来，BewlyBewly计划添加更多个性化功能，如AI推荐、高级数据分析等。我们欢迎更多开发者参与到项目中来，一起打造更好的Bilibili使用体验。

如果你有任何问题或建议，可以查阅项目的官方文档或提交Issue进行反馈。

别忘了点赞、收藏和关注项目，以便获取最新的更新和更多开发教程！