Chrome Extension: GitHub Integration
Relevant source files
The following files were used as context for generating this wiki page:
The Chrome Extension for Claude Context provides a seamless interface for indexing and semantically searching GitHub repositories directly within the browser. It leverages a background service worker to manage long-running tasks like vector embedding and database synchronization, while injecting a custom UI into GitHub's native interface via content scripts. This integration allows developers to perform natural language queries over millions of lines of code without leaving the GitHub environment.
The system is built on a distributed architecture where the extension acts as a client to embedding providers (e.g., OpenAI, VoyageAI) and vector databases (Milvus). Key features include real-time indexing progress tracking, cross-repository search, and context-aware search based on selected code snippets.
Sources: packages/chrome-extension/README.md:1-20, packages/chrome-extension/CONTRIBUTING.md:144-155
System Architecture
The integration consists of three primary layers: the UI layer (Content Script), the logic layer (Background Service Worker), and the storage/API layer (Milvus and Embedding Providers).
Communication Flow
The content script detects GitHub repository pages and injects the search UI. When a user initiates an indexing or search action, the content script sends a message to the background script using chrome.runtime.sendMessage. The background script coordinates API calls to GitHub for file retrieval, OpenAI for embeddings, and Milvus for vector storage.
The diagram shows the interaction between the extension components and external service providers.
Sources: packages/chrome-extension/src/content.ts:600-618, packages/chrome-extension/src/background.ts:252-273, packages/chrome-extension/CONTRIBUTING.md:46-58
Core Components
Content Script (content.ts)
The content script is responsible for DOM manipulation and monitoring GitHub's Single Page Application (SPA) navigation. It identifies repository home pages and injects a "Code Search" box into the GitHub sidebar or navigation area.
- Key Functions:
injectUI(): Creates and inserts the search container into the GitHub DOM.isRepoHomePage(): Validates if the current URL matches a repository root or tree view.handleSearch(): Collects user input and triggers the search process via background messages.MutationObserver: Monitors for URL changes in GitHub's SPA architecture to re-inject UI elements.
Sources: packages/chrome-extension/src/content.ts:4-30, packages/chrome-extension/src/content.ts:32-130, packages/chrome-extension/src/content.ts:602-618
Background Service Worker (background.ts)
The background worker acts as the central coordinator for heavy processing tasks. It handles the extension's lifecycle and manages cross-tab communication.
- Key Logic:
- GitHub Integration: Fetches file trees and contents using the GitHub API with rate-limit handling.
- Vectorization: Batches code chunks and sends them to the
EmbeddingModelto generate vectors. - Storage: Uses
MilvusVectorDBto manage repository-specific collections.
| Component | Responsibility | Relevant Files |
|---|---|---|
| EmbeddingModel | Interfaces with OpenAI/VoyageAI for vector generation | background.ts, chromeMilvusAdapter.ts |
| MilvusVectorDB | High-level wrapper for Milvus collection management | background.ts |
| IndexedRepoManager | Tracks which repositories have been indexed locally | indexedRepoManager.ts |
Sources: packages/chrome-extension/src/background.ts:41-80, packages/chrome-extension/src/background.ts:316-360, packages/chrome-extension/CONTRIBUTING.md:65-69
Indexing Process
The indexing workflow follows a sequence of fetching, splitting, embedding, and storing.
Indexing Sequence
This diagram illustrates the asynchronous indexing pipeline handled by the background service worker.
Sources: packages/chrome-extension/src/background.ts:303-345, packages/chrome-extension/src/background.ts:411-480
Code Splitting Logic
Code is split into chunks to fit embedding model context limits while preserving local context. The default configuration uses a chunk size of 1000 characters with a 200-character overlap, approximating the behavior of standard character-based splitters.
// packages/chrome-extension/src/background.ts:139-144
function splitCode(content: string, language: string = '', chunkSize: number = 1000, chunkOverlap: number = 200) {
const lines = content.split('\n');
const chunks: { content: string; startLine: number; endLine: number }[] = [];
// ... line-based chunking logic ...
}
Sources: packages/chrome-extension/src/background.ts:139-183
Search Implementation
The search feature utilizes natural language queries converted into vectors to find similar code snippets using cosine similarity.
Semantic Search Workflow
- Query Vectorization: The user query is sent to the
EmbeddingModel.embedSingle()function. - Vector Search: The resulting vector is passed to
adapter.searchSimilar()with a default similarity threshold of 0.3. - Result Formatting: Results include a similarity score (match percentage), file path, line numbers, and a code preview.
Sources: packages/chrome-extension/src/background.ts:503-524, packages/chrome-extension/src/milvus/chromeMilvusAdapter.ts:101-137
Technical Specifications
Supported Languages
The extension filters for specific file extensions during the indexing process to ensure relevant source code is captured.
- Programming:
.ts,.tsx,.js,.jsx,.py,.java,.cpp,.c,.h,.hpp,.cs,.go,.rs,.php,.rb,.swift,.kt,.scala,.m,.mm. - Documentation:
.md.
Sources: packages/chrome-extension/src/background.ts:360-363
Browser Compatibility and Polyfills
Because the extension runs in a browser environment but relies on logic shared with Node.js packages, several polyfills are required in the build process.
| Polyfill | Node.js Module |
|---|---|
crypto-browserify | crypto |
path-browserify | path |
stream-browserify | stream |
vm-browserify | vm |
Sources: packages/chrome-extension/CONTRIBUTING.md:86-98, packages/chrome-extension/package.json:28-44
Summary
The GitHub integration of the Chrome extension enables a powerful semantic search layer directly on top of the GitHub interface. By offloading the computationally expensive tasks of file retrieval, embedding generation, and vector search to the background service worker, it maintains a responsive user experience while providing deep context into large codebases. The integration is secured via GitHub personal access tokens and relies on the Milvus RESTful API for efficient vector retrieval in a browser context.
Sources: packages/chrome-extension/README.md:5-15, packages/chrome-extension/src/background.ts:186-215