Developing Extensions (VSCode & Chrome)

Relevant source files

The following files were used as context for generating this wiki page:

• packages/vscode-extension/CONTRIBUTING.md
• packages/chrome-extension/CONTRIBUTING.md
• packages/vscode-extension/package.json
• packages/chrome-extension/package.json
• packages/vscode-extension/README.md
• packages/chrome-extension/README.md
• packages/chrome-extension/src/background.ts
• packages/vscode-extension/webpack.config.js

Developing extensions for Claude Context involves integrating the core semantic search engine into IDE and browser environments. These extensions enable users to index codebases and perform natural language searches directly within their workflow, utilizing vector embeddings and Milvus for storage.

The extensions share a dependency on the @zilliz/claude-context-core package, which provides the fundamental logic for indexing and search. However, they differ in how they handle environmental constraints, such as Node.js polyfills for the browser and Webview implementations for the IDE sidebar.
Sources: packages/vscode-extension/package.json:149, packages/chrome-extension/package.json:16, packages/chrome-extension/README.md:99

VSCode Extension Development

The VSCode extension provides semantic code search within the editor via a sidebar Webview and command palette integration. It is built using TypeScript and bundled with Webpack, targeting a Node.js context suitable for VSCode's extension host.

Project Structure

• src/extension.ts: Main entry point for the extension.
• src/commands/: Implementation of extension commands like indexCodebase and semanticSearch.
• package.json: Manifest defining commands, views, and configuration settings.
• webpack.config.js: Configuration for bundling, including stubs for native modules.
  Sources: packages/vscode-extension/CONTRIBUTING.md:28-32, packages/vscode-extension/webpack.config.js:6-12

Technical Constraints and Stubs

Because VSCode extensions run in a specific host environment, certain native dependencies must be replaced with stubs or WebAssembly versions. The extension uses web-tree-sitter for AST-based splitting and stubs out the standard Milvus Node.js SDK in favor of browser-compatible alternatives or internal adapters.
Sources: packages/vscode-extension/webpack.config.js:52-78

Development Workflow

The primary development tool is the Extension Development Host, launched via F5.

The diagram above illustrates the standard inner-loop development cycle for the VSCode extension.
Sources: packages/vscode-extension/CONTRIBUTING.md:22-42

Chrome Extension Development

The Chrome extension integrates semantic search directly into the GitHub UI. It uses Manifest V3 and relies on a background service worker to manage data persistence and cross-tab communication.

Component Architecture

• Content Script (content.ts): Injects the search UI and "Index Repository" button into GitHub pages.
• Background Worker (background.ts): Manages the extension lifecycle, handles GitHub API requests, and interfaces with the Milvus adapter.
• Options Page: Handles user configuration for API keys and database endpoints.
  Sources: packages/chrome-extension/CONTRIBUTING.md:44-55, packages/chrome-extension/src/background.ts:446-465

Data Flow: Repository Indexing

Indexing in the Chrome extension involves fetching files via the GitHub API, chunking them, and generating embeddings before sending them to Milvus.

This sequence shows the interaction between the injected content script and the background worker during the indexing phase.
Sources: packages/chrome-extension/src/background.ts:503-625

Common Configuration

Both extensions allow users to configure embedding providers and vector database settings. These settings are typically stored in the environment provided by the host (VSCode settings or Chrome storage).

Configuration Property	Description	Allowed Values
embeddingProvider.provider	The service used to generate vectors	OpenAI, VoyageAI, Ollama, Gemini
embeddingProvider.model	The specific model for embeddings	e.g., text-embedding-3-small
milvus.address	The endpoint for the vector database	e.g., http://localhost:19530
splitter.type	Strategy for code chunking	ast, langchain
Sources: packages/vscode-extension/package.json:67-119, packages/chrome-extension/README.md:46-53

Browser Compatibility & Polyfills

Since the Chrome extension and parts of the VSCode Webview run in browser environments, Node.js core modules are polyfilled using Webpack.

• Crypto: crypto-browserify for hashing.
• Path: path-browserify for file path manipulation.
• Buffer: buffer for handling binary data from APIs.
• Stream: stream-browserify and stream-http.
  Sources: packages/chrome-extension/CONTRIBUTING.md:76-88, packages/chrome-extension/package.json:23-42

Summary

The development of extensions for Claude Context bridges the gap between the core indexing engine and user-facing platforms. While the VSCode extension focuses on IDE integration through the extension host and Webviews, the Chrome extension focuses on enhancing the GitHub web interface using content scripts and background workers. Both rely on robust bundling strategies to handle cross-platform compatibility and efficient communication with vector databases.