Chrome Extension Options & UI
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Chrome Extension Options & UI module provides the interface and configuration management for the Claude Context web integration. Its primary purpose is to allow users to configure embedding providers (OpenAI, VoyageAI), manage connections to the Milvus vector database, and interact with GitHub repositories through an injected search interface. This system bridges the gap between the core semantic search engine and the user's browser environment.
The UI consists of two main components: an Options page for persistent settings and a Content Script that injects a search and indexing dashboard directly into GitHub's repository pages. These components communicate with a Background Service Worker that handles heavy-duty tasks like indexing, embedding generation, and vector database communication.
Sources: packages/chrome-extension/README.md, packages/chrome-extension/src/content.ts:18-112, packages/chrome-extension/src/options.ts:1-25
Core UI Components
GitHub Integration (Content Script)
The extension utilizes a content script to modify the GitHub UI. It injects a "Code Search" container into the repository sidebar or navigation bar. This container provides controls for indexing the current repository, clearing the local index, and performing natural language searches.
The injection logic determines the appropriate location based on GitHub's page structure:
- Sidebar: Attempts to locate
.Layout-sidebar. - Navigation Bar: Falls back to
nav.UnderlineNav.
Sources: packages/chrome-extension/src/content.ts:18-30, packages/chrome-extension/CONTRIBUTING.md:120-125
Options and Configuration
The Options page (options.ts) serves as the central hub for user secrets and infrastructure settings. It leverages chrome.storage.sync to persist configuration across browser instances.
| Component | Description |
|---|---|
| GitHub Token | Personal access token for accessing private repositories. |
| OpenAI Token | API key for generating text embeddings. |
| Milvus Address | The endpoint for the Milvus/Zilliz Cloud vector database. |
| Milvus Database | The specific database name (defaults to 'default'). |
| Debug Info | A toggleable area for real-time logs and connection status. |
Sources: packages/chrome-extension/src/options.ts:25-50, packages/chrome-extension/README.md:41-50
Architecture and Data Flow
The extension follows a standard Chrome Extension architecture where the UI components delegate processing to the background script.
Configuration Flow
The configuration flow ensures that settings are validated and persisted before being used by the background services.
The saveOptions function collects values from HTML input elements, validates the Milvus URL format, and stores them using the Chrome storage API.
Sources: packages/chrome-extension/src/options.ts:25-85, packages/chrome-extension/src/background.ts:265-275
Search and Indexing Flow
When a user interacts with the injected GitHub UI, messages are passed between the content script and the background service worker.
The content script triggers the handleSearch function, which sends the query to the background. The background script converts the query to a vector via the EmbeddingModel and queries the MilvusVectorDB.
Sources: packages/chrome-extension/src/content.ts:227-260, packages/chrome-extension/src/background.ts:460-475
Key Functions and Logic
Connection Testing
The testMilvusConnection function in options.ts provides immediate feedback on infrastructure health. It temporarily saves settings and sends a message to the background to attempt a collection existence check.
// packages/chrome-extension/src/options.ts:128-135
function testMilvusConnection() {
// ... UI loading states ...
chrome.runtime.sendMessage({
action: 'testMilvusConnection'
}, (response) => {
// Handle success/failure UI updates
});
}
Sources: packages/chrome-extension/src/options.ts:128-175
UI State Management
The content script dynamically updates button states based on whether the repository is already indexed. If indexed, the search button is enabled; otherwise, the user is prompted to index the repository.
checkIndexStatus(): Requests the current state from the background script.updateUIState(isIndexed): Toggles button availability and colors (e.g., green for search, yellow for re-index).
Sources: packages/chrome-extension/src/content.ts:175-225
Result Formatting
The displayResults function converts raw search data into an interactive list within the GitHub UI. It includes:
- Match Percentage: Derived from the cosine similarity score (
result.score * 100). - Syntax Highlighting Support: Renders code snippets in a
<pre>block with HTML escaping for security. - Direct Links: Links files directly to GitHub blobs with specific line anchors (
#L${result.startLine}).
Sources: packages/chrome-extension/src/content.ts:262-315
Summary
The Chrome Extension Options & UI module provides a seamless bridge between GitHub and the Claude Context semantic search engine. By combining a content script for UI injection with a robust options management system, it allows developers to configure their AI-enhanced search environment and interact with their codebase directly within the browser. The architecture emphasizes asynchronous messaging and background processing to ensure the GitHub user experience remains responsive during heavy indexing operations.
Sources: packages/chrome-extension/README.md, packages/chrome-extension/CONTRIBUTING.md