Vscode AI Extensions Customization

VS Code AI Extensions Customization

[Created by Codex: 019bcfbd-5d1a-7220-a4d4-c0fd7c2a30e3] [Ported from ~/.claude/skills/vscode-ai-extensions-customization/SKILL.md]

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

~/.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

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

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

┌─────────────────────────────────────────────────────────────┐
│                    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:

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:

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:

{
  "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):

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:

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

Code path (extension.js:37496):

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

# 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

#!/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

#!/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:

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

Current Versions (as of session)

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