Dev & Engineering ✓ Microsoft · Official

VS Code Integrated Browser Architecture

A practical architecture guide for safely changing VS Code's cross-process integrated browser.

56/ 100
Use with care

Useful, but reliability, evidence or controls still have material gaps.

See how it was scored ↓
Works as-is in
Codex · Claude Code
Stars
★ 194k
Last updated
11d ago
License
MIT
vscodeintegrated-browserchromiumelectron
+4playwrightcdpipcbrowser-automation

What does this skill do, and when should you use it?

This skill explains VS Code's integrated browser, or browserView, which embeds a real Chromium page through Electron's WebContentsView and exposes it as an editor tab. It maps responsibilities across the main, shared, and renderer processes, including IPC proxies, Playwright automation, and CDP plumbing. It also covers native-view overlay layout, sessions, groups, privacy gates, remote pages, and security boundaries. It is intended for VS Code contributors changing browserView code, not for general browser use.

It guides work on browserView architecture by explaining how the main process creates, owns, and positions WebContentsView instances; how the renderer mirrors authoritative state through a model and ProxyChannel IPC; and how the shared process hosts Playwright and remote automation services. It describes pixel-snapped bounds, native-view hiding and screenshot masking, focus and keyboard forwarding, contribution lifecycles, session-level storage and permissions, group-level automation visibility, the CDP proxy, remote-workspace tunnel proxies, and agent content-sharing gates.

Good fit
  • A VS Code contributor is changing navigation, loading state, or editor-tab behavior under src/vs/platform/browserView or src/vs/workbench/contrib/browserView.
  • An engineer is adding browser-tab behavior and needs to use local editor contributions and scoped lifecycles instead of expanding the editor or main view.
  • A developer is debugging a browser view that is misaligned, hidden behind or exposed through workbench UI, flickers during repositioning, or fails to focus.
  • An engineer maintaining agent browser tools needs to separate main-process page operations, shared-process Playwright automation, and renderer-side proxies.
  • A security reviewer is evaluating browser sessions, file access, certificate trust, permissions, page sharing, and prompt-injection boundaries.
  • A remote-workspace developer needs to understand forwarded localhost URLs, session-level tunnel proxies, and navigation that waits for the proxy.

How do you install this skill?

Before you use it
  • This is a source-only static review; VS Code, browser automation, and tests were not executed, so the architecture description is not proof of runtime behavior.
  • The feature handles real Chromium pages, session storage, permissions, login state, and automation; new capabilities should add explicit user confirmation, sensitive-data boundaries, failure recovery, and rollback procedures.
  • The skill targets desktop Electron and is not applicable to Web; remote pages, proxies, Playwright, dependency installation, and network reachability may vary by environment.
  • Page content is explicitly treated as untrusted model input; any agent-tool extension must recheck sharing gates, availability gates, and network filtering.
Before you start
Your agent needs
  • Network access
Install first
  • Electron
  • Chromium
  • Playwright

The supplied sources do not document a standalone installation command. The skill file is located at .github/skills/integrated-browser/SKILL.md in the VS Code repository; connect the directory containing that file to an Agent Skills-compatible client. The README documents the broader VS Code repository, not installation of this individual skill.

Generic route: install into Claude Code manually (macOS / Linux)
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/microsoft/vscode.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/.github/skills/integrated-browser" ~/.claude/skills/
rm -rf "$tmp"

Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.

How do you use this skill?

Try saying

Once installed, send your agent any of these to trigger it:

  • Using .github/skills/integrated-browser/SKILL.md, determine which process should own this new browser state and design the renderer-to-main IPC mirror.
  • Apply the integrated-browser contribution and prioritized layout-override model to diagnose this native browser-view alignment bug.

Use it in a VS Code repository context with a request such as: "Using .github/skills/integrated-browser/SKILL.md, determine which process should own this new browser state and design the renderer-to-main IPC mirror." For layout work, ask: "Apply the integrated-browser contribution and prioritized layout-override model to diagnose this native browser-view alignment bug." The live features/ and tools/ folders remain the source of truth for current features, tools, commands, and settings.

What are this skill's strengths and limitations?

Pros
  • Provides a clear division of responsibility across the main, shared, and renderer processes.
  • Addresses difficult WebContentsView issues including layout, occlusion, screenshots, focus, and keyboard handling.
  • Separates session storage identity, group automation visibility, and CDP protocol behavior.
  • Highlights hostile-page, preload, permissions, sharing, network-filter, and prompt-injection boundaries.
Limitations
  • It is an architectural mental model, not a complete reference for current features, tools, commands, or settings.
  • The supplied material contains no standalone installation command, test suite, or runnable example.
  • The documented architecture is desktop-only; browser stubs are expected to report that it is unavailable on the web.
  • Its Electron, Chromium, Playwright, and multi-process IPC context makes it specialized for VS Code internals rather than general browser automation.

How does this skill compare with similar options?

Side by side with related skills; every score comes from the same FSRS standard.

Skill FS score Stars Last updated License
VS Code Integrated Browser Architecture this page ✓ Microsoft · Official 56 · Use with care ★ 194k 11d ago MIT
Code OSS Launch & Debug ✓ Microsoft · Official 54 · Use with care ★ 194k 11d ago MIT
Playwright Interactive Debugger ✓ OpenAI · Official 39 · Not recommended ★ 28k 4mo ago —
Playwright Browser Automation Skill 68 · Recommended ★ 3.2k 2mo ago MIT
OpenCLI AutoFix — Automatic Adapter Repair 58 · Recommended ★ 30k 12d ago Apache-2.0

Compared with the older extensions/simple-browser, this skill covers the desktop integrated browser built on real Chromium and Electron WebContentsView rather than an iframe in a webview. The source states that simple-browser now delegates to this implementation on desktop.

How did FollowSkills review this skill?

FollowSkills review · FSRS-2.0
Use with care
56/ 100 5-point scale 2.8 / 5
The upstream repository has new commits since this review. The score still applies to the reviewed revision shown and may not cover the latest changes.
1Trust18 / 25 · 3.6/5

The document explicitly describes main-process ownership, IPC boundaries, session permissions, file-access and network filtering, preload isolation, and prompt-injection risk, providing strong data-flow and isolation guidance. It does not specify concrete user confirmation, rollback, sensitive-data handling procedures, or recovery behavior, so points are deducted.

2Reliability8 / 20 · 2.0/5

The process split, one-way state synchronization, contribution lifetimes, and layout ordering are internally consistent and actionable. However, the skill provides no installation guidance, abnormal-input handling, diagnostic error messages, or targeted key-path tests; Playwright availability is also assumed rather than explained, and the static ceiling limits the score.

3Adaptability10 / 15 · 3.3/5

The audience and scenarios are reasonably clear, covering browserView architecture, editor tabs, proxies, sessions, automation, and remote pages, while explicitly marking the Web environment as unsupported. It lacks precise trigger and non-trigger conditions, input/output definitions, Chinese-language support, and mainland-China network reachability analysis, so points are deducted.

4Convention9 / 15 · 3.0/5

The document uses progressive disclosure through conceptual models, a process table, data-flow diagrams, and practical guidance; it identifies live feature/tool folders as the changing source of truth and states the desktop limitation. It lacks skill-specific installation/dependency notes, versioning, changelog, named maintenance responsibility, update path, and substantial troubleshooting examples.

5Effectiveness7 / 15 · 2.3/5

For developers modifying or understanding browserView, the explanations of main/shared/renderer responsibilities, overlay behavior, sessions, groups, and CDP can directly guide code navigation and design. There are no verified output examples, completion criteria, or comparative-benefit evidence, and the static ceiling limits this to moderate effectiveness.

6Verifiability4 / 10 · 2.0/5

The skill names concrete repository paths, process boundaries, IPC registration points, and inspectable implementation patterns, giving it some auditable primary evidence. It supplies no targeted test evidence, CI coverage for the skill's key paths, or independent corroboration, so the score remains limited.

1 2 3 4 5 6

Open a dimension to read why it scored that way

Reviewed Jul 20, 2026 Reviewed revision 5b3e1be7be9e Review evidence[1][2][3][4][5][6][7][8][9][10][11]

Evidence confidence:Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.

See the full review method →

FAQ

Does this skill directly open pages or run browser automation?
The supplied file is architectural guidance and provides no standalone command or independent tool entry point. It explains how the integrated browser uses Chromium, Playwright, CDP, and agent browser tools, but it does not enumerate the current tools.
Does this architecture run in VS Code for the web?
No. The source explicitly describes it as desktop-only and directs implementations to electron-* or node, with browser stubs that throw "not available in web".
Can an agent automatically read the page the user is viewing?
No, not by default. Page content is controlled by a sharing state, while tool registration is controlled separately by availability gates such as chat enablement, agent mode, and settings. When the full set is unavailable, only a reduced URL-opening capability remains.
What security concerns matter when changing browserView?
Check the session-level controls for file:// access, certificate trust, and permissions; keep the preload script minimal; treat page content as untrusted model input; and preserve the sharing, network-filter, availability, and prompt-injection safeguards.

More skills from this repository

All from microsoft/vscode

Dev & Engineering ✓ Microsoft · Official

Code OSS Launch & Debug

Launch a built-from-source VS Code with isolated profiles, Playwright control, and multi-process debugging ports.

★ 194k FS 54 Use with care 11d ago
Dev & Engineering ✓ Microsoft · Official

VS Code Chat Performance Lab

Benchmark chat rendering and detect memory growth across VS Code builds.

★ 194k FS 53 Use with care 11d ago
Dev & Engineering ✓ Microsoft · Official

VS Code Chat Customizations Editor Skill

Guides developers through safe changes and testing for VS Code’s chat customization management UI.

★ 194k FS 52 Use with care 11d ago
Dev & Engineering ✓ Microsoft · Official

VS Code Integration Test Runner

Run and filter VS Code repository integration tests with the correct platform scripts.

★ 194k FS 52 Use with care 11d ago
Dev & Engineering ✓ Microsoft · Official

VS Code Performance Investigation Workflow

Automate repeatable VS Code scenarios and collect performance and memory evidence.

★ 194k FS 47 Use with care 11d ago
Dev & Engineering ✓ Microsoft · Official

Local VS Code Web Workbench

Validate VS Code workbench and Agents window changes in a local vscode.dev instance.

★ 194k FS 53 Use with care 11d ago
Dev & Engineering ✓ Microsoft · Official

VS Code Insiders UI Automation

Automate VS Code Insiders and Copilot Chat through Playwright and CDP.

★ 194k FS 46 Use with care 11d ago
Dev & Engineering ✓ Microsoft · Official

VS Code Crash Dump Symbolicator

Turn native VS Code crash dumps into readable backtraces with method names.

★ 194k FS 53 Use with care 11d ago
Dev & Engineering ✓ Microsoft · Official

VS Code Configuration Policy Maintainer

Standardize VS Code policy registration, export, and validation.

★ 194k FS 59 Recommended 11d ago
Design & Frontend ✓ Microsoft · Official

VS Code Design Philosophy

Turn vague UI discomfort into concrete fixes using shared values, principles, and design moves.

★ 194k FS 58 Recommended 11d ago
Dev & Engineering ✓ Microsoft · Official

VS Code Agent Customization Assistant

Create, repair, and troubleshoot VS Code Agent customization files and their loading behavior.

★ 194k FS 55 Use with care 11d ago
Dev & Engineering ✓ Microsoft · Official

VS Code Unit Test Runner

Run VS Code repository unit tests by file, test name, or compiled-output glob.

★ 194k FS 55 Use with care 11d ago
Dev & Engineering ✓ Microsoft · Official

VS Code Smoke Test Assistant

Run, filter, and debug VS Code end-to-end smoke tests.

★ 194k FS 53 Use with care 11d ago
Dev & Engineering ✓ Microsoft · Official

VS Code Telemetry Error Fix Guide

Trace unhandled telemetry errors to invalid-data producers instead of masking the crash site.

★ 194k FS 52 Use with care 11d ago
Dev & Engineering ✓ Microsoft · Official

Code OSS Development Log Viewer

Locate and inspect the latest Code OSS development logs.

★ 194k FS 51 Use with care 11d ago
Dev & Engineering ✓ Microsoft · Official

Copilot Session Troubleshooter

Explain unexpected Copilot CLI behavior from session-log evidence.

★ 194k FS 51 Use with care 11d ago
Dev & Engineering ✓ Microsoft · Official

Copilot Chat Troubleshooter

Explain unexpected agent behavior, latency, and tool failures from Copilot Chat debug logs.

★ 194k FS 49 Use with care 11d ago
Dev & Engineering ✓ Microsoft · Official

Run Command Builder

Configure and update commands shown in a VS Code Agent Session's Run button.

★ 194k FS 48 Use with care 11d ago
Dev & Engineering ✓ Microsoft · Official

Reusable Prompt Creator

Turn recurring tasks into reusable .prompt.md files.

★ 194k FS 45 Not recommended 11d ago
Dev & Engineering ✓ Microsoft · Official

VS Code Smoke Test Failure Diagnosis

Diagnose and validate intermittent VS Code Electron smoke-test failures in Azure DevOps.

★ 194k FS 45 Not recommended 11d ago

Related skills