Repomix 浏览器扩展实战指南：在 GitHub 仓库页面一键打包代码库

Repomix 浏览器扩展实战指南在 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 浏览器扩展Repomix Extension是一款基于 Manifest V3 的跨浏览器插件它在 GitHub 仓库页面头部操作区注入一个「Repomix」按钮点击即可将当前仓库一键跳转到 Repomix 进行打包生成适合 LLMClaude、ChatGPT、DeepSeek、Gemini 等阅读的单一 AI 友好文件。本文以仓库中的 browser/README.md 为骨架结合 browser/ 目录下的源码、配置与测试完整讲解该扩展的功能、安装使用、开发构建流程、源码实现原理与隐私设计帮助读者从零掌握这套 GitHub 集成扩展的完整方案。扩展定位为 GitHub 添加 Repomix 入口Repomix 是一个将整个代码仓库打包成单一 AI 友好文件的工具而本扩展解决的是「如何以最低成本从 GitHub 进入 Repomix」的问题。它不替代 Repomix 本身而是在 GitHub 的 UI 上提供一个原生风格的快捷入口在 GitHub 仓库页面头部操作区star / fork 旁边的按钮区域注入「Repomix」按钮点击按钮后将当前仓库地址拼接为https://repomix.com/?repo编码后的仓库URL并跳转打开按钮样式复用 GitHub 的btn-sm btn BtnGroup-item类视觉上与 GitHub 原生 UI 无缝融合支持 Chrome、Firefox、Edge 三大浏览器从功能链路看整个扩展的核心调用关系非常简洁内容脚本content script负责识别仓库页面、注入按钮后台脚本service worker负责把内容脚本注入到已打开的 GitHub 标签页跳转目标则由 Repomix 官方站点承载打包逻辑。功能特性一览依据 browser/README.md 与源码扩展具备以下能力GitHub 仓库页按钮注入通过内容脚本在https://github.com/*页面注入按钮content.ts一键跳转 Repomix点击按钮即打开https://repomix.com/?repo...无需手动复制粘贴仓库地址GitHub UI 无缝集成复用 GitHub 的按钮类名与 octicon 图标容器视觉原生跨浏览器支持同一套 TypeScript 代码通过 WXT 构建为 Chrome / Firefox / Edge 三个平台的产物国际化i18n支持 12 种语言环境含简体/繁体中文按钮提示与扩展描述随浏览器语言切换多尺寸图标从单一 SVG 源生成 16px 到 128px 共 7 种 PNG 图标generate-icons.ts快速上手安装与使用从应用商店安装扩展已发布至 Chrome / Firefox / Edge 各自的应用商店仓库的 browser/promo/ 目录存放了商店宣传图与截图。安装后打开任意 GitHub 仓库页面例如https://github.com/yamadashy/repomix页面头部操作区会多出一个「Repomix」按钮带橙色立方体图标点击按钮浏览器新标签页打开https://repomix.com/?repo当前仓库URL进入打包界面在 Repomix 页面选择输出格式XML / Markdown / Plain、配置 Include/Ignore 模式后点击 Pack即可生成代码包并复制或下载提示按钮跳转使用target_blank并带relnoopener noreferrer新标签页打开且不泄漏窗口引用兼顾安全。手动加载未打包扩展开发者模式以 Chrome 为例Edge 步骤相同入口为edge://extensions/# 构建 Chrome 版本 npm run build chrome构建完成后执行手动安装打开chrome://extensions/开启右上角「开发者模式」Developer mode点击「加载已解压的扩展程序」Load unpacked extension选择dist/chrome目录Firefox 的对应入口是about:debugging#/runtime/this-firefox或about:addons的临时加载功能。开发环境搭建前置要求Node.js 22 或更高版本browser/package.json 的engines字段实际要求24.0.1请以仓库为准npm随 Node.js 一并安装初始化与依赖安装# 安装依赖 npm install # 生成全部尺寸图标从 SVG 生成 16/19/32/38/48/64/128 共 7 张 PNG npm run generate-icons # 开发模式带热重载 npm run dev chrome # Chrome npm run dev firefox # Firefox npm run dev edge # Edgenpm run dev会启动 WXT 的 watch 模式修改源码后自动重新构建webExt.startUrls配置wxt.config.ts会让 Firefox 开发模式自动打开https://github.com/yamadashy/repomix便于调试。代码质量与测试npm run lint # TypeScript 类型检查tsc --noEmit npm run test # 运行 vitest 测试测试聚焦于 GitHub 页面识别与导航容器定位逻辑browser/tests/repomix-integration.test.ts覆盖了旧版ul.pagehead-actions与新版 React 头部ul[data-testidrepo-header-actions]的兼容场景。构建与产物一键构建全部浏览器版本npm run build-all等价于依次执行build:chrome、build:firefox、build:edge见 browser/package.json 的build-all脚本。构建指定浏览器npm run build chrome npm run build firefox npm run build edge所有构建产物输出到dist/目录Chrome / Firefox / Edge 分别对应dist/chrome、dist/firefox、dist/edge子目录可直接作为「加载已解压扩展」的目标目录。如需生成商店发布用的压缩包可使用npm run zip/npm run zip:chrome/npm run zip:firefox/npm run zip:edge。技术架构与实现原理目录结构browser/ ├── entrypoints/ # 扩展入口 │ ├── background.ts # 后台 Service Worker │ ├── content.ts # GitHub 集成内容脚本 │ └── styles.css # 注入按钮的样式 ├── public/ │ ├── _locales/ # 国际化文件12 种语言 │ └── images/ # 扩展图标16px~128px ├── scripts/ │ └── generate-icons.ts # SVG 图标生成脚本 ├── tests/ # vitest 测试 ├── utils/ │ └── github-navigation.ts # GitHub 头部容器定位 ├── promo/ # 商店宣传物料与截图 ├── wxt.config.ts # WXT 构建配置Manifest V3 └── package.json扩展基于 WXT。Manifest V3 关键配置wxt.config.ts 中集中声明了扩展清单配置项值说明manifest_version3WXT 默认采用 Manifest V3 规范permissionsscripting用于向已打开标签页注入脚本host_permissionshttps://github.com/*仅授权 GitHub 域名minimum_chrome_version88.0Chrome 最低版本要求default_localeen默认语言环境web_accessible_resources7 张图标允许 GitHub 页面加载扩展图标browser_specific_settings.geckoid strict_min_version 102.0Firefox 专用配置值得注意的最小权限设计扩展只申请scripting权限与https://github.com/*主机权限不申请任何数据访问权限从清单层面保证了隐私最小化。内容脚本按钮注入的核心链路content.ts 通过defineContentScript声明注入规则export default defineContentScript({ matches: [https://github.com/*], runAt: document_start, allFrames: true, main() { ... }, });注入后的核心逻辑分四步页面识别isRepositoryPage()判断路径分段数 ≥ 2 且不以开头排除用户主页、组织页等非仓库页面仓库信息提取extractRepositoryInfo()用正则/^\/([^/])\/([^/])/从路径解析出owner与repo并组装https://github.com/owner/repo定位头部容器findNavigationContainer()优先查找新版 React 头部的ul[data-testidrepo-header-actions]找不到则回退到旧版ul.pagehead-actionsutils/github-navigation.ts拼接跳转 URL${REPOMIX_BASE_URL}/?repo${encodeURIComponent(repoInfo.url)}即https://repomix.com/?repohttps%3A%2F%2Fgithub.com%2Fowner%2Frepo按钮创建时复用了 GitHub 的btn-sm btn BtnGroup-item类与 octicon 图标容器并通过chrome.runtime.getURL(images/icon-64.png)加载扩展图标保证视觉上与 GitHub 原生按钮一致同时设置title chrome.i18n.getMessage(openWithRepomix)提供国际化提示。针对 GitHub 前端路由SPA 式页面切换的特点observePageChanges()使用MutationObserver监听document.body的子树变化并在popstate前进/后退事件后延迟 100ms 重试注入isRepomixButtonAlreadyExists()则用类名去重防止重复注入。后台脚本已打开标签页的补注入background.ts 作为 Service Worker在扩展安装/启动时查询所有已打开标签页对https://github.com/开头的标签页通过chrome.scripting.insertCSS与executeScript主动注入内容脚本与样式。其执行目标取自chrome.runtime.getManifest().content_scripts[0]保证与清单声明保持一致从而覆盖「扩展安装前已经打开」的 GitHub 标签页。国际化实现扩展采用 WebExtension 标准的_locales机制browser/public/_locales/ 下提供 12 种语言英文、日文、德文、法文、西班牙文、巴西葡萄牙文、印尼文、越南文、韩文、简体中文、繁体中文、印地文。每种语言目录包含两个文件messages.json键值对消息。核心键为appDescription扩展描述在清单中通过__MSG_appDescription__引用与openWithRepomix按钮提示语。例如简体中文 zh_CN/messages.json 中openWithRepomix的值为「使用 Repomix 打开」detailed-description.txt商店详细描述文本chrome.i18n.getMessage()在运行时按浏览器语言自动取对应文案清单中的name、description则通过__MSG_*__占位符在安装时本地化。若需新增语言按 browser/CLAUDE.md 的说明在_locales下新建语言代码目录、补充messages.json的三个核心键appName、appDescription、buttonText其中buttonText对应openWithRepomix与detailed-description.txt即可。图标生成scripts/generate-icons.ts 使用 sharp 从单一矢量源app/images/icon.svg按[16, 19, 32, 38, 48, 64, 128]七种尺寸并行生成 PNG输出到app/images/目录随后由 WXT 复制到各浏览器构建产物中。这些图标同时被清单icons字段与web_accessible_resources引用是按钮图标与商店展示图的共同来源。测试与兼容性保障browser/tests/repomix-integration.test.ts 使用 vitest jsdom 模拟 GitHub 页面 DOM验证了五个关键行为仓库信息正则解析/yamadashy/repomix→ owneryamadashy、reporepomixRepomix URL 的编码拼接结果?repohttps%3A%2F%2Fgithub.com%2Fyamadashy%2Frepomix旧版头部容器ul.pagehead-actions的定位新版 React 头部容器ul[data-testidrepo-header-actions]的定位两个容器同时存在时优先选择新版容器均不存在时返回null这套测试直接守护了 GitHub 页面结构变动新版 React 头部逐步灰度时的兼容性是扩展长期可用的关键保障。隐私与权限设计依据 browser/README.md 的隐私声明并结合清单配置可以确认不收集任何数据无分析 SDK、无遥测上报代码仅有注入按钮与跳转的逻辑不跟踪用户行为没有storage、cookies、history等权限仅访问 github.comhost_permissions只声明https://github.com/*最小权限仅scripting一项 API 权限用于向已打开的 GitHub 标签页补注入脚本跳转行为本身会将仓库 URL 作为repo参数传给https://repomix.com这是实现「一键打开仓库」功能所必需的数据传递除此之外扩展不读取、不上传任何页面内容。常见问题安装后 GitHub 页面上没有按钮确认访问的是仓库页面而非用户主页、组织页或非 GitHub 站点若扩展是在页面打开后安装的请刷新该标签页让后台脚本或内容脚本重新注入。如何验证开发模式生效运行npm run dev chrome后加载dist/chrome或使用 WXT 输出的临时目录打开 GitHub 仓库页观察头部操作区打开浏览器控制台可看到Repomix button added for owner/repo日志出错时会打印Error adding Repomix button:。按钮位置为什么在操作区最左侧源码中通过navContainer.prepend(buttonContainer)将按钮插入容器开头因此它出现在头部操作区star / fork 区域的最左侧。自定义按钮文本content.ts中BUTTON_TEXT常量默认值为Repomix按钮提示语由openWithRepomix消息按语言提供可在对应_locales/语言/messages.json中调整修改后需重新构建。总结Repomix 浏览器扩展以「最小权限 单点注入 标准跳转」的简洁架构在 GitHub 与 Repomix 之间架起了一座桥梁内容脚本负责识别与注入后台脚本负责补注入导航定位工具函数兼顾 GitHub 新旧两代页面结构国际化与多尺寸图标则让它在各浏览器、各语言环境下保持一致体验。对于希望在浏览 GitHub 时快速把仓库交给 LLM 分析的开发者安装本扩展即可将「复制地址 → 打开 Repomix → 粘贴」三步操作压缩为一次点击。【免费下载链接】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），仅供参考