Brie-Extension开发者指南如何贡献代码并扩展插件功能【免费下载链接】brie-extensionCapture screenshots, console errors, network issues, and user actions, giving developers full context instantly.项目地址: https://gitcode.com/gh_mirrors/br/brie-extensionBrie-Extension是一个功能强大的浏览器扩展专为开发者设计能够快速捕获屏幕截图、控制台错误、网络问题和用户操作为bug报告提供完整的上下文信息。这个开源项目采用现代化的技术栈包括React 19、TypeScript 5.8和Vite 6为开发者提供了丰富的扩展功能和清晰的架构设计。 项目架构概览Brie-Extension采用pnpm monorepo架构由Turborepo协调Vite作为构建工具。项目包含5个独立的构建入口点每个都有特定的功能背景脚本(chrome-extension/src/background/) - 服务工作者处理标签事件、网络请求拦截、上下文菜单和消息路由内容脚本(pages/content/) - 在document_start注入负责rrweb会话录制和早期DOM访问内容UI(pages/content-ui/) - 注入页面的React应用提供标注编辑器、rrweb播放器和FFmpeg视频编码内容运行时(pages/content-runtime/) - 从弹出窗口动态注入的脚本弹出窗口(pages/popup/) - React应用处理用户认证、捕获控制和设置️ 开发环境搭建指南系统要求与准备工作在开始贡献代码之前请确保满足以下要求Node.js版本 22.12.0推荐使用nvm进行版本管理包管理器全局安装pnpmnpm install -g pnpmGit配置仅Windows用户设置正确的行尾符git config --global core.eol lf git config --global core.autocrlf input一键安装步骤克隆仓库git clone https://gitcode.com/gh_mirrors/br/brie-extension cd brie-extension安装依赖pnpm install --frozen-lockfile环境配置复制环境文件cp .example.env .env根据env包文档配置必要的环境变量验证安装pnpm run:chrome:local 多环境开发配置Brie-Extension支持多种开发环境配置使用统一的命令模式pnpm action:scope:env开发命令示例命令用途目标浏览器pnpm run:chrome:local本地开发ChromeChrome/Edgepnpm run:firefox:local本地开发FirefoxFirefoxpnpm build:chrome:production生产构建ChromeChrome/Edgepnpm build:firefox:production生产构建FirefoxFirefox加载扩展到浏览器Chrome/Edge浏览器运行开发命令pnpm run:chrome:local访问chrome://extensions启用开发者模式点击加载已解压的扩展程序选择项目中的dist目录Firefox浏览器运行开发命令pnpm run:firefox:local访问about:debugging#/runtime/this-firefox点击加载临时附加组件选择./dist/manifest.json文件 项目结构与代码组织共享包架构Brie-Extension采用模块化设计多个共享包通过extension/*别名导入包名功能描述主要文件位置extension/shared类型、钩子、常量共享packages/shared/lib/extension/storageChrome Storage API助手packages/storage/lib/extension/storeRedux状态管理packages/store/lib/extension/i18n国际化支持packages/i18n/locales/extension/uiRadix UI组件库packages/ui/lib/components/通信模式设计扩展内部使用类型化的消息处理器进行通信// 背景脚本与内容脚本通信示例 chrome.runtime.onMessage.addListener((message, sender, sendResponse) { // 处理消息逻辑 }); 代码贡献流程分支管理与提交规范创建功能分支git checkout -b feature/功能描述 # 或 git checkout -b fix/问题编号提交消息格式type[(scope)]: description支持的提交类型feat/feature新增功能fix/bugfix修复bugrefactor代码重构docs文档更新build构建配置ciCI/CD配置chore杂项更新示例提交git commit -m feat(content-ui): 添加新的标注工具 git commit -m fix(storage): 修复本地存储同步问题代码质量保证代码检查pnpm lint # 运行ESLint检查 pnpm lint:fix # 自动修复ESLint问题代码格式化pnpm format # 使用Prettier格式化代码类型检查pnpm type-check # TypeScript类型检查 扩展功能开发指南添加新的内容脚本在pages/目录创建新文件夹pages/new-feature/ ├── src/ │ ├── index.ts │ ├── NewFeature.tsx │ └── styles.css └── package.json配置构建入口 在chrome-extension/manifest.ts中添加新的内容脚本配置实现核心逻辑使用extension/shared中的共享类型遵循现有的通信模式集成状态管理如果需要创建新的共享包初始化包结构mkdir -p packages/new-package cd packages/new-package pnpm init配置TypeScript参考packages/tsconfig中的配置设置正确的路径别名导出API// packages/new-package/lib/index.ts export { defaultFeature } from ./feature; export type { FeatureOptions } from ./types; 测试与验证端到端测试Brie-Extension包含完整的E2E测试套件# 运行Chrome端到端测试 pnpm e2e # 运行Firefox端到端测试 pnpm e2e:firefox构建验证生产构建检查pnpm build:chrome:production pnpm build:firefox:production打包验证pnpm zip # Chrome打包 pnpm zip:firefox # Firefox打包 版本管理与发布版本更新流程使用内置脚本更新所有包的版本# 更新到新版本 pnpm update-version 1.0.0发布检查清单✅ 所有测试通过✅ 代码检查无错误✅ 类型检查通过✅ 构建成功✅ 功能测试完成✅ 文档更新完成 国际化支持Brie-Extension支持14种语言国际化配置位于语言文件packages/i18n/locales/添加新语言在locales/下创建新的语言目录在docs/readme/中添加对应的README翻译更新语言配置 调试技巧与最佳实践Chrome开发者工具背景脚本调试访问chrome://extensions点击服务工作者链接在开发者工具中调试内容脚本调试在目标页面打开开发者工具切换到扩展程序面板选择Brie扩展进行调试网络请求监控Brie扩展使用web-request.service.ts处理网络请求拦截调试时可以查看控制台日志监控存储变化跟踪消息传递 社区贡献指南寻找贡献机会查看Good First Issues访问项目的问题跟踪器寻找标记为good first issue的问题加入社区讨论通过Discord聊天室与团队交流参与功能讨论和设计评审提交Pull Request创建PR从develop分支创建功能分支确保代码符合项目规范提供详细的PR描述PR审查要点代码符合架构规范包含必要的测试更新相关文档提供功能截图如适用 学习资源与进阶指南核心技术栈文档React 19现代React特性与并发模式TypeScript 5.8类型安全与高级类型特性Vite 6快速构建与开发体验TailwindCSS 3实用优先的CSS框架浏览器扩展开发资源Chrome扩展开发文档Firefox扩展开发指南WebExtensions API参考 快速开始贡献第一步设置开发环境# 1. 克隆仓库 git clone https://gitcode.com/gh_mirrors/br/brie-extension cd brie-extension # 2. 安装依赖 pnpm install # 3. 启动开发服务器 pnpm run:chrome:local第二步选择贡献方向根据你的技能和兴趣选择前端开发改进UI组件packages/ui/功能开发添加新功能模块国际化添加新的语言支持文档完善使用文档和开发指南测试编写单元测试和E2E测试第三步开始编码遵循项目的最佳实践阅读架构文档遵循命名规范使用现有的代码模式保持代码简洁和可维护 常见问题与解决方案Q1构建失败怎么办A检查Node.js版本需要22.12.0清理缓存后重试pnpm clean pnpm installQ2扩展在浏览器中不显示A确保正确加载扩展检查控制台错误验证manifest配置。Q3国际化文本不显示A检查语言文件路径验证i18n配置确保正确导入语言包。Q4状态管理出现问题A使用Redux DevTools调试检查store配置验证action和reducer。 总结与下一步Brie-Extension是一个设计精良、架构清晰的浏览器扩展项目为开发者提供了丰富的功能和良好的开发体验。通过遵循本指南你可以✅ 快速搭建开发环境✅ 理解项目架构和代码组织✅ 掌握代码贡献流程✅ 扩展插件功能✅ 参与社区贡献无论你是前端开发者、浏览器扩展爱好者还是想要学习现代Web开发技术Brie-Extension都是一个绝佳的学习和实践项目。开始你的贡献之旅帮助改进这个强大的bug报告工具吧记住每个贡献无论大小都对项目的发展至关重要。欢迎加入Brie社区一起打造更好的开发者工具 【免费下载链接】brie-extensionCapture screenshots, console errors, network issues, and user actions, giving developers full context instantly.项目地址: https://gitcode.com/gh_mirrors/br/brie-extension创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考