前端【免费下载链接】BewlyBewlyJust make a few small changes to your Bilibili homepage. (English | 简体中文 | 正體中文 | 廣東話)项目地址https://gitcode.com/gh_mirrors/be/BewlyBewly点击查看免费下载导读本文以仓库内 docs/CONTRIBUTING-jyut.md廣東話贡献指南为骨架结合 package.json、scripts/、src/manifest.ts 等源码完整讲解 BewlyBewly 浏览器扩展的本地开发流程、ChromeEdge与 Firefox 双端构建打包、分支与 Commit 规范以及 i18n 多语言文件的正确维护方式。读完本文你将能够在本地跑起pnpm dev实时调试 Bilibili 页面改动掌握extension/与extension-firefox/两套产物的生成原理并能按项目规范提交合规的 PR。BewlyBewly 是一个基于 Vite Vue 3 的 Manifest V3 浏览器扩展其贡献指南有四种语言版本English | 简体中文 | 正体中文 | 廣東話。本文解读的正是其中的廣東話版本重点内容与英文版完全一致可作为多语言维护流程的直接参考。 开发环境准备项目是基于 [Vite] 搭建的vite 版本见 package.json 的devDependencies当前为^5.3.6因此本地开发需要提前安装好Node.js现代浏览器扩展构建链Vite、esbuild、tsup均依赖 Node 运行时pnpm包管理器package.json中通过packageManager: pnpm9.5.0固定了版本建议使用 pnpm 9.x 以保证与 lockfilepnpm-lock.yaml一致Visual Studio Code推荐仓库本身使用了 ESLint、Prettier 风格配置eslint.config.mjs配合 VSCode 可获得格式化与类型检查vue-tsc的最佳体验。项目所有交互式脚本都集中在 package.json 的scripts字段下面每个开发/构建步骤都能在其中找到对应的命令定义。 开发与构建开发Chrome 或 Edge贡献指南提供了两种开发方式任选其一即可。方式一web-ext 自动打开浏览器# 安装依赖 pnpm install # 建立一个用家账户资料夹用于扩展存储登录状态 mkdir web-ext-profile # 运行项目 pnpm dev # 执行该命令后会自动打开一个新的 Chrome 窗口并访问 Bilibili 网站 pnpm start:chromium要点说明mkdir web-ext-profile创建的是一个本地浏览器 Profile 目录用于持久化扩展的登录状态避免每次重启调试都重新扫码登录该 Profile 与 package.json 中webExt.run配置一一对应keepProfileChanges: true、chromiumProfile: ./web-ext-profile、startUrl: [https://www.bilibili.com/]这正是pnpm start:chromium内部是web-ext run --source-dir ./extension --targetchromium自动打开 Bilibili 的原因之后每次修改扩展代码web-ext 会自动 reload刷新网页即可看到效果。方式二手动加载未打包扩展unpacked# 安装依赖 pnpm install # 运行项目 pnpm dev然后在浏览器中操作Chrome 地址栏输入chrome://extensionsEdge 输入edge://extensions打开开发者模式Developer Mode点击加载已解压的扩展程序Load unpacked在浏览器中加载生成的extension/文件夹每次修改代码后需要点击 Extensions Reloader 之类的扩展重载按钮并刷新页面确认改动生效。extension/目录正是pnpm dev的产出开发模式下 Vite 在http://localhost:3303提供热更新服务端口定义见 scripts/utils.ts 的port同时 scripts/prepare.ts 会为options与popup两个页面生成 stubindex.html以接入 Vite并监听src/**/*.html、src/manifest.ts、package.json的变更自动重写 manifest。构建Chrome 或 Edgepnpm build随后将extension/目录下的文件打包即可例如pnpm pack会调用pack:zip生成extension.zip。pnpm build的定义是cross-env NODE_ENVproduction run-s clear build:web build:prepare build:js build:bg即依次执行步骤脚本作用clearrimraf --glob extension extension.*清理旧的构建产物build:webvite build构建 Vue 页面options/popupbuild:prepareesno scripts/prepare.ts拷贝 assets、生成 manifest.jsonbuild:jsvite build --config vite.config.content.ts构建 contentScript 与 inject 脚本build:bgtsup打包 background 服务其中 manifest.json 由 src/manifest.ts 动态生成扩展名称为BewlyBewly开发模式下带Dev后缀、版本号取自 package.json且包含content_scripts匹配的*://www.bilibili.com/*、*://search.bilibili.com/*、*://space.bilibili.com/*等 Bilibili 域名。开发Firefox方式一web-ext 自动打开浏览器# 安装依赖 pnpm install # 建立用家账户资料夹用于扩展存储登录状态 mkdir web-ext-profile # 运行项目 pnpm dev # 执行后自动打开新的 Firefox 窗口并访问 Bilibili 网站 pnpm start:firefox注意pnpm start:firefox内部为web-ext run --source-dir ./extension-firefox --targetfirefox-desktop读取的是 Firefox 专用产物目录extension-firefox/。要生成该目录需要以FIREFOXtrue环境变量运行pnpm dev即下一个命令pnpm dev-firefox。方式二about:addons 临时加载# 安装依赖 pnpm install # 运行项目Firefox 模式 pnpm dev-firefox然后在浏览器地址栏输入about:addons点击Extensions再点击Debug Add-ons调试附加组件在浏览器中加载生成的extension-firefox/文件夹。pnpm dev-firefox的定义是npm run clear-firefox cross-env NODE_ENVdevelopment FIREFOXtrue run-p dev:*关键在FIREFOXtrue这个环境变量贯穿整个构建链——scripts/utils.ts 中的isFirefox判断、scripts/prepare.ts 与 scripts/manifest.ts 的输出目录选择都会切换到extension-firefox/。构建Firefoxpnpm build-firefox随后打包extension-firefox/目录下的文件pnpm pack会生成extension-firefox.zip。Firefox 与 Chrome 的产物差异可以从源码中直接印证主要有三处background 模型不同src/manifest.ts 中Chrome 使用service_worker而 Firefox与 Safari使用background.scripts源码注释还特别说明在 Firefox 中把persistent设为true会报错Manifest V3 限制权限与 API 不同Firefox 需要额外的webRequest、webRequestBlocking、cookies权限src/manifest.ts且declarativeNetRequest规则集assets/rules.json只在 Chromium 侧启用CSP 与浏览器特定设置Firefox 需配置browser_specific_settings.gecko.idaddonbewlybewly.com其extension_pages的 CSP 也不带开发用的localhost放行。 贡献规范分支策略贡献指南明确了分支使用约定永久分支Main用于执行 bug 修复、新功能开发、性能改进以及对国际化i18n语言文件的修改临时分支feat/提交新功能的分支doc/专门用于修文档、无功能变更的分支fix/专门用于修复 dev 分支上 bug 的分支。从仓库状态看docs/下同时维护着四份贡献指南CONTRIBUTING.md、CONTRIBUTING-cmn_CN.md、CONTRIBUTING-cmn_TW.md、CONTRIBUTING-jyut.md修改文档时应当走doc/分支并在 PR 中说明文档变更范围。Commit 消息规范提交信息遵循 Angular Commit Message Guidelines 的约定式提交Conventional Commits核心类型如下类型含义feat新功能fix修复 bugdocs文档更新style不影响代码语义的改动空白、格式、缺失分号等refactor代码重构test新增或更新测试chore对构建过程或工具链的更改perf性能改进ci持续集成/交付更改指南同时鼓励添加scope范畴与footer脚注示例格式为fix(dock): xxx 变更描述 相关 PRurl仓库侧的自动化也与此呼应simple-git-hooks配置了pre-commit钩子执行pnpm lint-staged而lint-staged对所有暂存文件运行eslint --fix见 package.json保证每个提交都通过代码风格检查。i18n 多语言维护要点贡献指南对翻译工作提出两条明确要求遇到不熟悉的语言时可以用另一种自己会翻译的语言来完成翻译并在 PR 中明确说明你无法翻译的是哪种语言交由维护者或其他贡献者补齐必须手动维护 i18n 语言文件禁止使用i18n Ally或其他扩展来维护。原因很实际——自动工具维护会导致翻译内容被放到不确定的位置甚至删除原有代码注释。仓库的语言文件位于 src/_locales/ 下与四种文档语言一一对应en.ymlEnglish同时是 src/utils/i18n.ts 中的fallbackLocalecmn-CN.yml简体中文cmn-TW.yml正体中文jyut.yml廣東話这些 YAML 文件由 vite.config.ts 中的VueI18nPlugininclude: [r(./src/_locales/**)]在构建时打包进产物因此新增翻译时只需在四个文件中同步添加同一 key 即可无需改动组件代码——这也正是手动维护模式的工程基础。新增语言文案时应确保四个文件以及所有组件内通过t()/$t()引用的 key保持一致否则会回退到英文。小结BewlyBewly 的贡献流程可以概括为一条主线pnpm install安装依赖 →pnpm devChrome或pnpm dev-firefoxFirefox实时调试 →pnpm build/pnpm build-firefox产出可打包目录 → 按feat/、fix/、doc/分支与约定式提交规范提交 PR。其中双端构建差异由FIREFOX/SAFARI环境变量驱动见 scripts/utils.tsi18n 则坚持四语言文件手动同步维护。如果希望进一步深入构建细节可以继续阅读 scripts/prepare.ts、scripts/manifest.ts 与 src/manifest.ts 的源码实现。赞分享前端【免费下载链接】BewlyBewlyJust make a few small changes to your Bilibili homepage. (English | 简体中文 | 正體中文 | 廣東話)项目地址https://gitcode.com/gh_mirrors/be/BewlyBewly点击查看免费下载相关推荐asdf 文档站点贡献指南VitePress 环境搭建、i18n 多语言维护与发布流程详解asdf 文档站点贡献指南VitePress 环境搭建、i18n 多语言维护与发布流程详解 导读 本文基于 asdf 仓库的 日语版文档贡献指南 https:CLI开发工具BewlyBewly 贡献指南深度解析从环境搭建、Chrome/Firefox 扩展开发到协作规范全流程BewlyBewly 贡献指南深度解析从环境搭建、Chrome/Firefox 扩展开发到协作规范全流程 本指南以仓库官方文档 docs/CONTRIBUTI前端BewlyBewly 开发与贡献指南从环境搭建、多浏览器构建到提交规范BewlyBewly 开发与贡献指南从环境搭建、多浏览器构建到提交规范 BewlyBewly 是一款通过内容脚本与样式适配对 Bilibili 主页进行深度改前端上一篇GitHub_Trending/chef5/chef类型定义types.ts与代码可维护性保障下一篇fnlp性能优化指南模型压缩与并行计算提升处理速度300%创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考