skills.rest
Tyrizx
TyrizxOFFICIAL
Explore all skills by this author →
GitHub

integrated-browser

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

Updated Aug 30, 2026
Search Tags:#vscode#architecture#playwright#electron#cdp#integrated browser#webcontentsview
One-click install
npx skills add https://github.com/Tyrizx/Tyrizx --skill integrated-browser-tyrizx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: integrated-browser
Source: https://github.com/Tyrizx/Tyrizx/tree/main/.github/skills/integrated-browser
Command: npx skills add https://github.com/Tyrizx/Tyrizx --skill integrated-browser-tyrizx

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 where a native Chromium WebContentsView floats above the workbench DOM. This Skill gives you the load-bearing architectural concepts so you can navigate and modify the code without breaking alignment, focus, sessions, or agent tooling. ## Core Features & Use Cases - Architecture Mental Model: Explains the three-process split (main, shared, renderer), the read-replica renderer model, and the IPC channel rules under src/vs/platform/browserView and src/vs/workbench/contrib/browserView. - Overlay and Layout Guidance: Covers the native-view-over-DOM problem, including bounds pixel-snapping, z-order hiding, screenshot placeholders, and preload-based keyboard routing. - Identity, Security, and Agent Gating: Clarifies sessions (storage identity), groups (automation visibility), the proxied CDP layer, and the privacy gates controlling agent access to page content. - Use Case: You need to add a new browser capability, such as a navigation command or an agent tool. Use this Skill to learn that new state belongs in the main-process BrowserView with mirrored events, and new behavior belongs in a scoped editor contribution rather than the editor or main view. ## Quick Start Ask the AI to explain how to add a new feature or fix a bug in the VS Code integrated browser using the integrated-browser architecture guidance.

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 is painted by the OS compositor on top of the workbench DOM, so the renderer only holds a lightweight proxy model and coordinates bounds, visibility, and focus over IPC.

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

Add a new editor contribution modeled on an existing sibling rather than growing the editor pane or main view. Contributions attach to the editor with a model-scoped lifetime, and layout-affecting behavior composes through prioritized layout overrides instead of hard-coded pixels.

What is the difference between sessions and groups in browserView?▼

A session is storage identity: each Electron session maps to a BrowserSession holding cookies, cache, and permissions, and its id doubles as the CDP browser-context id. A group is automation visibility: it assembles views into one logical CDP browser without owning them.

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

The native WebContentsView paints above all workbench UI in screen coordinates, so CSS z-index cannot fix overlap. The workbench detects overlapping floating UI and hides the native view with a screenshot placeholder, and bounds must be pixel-snapped because CSS zoom and screen pixels disagree.

Can AI agents access page content in the VS Code integrated browser?▼

Agents drive the same WebContentsView the user sees 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 in the web version?▼

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

Related Skills

Explore More Software Engineering Skills→
NVIDIANVIDIA
2.8k

cuopt-installation-developer

Set up a cuOpt development environment for source builds and tests.

Official
Advanced
az0512124155azz-sysaz0512124155azz-sys

integrated-browser

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

Community
Advanced
cegit27cegit27
3

browse

Automate web application testing via a persistent headless Chromium browser.

Official
Advanced
bidahbidah
28

use-dom

Embed browser DOM components in React Native via isolated webviews.

Community
Intermediate