Packaging & Deploying Extensions
Relevant source files
The following files were used as context for generating this wiki page:
Packaging and deploying extensions within the Claude Context project involves distinct workflows for Visual Studio Code and Chrome. The process ensures that TypeScript source code, WebAssembly (WASM) parsers, and specialized assets (like icons and styles) are correctly bundled into production-ready formats—VSIX files for VSCode and unpacked/zipped bundles for Chrome.
Sources: packages/vscode-extension/CONTRIBUTING.md, packages/chrome-extension/CONTRIBUTING.md
VSCode Extension Deployment
The VSCode extension deployment workflow transforms the source into a .vsix package. This process relies on webpack for bundling, vsce for packaging, and specialized scripts to manage non-JavaScript assets.
Build and Packaging Pipeline
The pipeline follows a sequence of cleaning existing artifacts, compiling TypeScript, bundling dependencies with Webpack, and copying binary assets like WASM files and CSS.
The diagram shows the sequence of commands executed during the VSCode packaging process.
Sources: packages/vscode-extension/package.json:138-146, packages/vscode-extension/copy-assets.js
Asset Management and Stubs
Due to the VSCode environment, certain native dependencies (like standard tree-sitter) are replaced with browser-compatible stubs or WASM versions. The copy-assets.js script ensures these are placed in the dist directory.
| Component | Destination | Description |
|---|---|---|
tree-sitter.wasm | dist/tree-sitter.wasm | Core WASM runtime for code parsing |
| Language Parsers | dist/wasm/*.wasm | Language-specific AST parsers |
| Webview Scripts | dist/webview/scripts/*.js | Frontend logic for the search sidebar |
| Webview Styles | dist/webview/styles/*.css | UI styling for the extension |
Sources: packages/vscode-extension/copy-assets.js:1-60, packages/vscode-extension/webpack.config.js:84-118
Local Verification
Before production release, developers are encouraged to test the actual packaged version rather than just the development host.
# Package the extension
pnpm run package
# Uninstall existing and install the new VSIX
code --uninstall-extension semanticcodesearch-xxx.vsix
code --install-extension semanticcodesearch-xxx.vsix
Sources: packages/vscode-extension/CONTRIBUTING.md:65-76
Chrome Extension Deployment
Chrome extension deployment focuses on Manifest V3 compliance and polyfilling Node.js modules to run in a browser service worker environment.
Packaging Flow
The diagram illustrates the path from source code to a loadable Chrome extension directory.
Sources: packages/chrome-extension/CONTRIBUTING.md:27-36, packages/chrome-extension/package.json:8-15
Polyfills and Browser Stubs
The Chrome extension requires significant polyfilling for Node.js modules (like crypto, buffer, and path) to ensure the core indexing logic functions in a browser context.
- Crypto: Handled via
crypto-browserify. - Buffer: Handled via
buffer. - Path: Handled via
path-browserify. - VM: Handled via
vm-browserify.
Sources: packages/chrome-extension/CONTRIBUTING.md:76-85, packages/chrome-extension/package.json:23-45
Deployment Commands Summary
The project uses a root package.json to orchestrate builds across the monorepo, while individual packages handle specific deployment tasks.
| Environment | Action | Command |
|---|---|---|
| VSCode | Compile & Copy | pnpm build:vscode |
| VSCode | Create VSIX | pnpm package |
| VSCode | Publish | pnpm release (Maintainers only) |
| Chrome | Build | pnpm build:chrome |
| Chrome | Dev/Watch | pnpm dev:chrome |
Sources: package.json:11-25, packages/vscode-extension/package.json:138-147, packages/chrome-extension/package.json:8-12
Conclusion
The packaging and deployment of extensions in Claude Context are highly automated through pnpm scripts. VSCode deployment emphasizes VSIX generation and WASM asset inclusion, while Chrome deployment focuses on browser compatibility through Webpack-driven polyfilling. Both workflows prioritize a "Clean and Build" approach to ensure artifact integrity.