VS Code AI Extensions Customization

What This Solves

VS Code bundles AI extensions (Claude Code, Codex) with their own binaries. This skill documents how to replace those binaries with custom versions (for observability hooks, custom builds) and how to enable multiple Codex instances in editor tabs instead of the singleton sidebar.

Extension File Structure

Naming Convention

code

~/.vscode/extensions/{publisher}.{extension}-{version}-{platform}-{arch}/

Examples:

•anthropic.claude-code-2.1.11-darwin-arm64
•openai.chatgpt-0.4.60-darwin-arm64

Predicting new versions: Increment version number, keep platform/arch suffix.

Claude Code Extension

code

anthropic.claude-code-{VERSION}-darwin-arm64/
├── extension.js                    # JS wrapper (minified)
├── extension.js.backup             # Your backup (if created)
├── webview/index.js
└── resources/native-binary/
    ├── claude                      # Executable (or symlink)
    └── claude.binary               # Original backup (170MB Mach-O)

OpenAI Codex Extension

code

openai.chatgpt-{VERSION}-darwin-arm64/
├── out/
│   ├── extension.js                # JS wrapper (909KB minified)
│   └── extension.js.original       # Your backup
├── bin/macos-aarch64/
│   ├── codex                       # Executable (or symlink)
│   ├── codex.original              # Original backup (43MB Mach-O)
│   └── rg                          # Bundled ripgrep
└── package.json                    # Commands, views, settings

Architecture

code

┌─────────────────────────────────────────────────────────────┐
│                    VS Code Extension Host                   │
├─────────────────────────────────────────────────────────────┤
│  extension.js                                               │
│  ├── Activates on VS Code startup                           │
│  ├── Registers views (sidebar) and commands                 │
│  ├── Spawns binary via child_process.spawn()                │
│  └── Communicates via stdin/stdout/SSE                      │
└─────────────────────────────────────────────────────────────┘
                              │
                              │ spawn()
                              ▼
┌─────────────────────────────────────────────────────────────┐
│  Native Binary (claude / codex)                             │
│  ├── Handles API calls to Claude/OpenAI                     │
│  ├── Executes tools (file ops, bash, etc.)                  │
│  └── Streams SSE events back to extension                   │
└─────────────────────────────────────────────────────────────┘

Customization Operations

Operation 1: Replace Binary with Symlink

Claude Code:

bash

cd ~/.vscode/extensions/anthropic.claude-code-*-darwin-arm64/resources/native-binary

# Backup original
mv claude claude.binary

# Symlink to custom version
ln -s /path/to/your/custom/claude claude

Codex:

bash

cd ~/.vscode/extensions/openai.chatgpt-*-darwin-arm64/bin/macos-aarch64

# Backup original
mv codex codex.original

# Symlink to custom version
ln -s /path/to/your/custom/codex codex

Operation 2: Configure Executable via Settings (Codex only)

Codex checks chatgpt.cliExecutable setting before using bundled binary.

Add to VS Code settings.json:

json

{
  "chatgpt.cliExecutable": "/Users/sotola/swe/codex.0.77.0/codex-rs/target/release/codex"
}

Location: ~/Library/Application Support/Code/User/settings.json

Code path (extension.js:31486):

javascript

function Si(t, e) {
  let r = tr(bt.CLI_EXECUTABLE);
  if (r && r.trim().length > 0) return r;  // Use setting if set
  // Otherwise use bundled binary
  return xi.Uri.joinPath(t, `${o}/${n}`).fsPath;
}

Operation 3: Enable Multiple Codex Instances

Problem: Codex sidebar is singleton. Only one instance allowed.

Solution: Use hidden chatgpt.newCodexPanel command which opens Codex in editor tab.

How to access:

•Cmd+Shift+P → "Codex: New Panel"
•Or bind keyboard shortcut to chatgpt.newCodexPanel

Code path (extension.js:37496):

javascript

async createNewPanel() {
  // Creates new conversation
  // Opens via vscode.openWith using customEditorViewType
  await me.commands.executeCommand("vscode.openWith", n, t.customEditorViewType, {...});
}

Note: Editor tabs use same executable config as sidebar.

Operation 4: Beautify extension.js for Editing

bash

# Backup first
cp ~/.vscode/extensions/openai.chatgpt-*-darwin-arm64/out/extension.js \
   ~/.vscode/extensions/openai.chatgpt-*-darwin-arm64/out/extension.js.original

# Beautify (909KB → 1.3MB)
npx prettier --write ~/.vscode/extensions/openai.chatgpt-*-darwin-arm64/out/extension.js

Version Update Detection & Re-patching

Check for Updates Script

bash

#!/bin/bash
# check-vscode-ai-extensions.sh

CLAUDE_EXPECTED="anthropic.claude-code-2.1.11-darwin-arm64"
CODEX_EXPECTED="openai.chatgpt-0.4.60-darwin-arm64"
EXT_DIR="$HOME/.vscode/extensions"

echo "=== VS Code AI Extension Version Check ==="

# Claude
CLAUDE_CURRENT=$(ls -d "$EXT_DIR"/anthropic.claude-code-*-darwin-arm64 2>/dev/null | tail -1 | xargs basename)
if [ "$CLAUDE_CURRENT" != "$CLAUDE_EXPECTED" ]; then
  echo "⚠️  Claude updated: $CLAUDE_EXPECTED → $CLAUDE_CURRENT"
  echo "   Needs re-patching!"
else
  echo "✓ Claude: $CLAUDE_CURRENT (up to date)"
fi

# Codex
CODEX_CURRENT=$(ls -d "$EXT_DIR"/openai.chatgpt-*-darwin-arm64 2>/dev/null | tail -1 | xargs basename)
if [ "$CODEX_CURRENT" != "$CODEX_EXPECTED" ]; then
  echo "⚠️  Codex updated: $CODEX_EXPECTED → $CODEX_CURRENT"
  echo "   Needs re-patching!"
else
  echo "✓ Codex: $CODEX_CURRENT (up to date)"
fi

# Check if symlinks are intact
echo ""
echo "=== Symlink Status ==="
ls -la "$EXT_DIR"/anthropic.claude-code-*-darwin-arm64/resources/native-binary/claude 2>/dev/null
ls -la "$EXT_DIR"/openai.chatgpt-*-darwin-arm64/bin/macos-aarch64/codex 2>/dev/null

Re-patch After Update Script

bash

#!/bin/bash
# patch-vscode-ai-extensions.sh

CUSTOM_CLAUDE="/Users/sotola/swe/claude-code-2.1.12/cli.js"
CUSTOM_CODEX="/Users/sotola/swe/codex.0.77.0/codex-rs/target/release/codex"
EXT_DIR="$HOME/.vscode/extensions"

# Find latest versions
CLAUDE_DIR=$(ls -d "$EXT_DIR"/anthropic.claude-code-*-darwin-arm64 2>/dev/null | tail -1)
CODEX_DIR=$(ls -d "$EXT_DIR"/openai.chatgpt-*-darwin-arm64 2>/dev/null | tail -1)

echo "Patching Claude: $CLAUDE_DIR"
cd "$CLAUDE_DIR/resources/native-binary"
[ -f claude ] && [ ! -L claude ] && mv claude claude.binary
[ ! -L claude ] && ln -s "$CUSTOM_CLAUDE" claude
ls -la claude

echo ""
echo "Patching Codex: $CODEX_DIR"
cd "$CODEX_DIR/bin/macos-aarch64"
[ -f codex ] && [ ! -L codex ] && mv codex codex.original
[ ! -L codex ] && ln -s "$CUSTOM_CODEX" codex
ls -la codex

echo ""
echo "Done. Reload VS Code window to apply."

Failed Attempts

⚠️ Read this first - These approaches don't work:

Attempt	Why It Failed	Notes
`code --add-setting` flag	Not a valid VS Code CLI option	Edit settings.json directly instead
Claude `cliExecutable` setting	Doesn't exist for Claude extension	Must use symlink approach
Multiple sidebar instances	VS Code sidebar is singleton by design	Use editor tabs via `newCodexPanel`

Environment & Dependencies

•OS: macOS (darwin-arm64)
•VS Code extensions path: ~/.vscode/extensions/
•Settings path: ~/Library/Application Support/Code/User/settings.json
•Binary type: Mach-O 64-bit ARM64

Key Files Reference

Purpose	Claude Code	OpenAI Codex
Extension wrapper	`extension.js`	`out/extension.js`
Native binary	`resources/native-binary/claude`	`bin/macos-aarch64/codex`
Original backup	`claude.binary`	`codex.original`
JS backup	`extension.js.backup`	`extension.js.original`
Settings key	N/A	`chatgpt.cliExecutable`

Current Versions (as of session)

Extension	Version	Custom Binary
Claude Code	2.1.11	`/Users/sotola/swe/claude-code-2.1.12/cli.js`
OpenAI Codex	0.4.60	`/Users/sotola/swe/codex.0.77.0/codex-rs/target/release/codex`

Session Reference

•Date: 2026-01-18
•Agent: Opus: 8603c876-f9fb-4b24-a8e5-955cfca2f430
•Original task: Find VS Code extension files, replace binaries with custom versions, enable multiple Codex instances