Repomix 浏览器扩展开发指南基于 Manifest V3 在 GitHub 仓库页注入一键打包按钮【免费下载链接】repomix Repomix is a powerful tool that packs your entire repository into a single, AI-friendly file. Perfect for when you need to feed your codebase to Large Language Models (LLMs) or other AI tools like Claude, ChatGPT, DeepSeek, Perplexity, Gemini, Gemma, Llama, Grok, and more.项目地址: https://gitcode.com/GitHub_Trending/rep/repomixRepomix 浏览器扩展Browser Extension是 Repomix 项目为 GitHub 用户提供的快捷入口它以跨浏览器扩展Chrome / Firefox / Edge的形式在 GitHub 仓库页面头部操作区注入一个 Repomix 按钮点击即可跳转到 Repomix 在线服务 为骨架结合扩展源码、配置与测试系统讲解其架构设计、Manifest V3 实现原理、国际化机制以及完整的开发、构建与手动安装流程读完即可上手二次开发或在本地跑通整个扩展工作流。扩展概览一个“轻量注入型”的跨浏览器扩展从 browser/CLAUDE.md 的项目概述可以明确该扩展的核心定位一个跨浏览器扩展Chrome/Firefox/Edge为 GitHub 仓库页面添加 Repomix 集成能力。它基于 Manifest V3通过内容脚本Content Scripts将 Repomix 按钮直接注入 GitHub 的 UI 中。这意味着扩展本身不参与仓库打包计算它只做三件事识别当前访问的 GitHub 仓库页面解析出owner与repo在页面头部操作区插入一个按钮点击后以https://repomix.com/?repo仓库URL的方式打开 Repomix 在线服务。功能链路短、权限面小因此该扩展在隐私设计上非常克制README 明确声明它不收集任何数据、不追踪用户行为、只访问github.com域名、仅申请最小化权限详见 browser/README.md 的 Privacy 一节以及 browser/wxt.config.ts 中的permissions: [scripting]与host_permissions: [https://github.com/*]。目录结构与工程组织CLAUDE.md 给出了扩展工程的顶层组织方式结合当前仓库实际布局WXT 框架的entrypoints/约定目录如下browser/ ├── entrypoints/ # 扩展入口WXT 约定 │ ├── background.ts # Service Worker后台脚本 │ ├── content.ts # GitHub 集成的内容脚本 │ └── styles.css # 注入元素的样式 ├── public/ # 静态资源 │ ├── _locales/ # 国际化文件11 种语言 │ └── images/ # 扩展图标16px 到 128px ├── scripts/ │ └── generate-icons.ts # 从 SVG 批量生成多尺寸 PNG 图标 ├── tests/ │ └── repomix-integration.test.ts # 集成测试 ├── utils/ │ └── github-navigation.ts # GitHub 头部导航容器查找逻辑 ├── package.json # 脚本与依赖定义 ├── wxt.config.ts # WXT/Manifest 配置 ├── tsconfig.json └── types.d.ts # WXT 全局类型声明工程基于 WXTwxt: ^0.21.4defineBackground与defineContentScript这类全局 API 的类型声明集中在 browser/types.d.ts 中。开发环境与常用命令前置要求Node.js当前 browser/package.json 中engines.node要求24.0.1browser/README.md 亦明确写出 Node.js 22 或更高版本以 package.json 的实际约束为准。包管理器仓库根目录与 browser 目录均使用 npm 与package-lock.json。安装依赖npm install开发模式热更新npm run dev chrome # Chrome 开发模式 npm run dev firefox # Firefox 开发模式对应脚本 dev:firefox npm run dev edge # 使用 wxt build -b edge 指定浏览器WXT 开发模式下会自动打开浏览器并加载扩展在 browser/wxt.config.ts 中通过webExt.startUrls指定了开发时默认打开的地址https://github.com/yamadashy/repomix方便直接看到按钮注入效果。构建npm run build-all # 依次构建 Chrome / Firefox / Edge 三个版本 npm run build chrome # 仅构建 Chrome npm run build firefox # 仅构建 Firefox npm run build edge # 仅构建 Edge构建产物统一输出到dist/目录README 与 package.json 中的wxt build/wxt zip行为一致。其他常用命令命令作用npm run lintTypeScript 类型检查tsc --noEmitnpm run test运行 Vitest 测试npm run generate-icons从 SVG 生成全套 PNG 图标npm run zip/zip:chrome/zip:firefox/zip:edge生成可提交商店的 zip 包核心实现原理源码级解析1. 内容脚本注入与按钮创建content.ts内容脚本 browser/entrypoints/content.ts 是整个扩展的核心其声明为export default defineContentScript({ matches: [https://github.com/*], runAt: document_start, allFrames: true, main() { ... }, });关键点匹配范围仅匹配https://github.com/*与 manifest 的host_permissions一致执行时机document_start并配合 DOM 就绪判断——若document.readyState loading则监听DOMContentLoaded否则立即初始化全帧注入allFrames: true。按钮创建流程分四步第一步页面判断。isRepositoryPage()检查路径段数量至少两段且不以开头从而排除用户主页、组织页等场景。第二步仓库信息提取。extractRepositoryInfo()使用正则从路径中解析 owner 与 repoconst pathMatch window.location.pathname.match(/^\/([^/])\/([^/])/); // 例如 /yamadashy/repomix → owner: yamadashy, repo: repomix并据此构造 GitHub 仓库 URL 与 Repomix 跳转链接const repomixUrl ${REPOMIX_BASE_URL}/?repo${encodeURIComponent(repoInfo.url)}; // 即 https://repomix.com/?repohttps%3A%2F%2Fgithub.com%2Fyamadashy%2Frepomix这一 URL 构造逻辑在 browser/tests/repomix-integration.test.ts 中有明确的单元测试断言。第三步按钮构建。createRepomixButton()创建li a结构复用 GitHub 的原子类btn-sm btn BtnGroup-item使按钮外观与 GitHub 原生 UI 保持一致图标通过chrome.runtime.getURL(images/icon-64.png)加载默认 64px 图标、16px 展示尺寸并设置target_blank与relnoopener noreferrer保证安全新标签页打开。按钮的 Tooltip 文本来自chrome.i18n.getMessage(openWithRepomix)走国际化渠道。第四步防重复与动态导航适配。isRepomixButtonAlreadyExists()通过类名.repomix-button去重observePageChanges()使用MutationObserver监听document.body的子树变化以应对 GitHub 的 SPA 式动态渲染如切换分支、文件浏览导致头部重绘同时监听popstate事件处理浏览器前进/后退导航。注入元素的样式集中在 browser/entrypoints/styles.css对.repomix-button使用inline-flex对齐图标与文字保证与 GitHub 按钮体系视觉融合。2. Service Worker 按需注入background.tsentrypoints/background.ts 实现的是扩展启动时的“补注入”逻辑扩展安装/更新后遍历已打开的全部标签页chrome.tabs.query({})对每个标签执行injectContentToTab()跳过 URL 未定义、标签页被丢弃tab.discarded或非https://github.com/前缀的标签从chrome.runtime.getManifest()读取content_scripts[0]中声明的 css 与 js通过chrome.scripting.insertCSS/executeScript动态注入。这种“manifest 声明 后台按需注入”的双保险策略确保用户此前已打开的 GitHub 标签页也能立即获得 Repomix 按钮无需刷新页面。chrome.scripting正是 manifest 中permissions: [scripting]所对应的能力。3. GitHub 头部导航容器适配github-navigation.tsGitHub 正在将仓库头部从传统ul.pagehead-actions迁移到 React 化新结构ul[data-testidrepo-header-actions]。为此 utils/github-navigation.ts 提供双选择器回退export function findNavigationContainer(): Element | null { return ( document.querySelector(ul[data-testidrepo-header-actions]) ?? document.querySelector(ul.pagehead-actions) ); }优先使用新结构找不到时回退到旧结构两者都不存在时返回null此时按钮静默跳过不报错。浏览器集成测试 覆盖了该函数的完整行为矩阵旧版头部ul.pagehead-actions可被找到新版头部ul[data-testidrepo-header-actions]可被找到两者同时存在时优先新版都不存在时返回null同时验证了路径正则解析yamadashy/repomix与 Repomix URL 编码结果。Manifest V3 配置要点wxt.config.ts 集中定义了 manifest 关键项配置项值说明manifest_version3由 WXT 默认生成Manifest V3 规范nameRepomix扩展名称description__MSG_appDescription__使用 i18n 占位符按浏览器语言读取default_localeen默认语言为英文minimum_chrome_version88.0Chrome 最低版本permissions[scripting]仅申请动态脚本注入权限host_permissions[https://github.com/*]只对 GitHub 域名生效icons16/19/32/38/48/64/128七种尺寸的图标web_accessible_resources全部图标 https://github.com/*匹配供内容脚本加载图标资源browser_specific_settings.geckoid{3AB97897-...}strict_min_version102.0Firefox/Gecko 兼容声明国际化i18n支持的语言共 11 种CLAUDE.md 列出英语、日语、德语、法语、西班牙语、巴西葡萄牙语、印度尼西亚语、越南语、韩语、中文简/繁、印地语。对应 browser/public/_locales/ 下的 11 个语言目录de / en / es / fr / hi / id / ja / ko / pt_BR / vi / zh_CN / zh_TW。国际化文件结构每个语言目录包含两个文件messages.jsonChrome/WebExtensions 标准 i18n 消息文件。例如英文版 browser/public/_locales/en/messages.json 定义了两个键appDescription扩展描述在 manifest 中通过__MSG_appDescription__引用openWithRepomix按钮 Tooltip「Open with Repomix」由内容脚本通过chrome.i18n.getMessage(openWithRepomix)读取。detailed-description.txt供应用商店使用的长篇描述文本。CLAUDE.md 规定新增语言时至少需要appName、appDescription、buttonText三个键当前源码中 manifest 实际使用__MSG_appDescription__、按钮 Tooltip 使用openWithRepomix新增语言时建议同时补齐这些键以保持一致。新增语言的操作步骤在 browser/public/_locales/ 下创建[language_code]/目录如ar/添加messages.json包含所需消息键添加detailed-description.txt作为商店描述运行npm run dev或npm run build验证扩展在目标语言环境下能正确加载并显示对应文案。图标生成流水线扩展图标并非手工维护多张 PNG而是由 browser/scripts/generate-icons.ts 从单张 SVG 源图browser/public/images/icon.svg自动生成目标尺寸16、19、32、38、48、64、128与 manifesticons声明一一对应工具链sharptsx脚本先校验 SVG 存在再并行 resize 并输出 PNG调用方式npm run generate-icons。这让新增/调整图标只需改一处 SVG避免多尺寸文件失配。手动安装扩展加载 unpacked以 Chrome 为例browser/README.md 中 Manual Installation 一节执行npm run build chrome完成构建打开chrome://extensions/开启右上角「开发者模式Developer mode」点击「加载已解压的扩展程序Load unpacked」选择dist/chrome目录WXT 按浏览器输出到对应子目录。加载后在任意 GitHub 仓库页面如github.com/yamadashy/repomix的头部操作区即可看到 Repomix 按钮点击后在新标签页打开 Repomix 在线服务并自动带入当前仓库。Firefox 对应about:debugging#/runtime/this-firefox加载dist/firefoxEdge 对应edge://extensions/加载dist/edge。测试与质量保障扩展使用 Vitest jsdom 做 DOM 层测试运行npm run test即可。当前 browser/tests/repomix-integration.test.ts 覆盖了三条核心契约仓库路径解析/yamadashy/repomix能正确解析出 owner 与 repo跳转 URL 构造https://github.com/yamadashy/repomix编码为https://repomix.com/?repohttps%3A%2F%2Fgithub.com%2Fyamadashy%2Frepomix导航容器查找新旧两种 GitHub 头部结构的选择与优先级。此外npm run linttsc --noEmit负责全量类型检查。这两个命令共同构成改动内容脚本、导航工具函数或国际化文案时的回归保障。总结Repomix 浏览器扩展是一个典型的 Manifest V3 轻量集成型扩展以 WXT 为工程底座通过内容脚本 后台 Service Worker 双路注入、MutationObserver 动态导航适配、i18n 十一语言国际化以及 SVG 驱动的多尺寸图标流水线把「GitHub 仓库 → Repomix 一键打包」的路径压缩到一次点击。其设计对同类“给第三方页面注入功能按钮”的扩展开发具有直接的参考价值——尤其是 GitHub 新旧头部结构的双选择器回退策略是应对上游 DOM 演进的稳妥范本。【免费下载链接】repomix Repomix is a powerful tool that packs your entire repository into a single, AI-friendly file. Perfect for when you need to feed your codebase to Large Language Models (LLMs) or other AI tools like Claude, ChatGPT, DeepSeek, Perplexity, Gemini, Gemma, Llama, Grok, and more.项目地址: https://gitcode.com/GitHub_Trending/rep/repomix创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考