Repomix 瀏覽器擴(kuò)展開發(fā)指南基于 Manifest V3 在 GitHub 倉(cāng)庫(kù)頁(yè)注入一鍵打包按鈕【免費(fèi)下載鏈接】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.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/rep/repomixRepomix 瀏覽器擴(kuò)展Browser Extension是 Repomix 項(xiàng)目為 GitHub 用戶提供的快捷入口它以跨瀏覽器擴(kuò)展Chrome / Firefox / Edge的形式在 GitHub 倉(cāng)庫(kù)頁(yè)面頭部操作區(qū)注入一個(gè) Repomix 按鈕點(diǎn)擊即可跳轉(zhuǎn)到 Repomix 在線服務(wù) 為骨架結(jié)合擴(kuò)展源碼、配置與測(cè)試系統(tǒng)講解其架構(gòu)設(shè)計(jì)、Manifest V3 實(shí)現(xiàn)原理、國(guó)際化機(jī)制以及完整的開發(fā)、構(gòu)建與手動(dòng)安裝流程讀完即可上手二次開發(fā)或在本地跑通整個(gè)擴(kuò)展工作流。擴(kuò)展概覽一個(gè)“輕量注入型”的跨瀏覽器擴(kuò)展從 browser/CLAUDE.md 的項(xiàng)目概述可以明確該擴(kuò)展的核心定位一個(gè)跨瀏覽器擴(kuò)展Chrome/Firefox/Edge為 GitHub 倉(cāng)庫(kù)頁(yè)面添加 Repomix 集成能力。它基于 Manifest V3通過(guò)內(nèi)容腳本Content Scripts將 Repomix 按鈕直接注入 GitHub 的 UI 中。這意味著擴(kuò)展本身不參與倉(cāng)庫(kù)打包計(jì)算它只做三件事識(shí)別當(dāng)前訪問(wèn)的 GitHub 倉(cāng)庫(kù)頁(yè)面解析出owner與repo在頁(yè)面頭部操作區(qū)插入一個(gè)按鈕點(diǎn)擊后以https://repomix.com/?repo倉(cāng)庫(kù)URL的方式打開 Repomix 在線服務(wù)。功能鏈路短、權(quán)限面小因此該擴(kuò)展在隱私設(shè)計(jì)上非常克制README 明確聲明它不收集任何數(shù)據(jù)、不追蹤用戶行為、只訪問(wèn)github.com域名、僅申請(qǐng)最小化權(quán)限詳見 browser/README.md 的 Privacy 一節(jié)以及 browser/wxt.config.ts 中的permissions: [scripting]與host_permissions: [https://github.com/*]。目錄結(jié)構(gòu)與工程組織CLAUDE.md 給出了擴(kuò)展工程的頂層組織方式結(jié)合當(dāng)前倉(cāng)庫(kù)實(shí)際布局WXT 框架的entrypoints/約定目錄如下browser/ ├── entrypoints/ # 擴(kuò)展入口WXT 約定 │ ├── background.ts # Service Worker后臺(tái)腳本 │ ├── content.ts # GitHub 集成的內(nèi)容腳本 │ └── styles.css # 注入元素的樣式 ├── public/ # 靜態(tài)資源 │ ├── _locales/ # 國(guó)際化文件11 種語(yǔ)言 │ └── images/ # 擴(kuò)展圖標(biāo)16px 到 128px ├── scripts/ │ └── generate-icons.ts # 從 SVG 批量生成多尺寸 PNG 圖標(biāo) ├── tests/ │ └── repomix-integration.test.ts # 集成測(cè)試 ├── utils/ │ └── github-navigation.ts # GitHub 頭部導(dǎo)航容器查找邏輯 ├── package.json # 腳本與依賴定義 ├── wxt.config.ts # WXT/Manifest 配置 ├── tsconfig.json └── types.d.ts # WXT 全局類型聲明工程基于 WXTwxt: ^0.21.4defineBackground與defineContentScript這類全局 API 的類型聲明集中在 browser/types.d.ts 中。開發(fā)環(huán)境與常用命令前置要求Node.js當(dāng)前 browser/package.json 中engines.node要求24.0.1browser/README.md 亦明確寫出 Node.js 22 或更高版本以 package.json 的實(shí)際約束為準(zhǔn)。包管理器倉(cāng)庫(kù)根目錄與 browser 目錄均使用 npm 與package-lock.json。安裝依賴npm install開發(fā)模式熱更新npm run dev chrome # Chrome 開發(fā)模式 npm run dev firefox # Firefox 開發(fā)模式對(duì)應(yīng)腳本 dev:firefox npm run dev edge # 使用 wxt build -b edge 指定瀏覽器WXT 開發(fā)模式下會(huì)自動(dòng)打開瀏覽器并加載擴(kuò)展在 browser/wxt.config.ts 中通過(guò)webExt.startUrls指定了開發(fā)時(shí)默認(rèn)打開的地址https://github.com/yamadashy/repomix方便直接看到按鈕注入效果。構(gòu)建npm run build-all # 依次構(gòu)建 Chrome / Firefox / Edge 三個(gè)版本 npm run build chrome # 僅構(gòu)建 Chrome npm run build firefox # 僅構(gòu)建 Firefox npm run build edge # 僅構(gòu)建 Edge構(gòu)建產(chǎn)物統(tǒng)一輸出到dist/目錄README 與 package.json 中的wxt build/wxt zip行為一致。其他常用命令命令作用npm run lintTypeScript 類型檢查tsc --noEmitnpm run test運(yùn)行 Vitest 測(cè)試npm run generate-icons從 SVG 生成全套 PNG 圖標(biāo)npm run zip/zip:chrome/zip:firefox/zip:edge生成可提交商店的 zip 包核心實(shí)現(xiàn)原理源碼級(jí)解析1. 內(nèi)容腳本注入與按鈕創(chuàng)建content.ts內(nèi)容腳本 browser/entrypoints/content.ts 是整個(gè)擴(kuò)展的核心其聲明為export default defineContentScript({ matches: [https://github.com/*], runAt: document_start, allFrames: true, main() { ... }, });關(guān)鍵點(diǎn)匹配范圍僅匹配https://github.com/*與 manifest 的host_permissions一致執(zhí)行時(shí)機(jī)document_start并配合 DOM 就緒判斷——若document.readyState loading則監(jiān)聽DOMContentLoaded否則立即初始化全幀注入allFrames: true。按鈕創(chuàng)建流程分四步第一步頁(yè)面判斷。isRepositoryPage()檢查路徑段數(shù)量至少兩段且不以開頭從而排除用戶主頁(yè)、組織頁(yè)等場(chǎng)景。第二步倉(cāng)庫(kù)信息提取。extractRepositoryInfo()使用正則從路徑中解析 owner 與 repoconst pathMatch window.location.pathname.match(/^\/([^/])\/([^/])/); // 例如 /yamadashy/repomix → owner: yamadashy, repo: repomix并據(jù)此構(gòu)造 GitHub 倉(cāng)庫(kù) URL 與 Repomix 跳轉(zhuǎn)鏈接const repomixUrl ${REPOMIX_BASE_URL}/?repo${encodeURIComponent(repoInfo.url)}; // 即 https://repomix.com/?repohttps%3A%2F%2Fgithub.com%2Fyamadashy%2Frepomix這一 URL 構(gòu)造邏輯在 browser/tests/repomix-integration.test.ts 中有明確的單元測(cè)試斷言。第三步按鈕構(gòu)建。createRepomixButton()創(chuàng)建li a結(jié)構(gòu)復(fù)用 GitHub 的原子類btn-sm btn BtnGroup-item使按鈕外觀與 GitHub 原生 UI 保持一致圖標(biāo)通過(guò)chrome.runtime.getURL(images/icon-64.png)加載默認(rèn) 64px 圖標(biāo)、16px 展示尺寸并設(shè)置target_blank與relnoopener noreferrer保證安全新標(biāo)簽頁(yè)打開。按鈕的 Tooltip 文本來(lái)自chrome.i18n.getMessage(openWithRepomix)走國(guó)際化渠道。第四步防重復(fù)與動(dòng)態(tài)導(dǎo)航適配。isRepomixButtonAlreadyExists()通過(guò)類名.repomix-button去重observePageChanges()使用MutationObserver監(jiān)聽document.body的子樹變化以應(yīng)對(duì) GitHub 的 SPA 式動(dòng)態(tài)渲染如切換分支、文件瀏覽導(dǎo)致頭部重繪同時(shí)監(jiān)聽popstate事件處理瀏覽器前進(jìn)/后退導(dǎo)航。注入元素的樣式集中在 browser/entrypoints/styles.css對(duì).repomix-button使用inline-flex對(duì)齊圖標(biāo)與文字保證與 GitHub 按鈕體系視覺(jué)融合。2. Service Worker 按需注入background.tsentrypoints/background.ts 實(shí)現(xiàn)的是擴(kuò)展啟動(dòng)時(shí)的“補(bǔ)注入”邏輯擴(kuò)展安裝/更新后遍歷已打開的全部標(biāo)簽頁(yè)chrome.tabs.query({})對(duì)每個(gè)標(biāo)簽執(zhí)行injectContentToTab()跳過(guò) URL 未定義、標(biāo)簽頁(yè)被丟棄tab.discarded或非https://github.com/前綴的標(biāo)簽從chrome.runtime.getManifest()讀取content_scripts[0]中聲明的 css 與 js通過(guò)chrome.scripting.insertCSS/executeScript動(dòng)態(tài)注入。這種“manifest 聲明 后臺(tái)按需注入”的雙保險(xiǎn)策略確保用戶此前已打開的 GitHub 標(biāo)簽頁(yè)也能立即獲得 Repomix 按鈕無(wú)需刷新頁(yè)面。chrome.scripting正是 manifest 中permissions: [scripting]所對(duì)應(yīng)的能力。3. GitHub 頭部導(dǎo)航容器適配github-navigation.tsGitHub 正在將倉(cāng)庫(kù)頭部從傳統(tǒng)ul.pagehead-actions遷移到 React 化新結(jié)構(gòu)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) ); }優(yōu)先使用新結(jié)構(gòu)找不到時(shí)回退到舊結(jié)構(gòu)兩者都不存在時(shí)返回null此時(shí)按鈕靜默跳過(guò)不報(bào)錯(cuò)。瀏覽器集成測(cè)試 覆蓋了該函數(shù)的完整行為矩陣舊版頭部ul.pagehead-actions可被找到新版頭部ul[data-testidrepo-header-actions]可被找到兩者同時(shí)存在時(shí)優(yōu)先新版都不存在時(shí)返回null同時(shí)驗(yàn)證了路徑正則解析yamadashy/repomix與 Repomix URL 編碼結(jié)果。Manifest V3 配置要點(diǎn)wxt.config.ts 集中定義了 manifest 關(guān)鍵項(xiàng)配置項(xiàng)值說(shuō)明manifest_version3由 WXT 默認(rèn)生成Manifest V3 規(guī)范nameRepomix擴(kuò)展名稱description__MSG_appDescription__使用 i18n 占位符按瀏覽器語(yǔ)言讀取default_localeen默認(rèn)語(yǔ)言為英文minimum_chrome_version88.0Chrome 最低版本permissions[scripting]僅申請(qǐng)動(dòng)態(tài)腳本注入權(quán)限host_permissions[https://github.com/*]只對(duì) GitHub 域名生效icons16/19/32/38/48/64/128七種尺寸的圖標(biāo)web_accessible_resources全部圖標(biāo) https://github.com/*匹配供內(nèi)容腳本加載圖標(biāo)資源browser_specific_settings.geckoid{3AB97897-...}strict_min_version102.0Firefox/Gecko 兼容聲明國(guó)際化i18n支持的語(yǔ)言共 11 種CLAUDE.md 列出英語(yǔ)、日語(yǔ)、德語(yǔ)、法語(yǔ)、西班牙語(yǔ)、巴西葡萄牙語(yǔ)、印度尼西亞語(yǔ)、越南語(yǔ)、韓語(yǔ)、中文簡(jiǎn)/繁、印地語(yǔ)。對(duì)應(yīng) browser/public/_locales/ 下的 11 個(gè)語(yǔ)言目錄de / en / es / fr / hi / id / ja / ko / pt_BR / vi / zh_CN / zh_TW。國(guó)際化文件結(jié)構(gòu)每個(gè)語(yǔ)言目錄包含兩個(gè)文件messages.jsonChrome/WebExtensions 標(biāo)準(zhǔn) i18n 消息文件。例如英文版 browser/public/_locales/en/messages.json 定義了兩個(gè)鍵appDescription擴(kuò)展描述在 manifest 中通過(guò)__MSG_appDescription__引用openWithRepomix按鈕 Tooltip「Open with Repomix」由內(nèi)容腳本通過(guò)chrome.i18n.getMessage(openWithRepomix)讀取。detailed-description.txt供應(yīng)用商店使用的長(zhǎng)篇描述文本。CLAUDE.md 規(guī)定新增語(yǔ)言時(shí)至少需要appName、appDescription、buttonText三個(gè)鍵當(dāng)前源碼中 manifest 實(shí)際使用__MSG_appDescription__、按鈕 Tooltip 使用openWithRepomix新增語(yǔ)言時(shí)建議同時(shí)補(bǔ)齊這些鍵以保持一致。新增語(yǔ)言的操作步驟在 browser/public/_locales/ 下創(chuàng)建[language_code]/目錄如ar/添加messages.json包含所需消息鍵添加detailed-description.txt作為商店描述運(yùn)行npm run dev或npm run build驗(yàn)證擴(kuò)展在目標(biāo)語(yǔ)言環(huán)境下能正確加載并顯示對(duì)應(yīng)文案。圖標(biāo)生成流水線擴(kuò)展圖標(biāo)并非手工維護(hù)多張 PNG而是由 browser/scripts/generate-icons.ts 從單張 SVG 源圖browser/public/images/icon.svg自動(dòng)生成目標(biāo)尺寸16、19、32、38、48、64、128與 manifesticons聲明一一對(duì)應(yīng)工具鏈sharptsx腳本先校驗(yàn) SVG 存在再并行 resize 并輸出 PNG調(diào)用方式npm run generate-icons。這讓新增/調(diào)整圖標(biāo)只需改一處 SVG避免多尺寸文件失配。手動(dòng)安裝擴(kuò)展加載 unpacked以 Chrome 為例browser/README.md 中 Manual Installation 一節(jié)執(zhí)行npm run build chrome完成構(gòu)建打開chrome://extensions/開啟右上角「開發(fā)者模式Developer mode」點(diǎn)擊「加載已解壓的擴(kuò)展程序Load unpacked」選擇dist/chrome目錄WXT 按瀏覽器輸出到對(duì)應(yīng)子目錄。加載后在任意 GitHub 倉(cāng)庫(kù)頁(yè)面如github.com/yamadashy/repomix的頭部操作區(qū)即可看到 Repomix 按鈕點(diǎn)擊后在新標(biāo)簽頁(yè)打開 Repomix 在線服務(wù)并自動(dòng)帶入當(dāng)前倉(cāng)庫(kù)。Firefox 對(duì)應(yīng)about:debugging#/runtime/this-firefox加載dist/firefoxEdge 對(duì)應(yīng)edge://extensions/加載dist/edge。測(cè)試與質(zhì)量保障擴(kuò)展使用 Vitest jsdom 做 DOM 層測(cè)試運(yùn)行npm run test即可。當(dāng)前 browser/tests/repomix-integration.test.ts 覆蓋了三條核心契約倉(cāng)庫(kù)路徑解析/yamadashy/repomix能正確解析出 owner 與 repo跳轉(zhuǎn) URL 構(gòu)造https://github.com/yamadashy/repomix編碼為https://repomix.com/?repohttps%3A%2F%2Fgithub.com%2Fyamadashy%2Frepomix導(dǎo)航容器查找新舊兩種 GitHub 頭部結(jié)構(gòu)的選擇與優(yōu)先級(jí)。此外npm run linttsc --noEmit負(fù)責(zé)全量類型檢查。這兩個(gè)命令共同構(gòu)成改動(dòng)內(nèi)容腳本、導(dǎo)航工具函數(shù)或國(guó)際化文案時(shí)的回歸保障?？偨Y(jié)Repomix 瀏覽器擴(kuò)展是一個(gè)典型的 Manifest V3 輕量集成型擴(kuò)展以 WXT 為工程底座通過(guò)內(nèi)容腳本 后臺(tái) Service Worker 雙路注入、MutationObserver 動(dòng)態(tài)導(dǎo)航適配、i18n 十一語(yǔ)言國(guó)際化以及 SVG 驅(qū)動(dòng)的多尺寸圖標(biāo)流水線把「GitHub 倉(cāng)庫(kù) → Repomix 一鍵打包」的路徑壓縮到一次點(diǎn)擊。其設(shè)計(jì)對(duì)同類“給第三方頁(yè)面注入功能按鈕”的擴(kuò)展開發(fā)具有直接的參考價(jià)值——尤其是 GitHub 新舊頭部結(jié)構(gòu)的雙選擇器回退策略是應(yīng)對(duì)上游 DOM 演進(jìn)的穩(wěn)妥范本。【免費(fèi)下載鏈接】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.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/rep/repomix創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考