企业官网建设流程全解析

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/repomix

Repomix 浏览器扩展（Repomix Extension）是一款基于 Manifest V3 的跨浏览器插件，它在 GitHub 仓库页面头部操作区注入一个「Repomix」按钮，点击即可将当前仓库一键跳转到 Repomix 进行打包，生成适合 LLM（Claude、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/ 目录存放了商店宣传图与截图）。安装后：

1. 打开任意 GitHub 仓库页面（例如https://github.com/yamadashy/repomix）
2. 页面头部操作区会多出一个「Repomix」按钮，带橙色立方体图标
3. 点击按钮，浏览器新标签页打开https://repomix.com/?repo=<当前仓库URL>，进入打包界面
4. 在 Repomix 页面选择输出格式（XML / Markdown / Plain）、配置 Include/Ignore 模式后点击 Pack，即可生成代码包并复制或下载

提示：按钮跳转使用target="_blank"并带rel="noopener noreferrer"，新标签页打开且不泄漏窗口引用，兼顾安全。

手动加载未打包扩展（开发者模式）

以 Chrome 为例（Edge 步骤相同，入口为edge://extensions/）：

# 构建 Chrome 版本 npm run build chrome

构建完成后执行手动安装：

1. 打开chrome://extensions/
2. 开启右上角「开发者模式」（Developer mode）
3. 点击「加载已解压的扩展程序」（Load unpacked extension）
4. 选择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 # Edge

npm 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-testid="repo-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 中集中声明了扩展清单：

值得注意的最小权限设计：扩展只申请scripting权限与https://github.com/*主机权限，不申请任何数据访问权限，从清单层面保证了隐私最小化。

内容脚本：按钮注入的核心链路

content.ts 通过defineContentScript声明注入规则：

export default defineContentScript({ matches: ['https://github.com/*'], runAt: 'document_start', allFrames: true, main() { ... }, });

注入后的核心逻辑分四步：

1. 页面识别：isRepositoryPage()判断路径分段数 ≥ 2 且不以@开头，排除用户主页、组织页等非仓库页面
2. 仓库信息提取：extractRepositoryInfo()用正则/^\/([^/]+)\/([^/]+)/从路径解析出owner与repo，并组装https://github.com/<owner>/<repo>
3. 定位头部容器：findNavigationContainer()优先查找新版 React 头部的ul[data-testid="repo-header-actions"]，找不到则回退到旧版ul.pagehead-actions（utils/github-navigation.ts）
4. 拼接跳转 URL：${REPOMIX_BASE_URL}/?repo=${encodeURIComponent(repoInfo.url)}，即https://repomix.com/?repo=https%3A%2F%2Fgithub.com%2F<owner>%2F<repo>

按钮创建时复用了 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、reporepomix）
• Repomix URL 的编码拼接结果（?repo=https%3A%2F%2Fgithub.com%2Fyamadashy%2Frepomix）
• 旧版头部容器ul.pagehead-actions的定位
• 新版 React 头部容器ul[data-testid="repo-header-actions"]的定位
• 两个容器同时存在时优先选择新版容器，均不存在时返回null

这套测试直接守护了 GitHub 页面结构变动（新版 React 头部逐步灰度）时的兼容性，是扩展长期可用的关键保障。

隐私与权限设计

依据 browser/README.md 的隐私声明，并结合清单配置可以确认：

• 不收集任何数据：无分析 SDK、无遥测上报代码，仅有注入按钮与跳转的逻辑
• 不跟踪用户行为：没有storage、cookies、history等权限
• 仅访问 github.com：host_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