企业官网建设流程全解析

Claude Context Chrome 扩展实战指南：在 GitHub 上直接构建代码语义搜索引擎

【免费下载链接】claude-contextCode search MCP for Claude Code. Make entire codebase the context for any coding agent.项目地址: https://gitcode.com/GitHub_Trending/co/claude-context

本指南围绕 Claude Context 仓库中的 GitHub Code Vector Search Chrome 扩展（位于 packages/chrome-extension）展开，讲解如何在浏览器中安装、配置并运行这套"浏览即索引、提问即搜索"的代码语义检索方案。读完本文，你将掌握扩展的构建加载流程、Milvus 向量库与嵌入模型的核心配置方式，以及底层索引、切分、检索的实现原理，能够基于真实源码为任意 GitHub 仓库搭建可用的语义代码搜索环境。

扩展概述与核心能力

GitHub Code Vector Search 是 Claude Context（项目代码搜索 MCP，目标是为任意编码 Agent 提供整个代码库上下文）在浏览器端的延伸：它把 packages/core 的索引引擎能力搬进 Chrome 扩展，让你在浏览 GitHub 仓库页面时即可完成代码的向量化索引与语义检索。

扩展的核心能力包括：

• 语义搜索：基于语义理解检索 GitHub 仓库代码，而非简单字符串匹配；
• 仓库索引：自动拉取 GitHub 仓库文件，构建语义向量数据库；
• 上下文搜索：在 GitHub 上直接选中代码片段，检索仓库内语义相近的相关代码；
• 多平台嵌入：支持 OpenAI 与 VoyageAI 两类嵌入模型供应商；
• 向量存储：集成 Milvus 向量数据库，提供高效存储与召回；
• GitHub 深度集成：UI 直接嵌入 GitHub 仓库页面侧边栏；
• 跨仓库搜索：可对多个已索引仓库统一检索；
• 实时性：边浏览边索引与搜索。

从工程形态看，这是一个 Manifest V3 的现代扩展（见 packages/chrome-extension/src/manifest.json），依赖@zilliz/claude-context-core工作区包作为语义搜索引擎（见 packages/chrome-extension/package.json）。

安装与加载

应用商店安装

扩展计划上架 Chrome Web Store（README 标注为 Coming Soon）。在当前仓库快照中该入口尚未开放，因此实际使用以手动加载开发版为主。

手动加载（开发模式）

1. 构建扩展：在仓库根目录执行

   cd packages/chrome-extension pnpm build

   构建脚本实际调用webpack --mode=production（见 packages/chrome-extension/package.json），产物输出到dist目录。开发时可使用pnpm dev（webpack --mode=development --watch）开启监听式增量构建，也可用pnpm typecheck（tsc --noEmit）做类型检查。

2. 在 Chrome 中加载：

   • 打开 Chrome 并访问chrome://extensions/；
   • 开启右上角"开发者模式"；
   • 点击"加载已解压的扩展程序"，选择上一步生成的dist文件夹；
   • 扩展随即出现在扩展列表中。

Webpack 配置（packages/chrome-extension/webpack.config.js）会生成三个入口文件background.js、content.js、options.js，并通过 CopyWebpackPlugin 将src/manifest.json、src/options.html、src/styles.css及src/icons一并拷贝到dist，保证加载目录自洽。

快速上手：索引一个仓库并开始搜索

1. 配置设置：

   • 点击 Chrome 工具栏中的扩展图标；
   • 进入 Options/设置页；
   • 配置嵌入模型供应商与 API Key；
   • 填写 Milvus 连接信息。

2. 索引仓库：

   • 导航到任意 GitHub 仓库页面；
   • 点击页面侧边栏中出现的 "Index Repository" 按钮；
   • 等待索引完成（索引过程会实时显示进度）。

3. 开始搜索：

   • 使用 GitHub 仓库页面上出现的搜索框；
   • 输入自然语言查询，例如 "function that handles authentication"；
   • 点击结果即可跳转到对应代码位置。

扩展的 UI 由 packages/chrome-extension/src/content.ts 注入：它优先挂载到 GitHub 的.Layout-sidebar（About 区域），找不到时回退到仓库导航栏nav.UnderlineNav之后，并通过 MutationObserver 监听 URL 变化以适配 GitHub 的 SPA 页面跳转。搜索框对不足 3 个字符的查询直接忽略，结果按相似度降序渲染，命中 80% 以上标为高相关、60% 以上标为中相关，每项展示文件路径、扩展名、行号区间、匹配百分比与前 300 字符预览，点击结果链接可直接定位到对应文件的起始行。

配置项详解

扩展的配置页（options.html，逻辑见 packages/chrome-extension/src/options.ts）通过chrome.storage.sync持久化以下字段：

Milvus 配置由 packages/chrome-extension/src/config/milvusConfig.ts 中的MilvusConfigManager统一读写：getMilvusConfig()要求必须存在milvusAddress，认证字段（token 或用户名密码）对本地实例可留空；validateMilvusConfig()只做最基础的地址非空校验。地址未带协议前缀时，浏览器端适配器会自动补上http://（见 packages/chrome-extension/src/stubs/milvus-vectordb-stub.ts）。

设置页还提供"Test Milvus Connection"按钮：它会先将表单值暂存到 storage，再向后台脚本发送testMilvusConnection消息，由后台用ChromeMilvusAdapter.testConnection()尝试一次集合探测请求，并针对网络不通、CORS 拦截、401 未授权、404 地址错误等常见故障返回可读的排错提示（见 background.ts）。页面底部内置调试面板，可展开查看设置保存/恢复的实时日志，方便排查问题。

权限清单

扩展声明的权限与用途（见 packages/chrome-extension/src/manifest.json）：

• storage：保存配置与索引元数据；
• scripting：向 GitHub 页面注入搜索 UI；
• unlimitedStorage：本地存储向量嵌入等较大数据；
• Host Permissions：https://github.com/*、https://api.openai.com/*，以及http://*/*、https://*/*（供 Milvus REST 服务端与嵌入 API 调用）。

Content Script 仅匹配https://github.com/*/*（仓库级路径），并注入styles.css；Manifest 同时声明了wasm-unsafe-eval的扩展页 CSP 以及ort-wasm-simd-threaded.wasm等 web 可访问资源，为浏览器端 WASM 推理预留能力。

底层实现原理

索引流水线

点击 "Index Repository" 后，content script 向后台发送indexRepo消息，后台的完整链路如下（核心逻辑在 packages/chrome-extension/src/background.ts）：

1. checkRepositoryAccess()：用 GitHub Token 探测仓库，区分 404（仓库不存在或无权限）、403（限流/权限不足）等错误；
2. fetchRepoFiles()：调用 GitHub Git Trees API（/git/trees/{default_branch}?recursive=1）获取全量文件树，并按扩展名白名单过滤，支持的代码类型包括ts/tsx/js/jsx/py/java/cpp/c/h/hpp/cs/go/rs/php/rb/swift/kt/scala/m/mm/md；
3. fetchFileContent()：通过 Contents API 拉取每个文件内容（base64 解码）；
4. splitCode()：对文件内容做行级切块，默认chunkSize=1000、chunkOverlap=200，与 VSCode 扩展默认值保持一致（见 background.ts），采用带重叠滑窗的字符切分，保留startLine/endLine行号信息；
5. EmbeddingModel.embedBatch()：以每批 100 个 chunk（EMBEDDING_BATCH_SIZE）调用 OpenAI embeddings 接口，生成 1536 维向量（EMBEDDING_DIM）；
6. MilvusVectorDB.addChunks()：批量写入 Milvus，collection 命名为chrome_repo_${owner}_${repo}（非字母数字替换为下划线）。

索引期间，后台会通过indexProgress消息向页面推送Indexed X/Y files (N chunks)的实时进度；单文件 chunk 数超过 50 或内容超过 100KB 会给出告警日志。索引完成后调用IndexedRepoManager.addIndexedRepo()记录元数据，并通知页面显示完成状态。

向量数据库适配层

扩展没有直接依赖 Node 版 Milvus SDK，而是通过 packages/chrome-extension/src/stubs/milvus-vectordb-stub.ts 提供了一份面向浏览器的轻量 Milvus RESTful 实现（基于核心包MilvusRestfulVectorDatabase的接口形态重写），请求走{address}/v2/vectordbREST 端点，认证支持Bearer token或Bearer username:password两种形式。

封装层 packages/chrome-extension/src/milvus/chromeMilvusAdapter.ts 的ChromeMilvusAdapter提供了索引与检索的全部原语：

• createCollection(dimension=1536)：建集合并写入描述信息；
• insertChunks()：将CodeChunk（id、content、relativePath、startLine、endLine、fileExtension、metadata、vector）转换为向量文档批量插入；
• searchSimilar(queryVector, limit=10, threshold=0.3)：以余弦相似度检索，默认 topK 10、阈值 0.3，结果按分数降序排序并附调试日志（展示前 5 条命中路径、分数与行号区间）；
• clearCollection()：删除集合后重建，实现一键清空索引；
• getCollectionStats()：返回集合实体数，用于索引状态展示。

后台脚本中还内置了cosSim()余弦相似度实现与批量向量求均值逻辑，为后续排序与多查询合并提供基础。

搜索流程

搜索时 content script 发送searchCode消息，后台执行（见 background.ts）：

1. 初始化对应仓库的MilvusVectorDB（必要时自动建集合）；
2. 用查询文本调用embedSingle()得到查询向量；
3. 调用searchSimilar()取回最多 20 条相似 chunk（含 score）；
4. 更新该仓库的最近搜索时间（IndexedRepoManager.updateLastSearchTime）并返回结果。

索引元数据管理

packages/chrome-extension/src/storage/indexedRepoManager.ts 负责在chrome.storage.local中以indexedRepositories键维护已索引仓库记录（id、owner、repo、indexedAt、totalFiles、totalChunks、lastSearchAt、collectionName）：

• 新增仓库时去重后插入队首，最多保留 5 条；
• isRepoIndexed()供页面加载时自动查询索引状态；
• getRecentlyIndexedRepos()按索引时间倒序返回，供 "Recent Repos" 面板展示（每条显示文件数、chunk 数、索引日期与最近搜索日期）；
• cleanupOldRepos()支持按天数（默认 30 天）清理过期记录。

浏览器兼容策略

Node 生态的模块在浏览器中不可直接用，webpack.config.js 通过resolve.fallback将crypto、stream、buffer、path、util、process、os、http、https、zlib、url、assert等替换为 browserify 系 polyfill，同时将fs、tls、net、dns、child_process、http2、module、worker_threads置为false（不打包），并用NormalModuleReplacementPlugin把vm模块替换为仓库自带的 packages/chrome-extension/src/vm-stub.js。ProvidePlugin全局注入process与Buffer，DefinePlugin固定NODE_ENV=production并把global指向globalThis。生产构建经 Terser 压缩（保留 console 便于排查，剔除 debugger）。

典型使用场景

基础语义搜索

1. 打开任意已索引的 GitHub 仓库；
2. 在侧边栏搜索框输入自然语言查询，如 "error handling middleware"；
3. 浏览按语义相关度排序的检索结果，点击跳转到对应代码行。

上下文/相关代码搜索

1. 在 GitHub 页面上选中一段代码；
2. 通过右键菜单（扩展注入的入口）触发"搜索相似代码"；
3. 查看该仓库内语义相近的相关代码块。

多仓库搜索

1. 依次为多个仓库建立索引；
2. 通过扩展的 Recent Repos 面板或统一搜索入口跨仓库检索；
3. 可按仓库或文件类型过滤结果。

技术栈与文件结构

技术栈：TypeScript（类型安全）、Chrome Manifest V3（现代扩展架构）、Webpack（模块打包与优化）、Claude Context Core（语义搜索引擎）、Milvus 向量数据库（向量存储与召回）、OpenAI/VoyageAI Embeddings（文本向量化）。

核心源码布局（均在packages/chrome-extension下）：

• src/content.ts：向 GitHub 页面注入搜索 UI 的内容脚本
• src/background.ts：后台 Service Worker，承载索引、嵌入、检索与 GitHub API 调用
• src/options.ts：配置页逻辑（GitHub Token、OpenAI Key、Milvus 连接）
• src/config/milvusConfig.ts：Milvus 连接配置的读写与校验
• src/milvus/chromeMilvusAdapter.ts：浏览器兼容的 Milvus 适配层
• src/storage/indexedRepoManager.ts：已索引仓库元数据管理
• src/stubs/：面向浏览器环境的 Node 模块兼容 stub
• src/vm-stub.js、src/manifest.json、src/options.html、src/styles.css：扩展清单、选项页与样式

浏览器支持

• Chrome 88+
• 其他 Chromium 内核浏览器（Edge、Brave 等）

扩展生态与相关包

该扩展是 Claude Context monorepo 的一员，仓库根目录 README.md 提供项目整体概览与安装说明，CONTRIBUTING.md 为通用贡献指南，扩展专属开发说明见 packages/chrome-extension/CONTRIBUTING.md。相关的姊妹包包括：

• packages/core：本扩展使用的核心索引引擎；
• packages/vscode-extension：VSCode 集成；
• packages/mcp：MCP 服务器集成，供 Claude Code 等编码 Agent 消费整个代码库上下文。

许可证为 MIT（见 LICENSE）。如果你想为任何编码 Agent 补齐"整个代码库作为上下文"的能力，可以先在 VSCode 或 MCP 端体验，再借助本扩展在浏览器侧完成同样的语义检索闭环。

【免费下载链接】claude-contextCode search MCP for Claude Code. Make entire codebase the context for any coding agent.项目地址: https://gitcode.com/GitHub_Trending/co/claude-context