VS Code Extension Development

VS Code Extension Development Skill

Project Architecture

mtips5s_mcp_codex/
├── src/                          ← Extension backend (TypeScript)
│   ├── extension.ts              ← Entry point, activate/deactivate
│   ├── services/
│   │   ├── AutoRetryService.ts   ← Core auto-retry logic, orchestrator
│   │   ├── CDPHandler.ts         ← CDP WebSocket connections, DOM manipulation
│   │   └── Relauncher.ts         ← Reconnection & restart logic
│   └── ui/
│       └── SidePanelProvider.ts  ← Webview provider, message bridge
├── webview/                      ← Frontend (React + Vite + shadcn/ui)
│   ├── src/
│   │   ├── App.tsx               ← Main webview component
│   │   ├── components/ui/        ← shadcn/ui components
│   │   └── index.css             ← Styles
│   └── vite.config.ts
├── dist/                         ← Build output (DO NOT EDIT)
├── scripts/cdp-tools/            ← CDP debug scripts
├── docs/                         ← Documentation
└── package.json                  ← Extension manifest

Key Concepts

1. Extension ↔ Webview Communication

Webview (React)  ←→  SidePanelProvider  ←→  AutoRetryService  ←→  CDPHandler
     postMessage()      onDidReceiveMessage()                         WebSocket

• Webview → Extension: vscode.postMessage({ type, data })
• Extension → Webview: this._view.webview.postMessage({ type, data })
• Message types defined in SidePanelProvider.ts switch cases

2. CDP Connection Flow

1. Scan ports 31902-31908 → find active port (31905)
2. GET /json/list → list page targets
3. Connect WebSocket to each target
4. Inject JS via Runtime.evaluate
5. Monitor DOM for retry buttons → auto-click

3. Configuration (package.json contributes.configuration)

Build Commands

# Build everything (extension + webview)
npm run build

# Build extension only (fast, ~1s)
npm run build:extension

# Build webview only
npm run build:webview

# Watch mode (extension)
npm run dev

# Watch mode (webview)
npm run dev:webview

# Package .vsix
npm run package

# Publish to marketplace
npm run publish

Dev Workflow

1. Sửa code trong src/ hoặc webview/src/
2. npm run build
3. Reload Window trong Antigravity (Cmd+Shift+P → Reload)
4. Test từ sidebar panel

Thêm command mới

1. Thêm entry trong package.json → contributes.commands
2. Register handler trong extension.ts → vscode.commands.registerCommand
3. Build & reload

Thêm setting mới

1. Thêm property trong package.json → contributes.configuration.properties
2. Đọc trong service: vscode.workspace.getConfiguration('smartAutoRetry').get('key')

Thêm message type mới (Webview ↔ Extension)

1. Webview React: vscode.postMessage({ type: 'newAction', data: {...} })
2. SidePanelProvider: thêm case trong switch (message.type)
3. Xử lý logic và gửi response: postMessage({ type: 'newActionResult', data: {...} })