integrated-browser

Explains the architecture and mental model of the VS Code integrated browser (browserView).

Updated Aug 20, 2026
One-click install
npx skills add https://github.com/basedgod55hjl/vsbrax --skill integrated-browser-basedgod55hjl
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: integrated-browser
Source: https://github.com/basedgod55hjl/vsbrax/tree/main/.github/skills/integrated-browser
Command: npx skills add https://github.com/basedgod55hjl/vsbrax --skill integrated-browser-basedgod55hjl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Working on the VS Code integrated browser ("browserView") requires understanding a heavyweight, multi-process, security-sensitive subsystem; this Skill provides the architectural mental model so changes follow existing patterns instead of breaking them. ## Core Features & Use Cases - Architecture Overview: Explains the three-process split (main, shared, renderer), the native WebContentsView ownership model, and the IPC channel layering rules. - Overlay & Layout Guidance: Covers the pixel-snapped bounds, z-order hiding, screenshot masking, and focus bridging needed because the native view paints above the workbench DOM. - Security & Agent Gating: Details sessions, groups, CDP proxying, preload trust boundaries, and the privacy gates controlling agent access to page content. - Use Case: When adding a new browser feature or agent tool, use this Skill to learn whether the change belongs in a renderer contribution, a main-process state mirror, or a session-level security gate before writing code. ## Quick Start Explain how the integrated browser handles native view alignment and where I should add a new browser feature contribution.

Frequently Asked Questions about integrated-browser

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How does the VS Code integrated browser render web pages?

The integrated browser embeds a real Chromium page via an Electron WebContentsView owned by the main process. It paints on top of the workbench DOM in screen coordinates, so the renderer holds only a proxy model and coordinates bounds, visibility, and focus over IPC.

How do I add a new feature to the VS Code browserView editor?

Add behavior as a new contribution in the editor's local contribution model, modeled on an existing sibling contribution. Contributions get dependency injection, a fixed lifecycle, and per-page scoped disposables; avoid growing the editor pane or the main-process view directly.

Why does the native browser view show through menus or misalign in VS Code?

The native WebContentsView paints above all workbench UI, so overlapping menus require the workbench to hide the view and show a placeholder. Misalignment happens when bounds are not pixel-snapped, since CSS zoom and screen pixels disagree.

Can AI agents access page content in the integrated browser?

Agents drive the same page via Playwright over CDP, but content is private until the page's sharing state allows it. A separate availability gate controls tool registration, URLs are screened by a network filter, and page content is treated as untrusted model input.

Does the VS Code integrated browser work on the web version?

No, the integrated browser is desktop-only because it depends on Electron's native WebContentsView. New code goes into electron-* or node layers, while browser/ stubs throw a not-available-in-web error.