BewlyBewly 广东话版 README 全解：Bilibili 界面美化扩展的安装、构建与贡献指南

前端【免费下载链接】BewlyBewlyJust make a few small changes to your Bilibili homepage. (English | 简体中文 | 正體中文 | 廣東話)项目地址https://gitcode.com/gh_mirrors/be/BewlyBewly点击查看免费下载导读本文以 BewlyBewly 仓库的广东话版说明文档 README-jyut.md 为骨架系统梳理这一 Bilibili 浏览器扩展的定位、安装方式在线商店与离线打包以及从零开始的开发构建流程并结合仓库内 manifest 清单、内容脚本入口 与 应用根组件 等源码深入解释其权限设计、页面注入机制与多页面架构。读完本文你将掌握在 Chrome / Edge / Firefox 上安装与调试 BewlyBewly 的完整方案并能独立搭建开发环境、执行构建打包、遵循分支与 Commit 规范参与贡献。 项目介绍它不是功能增强而是 UI 重设计BewlyBewly 是一款面向 Bilibili 的浏览器扩展核心目标是通过重新设计 Bilibili 的 UI 来提升用户体验设计灵感源自 YouTube、Vision OS 与 iOS让页面更具视觉吸引力与易用性。仓库根目录下的 README-jyut.md 开篇即强调了两条重要定位以页面调整与改善为主而非完善功能与提升效率——因此它不追求功能越多越好而是专注界面观感与交互细节。深色模式只适配常用页面——出于维护效率与难度考虑较少使用的页面不会被逐一适配深色主题。从源码结构看这一重设计的载体是一套完整的 Vue 应用入口 src/contentScripts/index.ts 在支持的页面上注入#bewly容器挂载 App.vue其中通过pages映射懒加载 Home / Search / Anime / History / WatchLater / Favorites / Moments 七大内置页面对应 src/enums/appEnums.ts 中的AppPage枚举替换原站页面渲染。项目基于 vitesse-webext 的依赖Vite、tsup、web-ext、webext-bridge 等中可以得到印证。⚠️ 安装前须知关于 tabs 权限的警告README 以[!CAUTION]提醒用户安装后浏览器可能会提示该扩展可以读取你的浏览历史。原因是 BewlyBewly 在 manifest 中申请了tabs权限。查看 src/manifest.ts 可以看到权限数组为permissions: [ storage, declarativeNetRequest, tabs, ...isFirefox ? [webRequest, webRequestBlocking, cookies] : [], ],其中tabs权限在规范上确实可以用来读取每个分页从而获知浏览历史但本项目实际并未使用这一能力。浏览器出于安全考虑会按最坏情况与最高风险来提示用户而由于项目完全开源任何人都可以直接阅读源码核实其真实行为。该 manifest 同时声明了*://*.bilibili.com/*与*://*.hdslb.com/*的主机权限src/manifest.ts并对 Firefox 额外启用webRequest、webRequestBlocking、cookies权限这与 README 中Firefox 用户需开启全部权限的提醒相互印证。⬇️ 安装指南线上商店与离线打包线上安装推荐BewlyBewly 已上架主流浏览器商店官方推荐的下载渠道如下ChromeChrome 线上应用程式商店扩展 IDbbbiejemhfihiooipfcjmjmbfdmobobpEdge同样建议从 Chrome 商店安装FirefoxFirefox Add-ons 商店README 特别给出一条实用建议[!TIP]即使你日常使用 Edge也优先从 Chrome 商店安装。原因有二其一Chrome 商店的审核速度远快于 Edge Add-ons其二Chrome 商店版本修复严重 bug 的速度更快。这意味着你在 Edge 中同样可以使用 Chrome 商店版扩展。Firefox 用户特别提醒由于 Firefox 对权限的处理方式不同README 用[!WARNING]强调使用 Firefox 时必须手动开启图片中展示的全部权限否则扩展无法正常使用。这一要求与 src/manifest.ts 中为 Firefox 单独配置的browser_specific_settings.gecko.idaddonbewlybewly.com以及多出的webRequest/cookies权限一一对应属于 Firefox 平台特有的必要配置。离线安装本地加载对于无法访问商店或需要测试最新代码的场景README 提供两种离线安装途径CI 自动构建由持续集成自动构建最新代码产物Releases 稳定版从官方 Release 页面下载稳定版本包。方式一拖拽安装Edge Chrome最推荐从 Releases 下载extension.zip在 Edge 打开edge://extensions或在 Chrome 打开chrome://extensions直接将下载好的extension.zip拖入浏览器窗口即可完成安装。这是 README 标注为RECOMMENDED的安装方式全程无需解压。方式二开发者模式加载解压目录如果需要加载解压后的源码目录例如配合本地构建产物调试可参考以下步骤Edge下载并解压extension.zip地址栏输入edge://extensions/回车打开「开发人員模式」点击「載入解壓縮」选择解压后的扩展文件夹完成加载。Chrome下载并解压extension.zip地址栏输入chrome://extensions/回车打开「开发者模式」点击「加载已解压的扩展程序」选择解压后的扩展文件夹完成加载。注意方式二要求扩展产物已经构建完成。本地未构建过代码时应先执行下文中的pnpm build产物位于extension/目录。 开发与构建从零搭建 BewlyBewly 开发环境若想参与开发或本地调试README 指引参见 docs/CONTRIBUTING-jyut.md。项目基于Vite构建前置依赖为Node.js与pnpm官方建议使用Visual Studio Code进行开发。开发Chrome / Edge第一种方法自动启动浏览器# 安裝依賴 pnpm install # 建立一個用家帳戶資料夾用於延伸功能存儲登入狀態 mkdir web-ext-profile # 運行專案 pnpm dev # 打完呢條指令之後會自動開啓一個新嘅 Chrome 視窗並且打開 BiliBili 網站 pnpm start:chromium执行完毕后会自动开启一个新的 Chrome 窗口并打开 Bilibili 网站。之后每次修改扩展代码都会自动重新加载只需刷新网页即可看到改动效果。这里的web-ext-profile目录专门用于存储扩展的登录状态pnpm dev启动开发构建pnpm start:chromium则由 web-ext 中的脚本定义start:chromium: web-ext run --source-dir ./extension --targetchromium其startUrl默认指向https://www.bilibili.com/。第二种方法手动加载到浏览器pnpm install pnpm dev然后在 Chrome 打开chrome://extensionsEdge 为edge://extensions开启「开发人員模式」点击「載入解壓縮」选择构建生成的extension/文件夹即可。每次改动代码后推荐点击 Extensions Reloader 按钮重新加载扩展再刷新页面验证效果。两种开发方式的差别第一种通过 web-ext 自动管理浏览器实例与登录状态第二种更贴近手工调试流程适合需要保留浏览器会话的场景。两者都需要先由pnpm dev产出extension/目录。构建Chrome / Edgepnpm build构建完成后打包extension/目录下的全部文件即可分发。从 package.json 可以看到构建链路由run-s clear build:web build:prepare build:js build:bg串行组成build:webVite 构建 options/popup 页面、build:preparescripts/prepare.ts 生成 manifest 等、build:jsvite.config.content.ts 构建内容脚本、build:bgtsup 构建后台脚本最终产出可直接加载或打包的extension/目录。开发与构建FirefoxFirefox 的开发流程与 Chromium 系类似只是命令与产物目录不同# 安裝依賴 pnpm install # 建立用家帳戶資料夾 mkdir web-ext-profile # 運行專案 pnpm dev # 自動開啓一個新嘅 Firefox 視窗並打開 BiliBili pnpm start:firefox对应脚本为start:firefox: web-ext run --source-dir ./extension-firefox --targetfirefox-desktop。Firefox 的手动加载方式pnpm install pnpm dev-firefox然后在浏览器输入about:addons进入「Extensions」后点击「Debug Add-ons」加载构建生成的extension-firefox/文件夹。Firefox 的构建命令pnpm build-firefox构建完成后打包extension-firefox/目录下的文件。从 package.json 可见build-firefox通过FIREFOXtrue环境变量切换构建目标该标志在 scripts/utils.ts 中被解析并直接影响 src/manifest.ts 中后台脚本形态Firefox 使用background.scripts而非service_worker、权限列表与内容安全策略等平台差异配置。仓库还提供pnpm build-safari与pnpm convert-safari脚本可产出extension-safari/产物并转换为 macOS 项目见 package.json 中的convert-safari。 贡献指南分支、Commit 与 i18n 规范分支策略永久分支 Main用于修 bug、新功能开发、性能改进以及语言文件i18n维护临时分支feat/提交新功能doc/仅文档改动、无功能变动fix/专门修复 dev 分支上的 bug。Commit 惯例README 建议参考 Angular commit message guidelines并在仓库的 git hooks 中落地见 package.json 中的simple-git-hookspre-commit执行pnpm lint-staged对全部变更文件运行eslint --fix。常用类型feat新功能fix修 bugdocs文档更新style不影响代码含义的变动空白、格式、缺分号等refactor代码重构test新增或更新测试chore对构建过程或工具链的更改perf性能改进ci持续集成 / 交付更改欢迎添加作用域scope与脚注footer例如fix(dock)xxx 變更描述 相關 PRurli18n 国际化务必手动维护语言文件项目中英文、简体中文、正體中文、廣東話四套语言文件位于 src/_locales/en.yml、cmn-CN.yml、cmn-TW.yml、jyut.yml。贡献指南特别强调翻译时若遇到不熟悉的语言可以用自己熟悉的另一种语言进行翻译并在 PR 中说明哪些语言无法翻译请手动维护 i18n 语言文件切勿使用i18n Ally或其他扩展自动维护——自动维护可能导致翻译内容位置错乱甚至删除代码注释。这一要求与运行时实现一致src/utils/i18n.ts 使用intlify/unplugin-vue-i18n在构建期编译 YAML 语言文件为消息对象并由vue-i18n提供全局注入因此语言文件的键结构直接决定 UI 文案的呈现手工维护才能保证键的完整与注释的保留。 源码级延伸扩展是如何接管Bilibili 页面的为帮助读者把 README 中的安装与开发流程落到实处这里补充三个关键的实现事实均可从仓库源码直接核实1. 多页面内容脚本注入。src/manifest.ts 声明了两组内容脚本一组是常规的contentScripts/index.global.jsrun_at: document_startall_frames: true并match_about_blank用于在www.bilibili.com、search.bilibili.com、space.bilibili.com等域名上注入样式与逻辑另一组以world: MAIN注入的inject/index.js用于在页面主世界环境中执行必要的补丁逻辑。2. Shadow DOM 隔离渲染。src/contentScripts/index.ts 的injectApp()创建一个#bewly容器通过attachShadow({ mode: open })建立开放 Shadow DOM将重置样式、扩展样式表与 SVG 图标注入其中再把 Vue 应用挂载到 shadow root 上。这种隔离方案保证了 BewlyBewly 的样式不会与 Bilibili 原站样式互相污染。同一文件还实现了版本冲突处理若检测到页面上已存在旧版本#bewly元素会将其移除避免多版本扩展并存。3. 内置页面切换与顶栏。src/contentScripts/views/App.vue 通过 URL 参数?page维护当前激活页面activatedPage用defineAsyncComponent懒加载 Home、Search、Anime、History、WatchLater、Favorites、Moments 七大页面并提供useOriginalBilibiliHomepage、useOriginalBiliPage等设置项允许用户在各页面上在Bewly 重设计页面与原站 iframe 页面之间自由切换若用户选择使用原站页面扩展会通过 iframe 加载对应 Bilibili 地址同时隐藏原站顶部栏以避免双顶栏冲突。总结一条龙掌握安装、调试与贡献回到 README-jyut.md 的核心脉络BewlyBewly 是一个专注 Bilibili 界面重设计的开源扩展定位清晰页面调整优先、深色模式只覆盖常用页面安装路径覆盖商店在线安装与离线打包加载两大场景开发构建则围绕 pnpm 脚本体系dev/start:chromium/build/dev-firefox/build-firefox展开。无论是普通用户还是开发者都可依据本文与 docs/CONTRIBUTING-jyut.md 快速上手而对底层实现感兴趣的读者可从 src/manifest.ts、src/contentScripts/index.ts 与 src/contentScripts/views/App.vue 继续深入阅读源码。赞分享前端【免费下载链接】BewlyBewlyJust make a few small changes to your Bilibili homepage. (English | 简体中文 | 正體中文 | 廣東話)项目地址https://gitcode.com/gh_mirrors/be/BewlyBewly点击查看免费下载相关推荐BewlyBewly 浏览器扩展全解析Bilibili 主页 UI 重塑、安装部署与源码架构实战指南BewlyBewly 浏览器扩展全解析Bilibili 主页 UI 重塑、安装部署与源码架构实战指南 导读 BewlyBewly 是一款面向 Bilibili前端如何快速集成AndroidFastScroll5分钟实现Material Design风格滚动条如何快速集成AndroidFastScroll5分钟实现Material Design风格滚动条 想要为你的Android应用添加流畅的快速滚动功能吗AndUI库/组件B站界面美化神器BewlyBewly浏览器扩展终极指南B站界面美化神器BewlyBewly浏览器扩展终极指南 BewlyBewly是一款专为B站设计的浏览器扩展通过精心的界面重设计为用户带来更美观、更易用的B前端上一篇LeetCode-Book剑指 Offer 09 用两个栈实现队列——双栈倒序原理与 Python/Java/C 三语言完整实现下一篇kube-bench在Kubernetes节点亲和性配置确保检测作业在目标节点运行创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考