# vscode-webview-browser

**Repository Path**: wang-yufeng/vscode-webview-browser

## Basic Information

- **Project Name**: vscode-webview-browser
- **Description**: VSCode Webview Browser
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-19
- **Last Updated**: 2026-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VSCode Webview Browser

A minimal VSCode extension that opens web pages from a dedicated VSCode Activity Bar icon, similar to VSCode's integrated browser experience.

## Features

- Run `VSCode Webview Browser: Open URL` to open a web address inside VSCode.
- Click the `VSCode Webview Browser` Activity Bar icon to open the browser view without using the Command Palette.
- Pages open in the `VSCode Webview Browser` side view instead of an editor tab or the bottom panel.
- Use the embedded address bar to navigate to another URL.
- Click the `Dark` / `Light` button after refresh to switch the current workspace page display theme.
- Run `VSCode Webview Browser: Set Page Theme` to switch webpage content between `light` and `dark` for the current workspace.
- Dark mode uses a page-level visual filter, so it can affect cross-origin pages that the extension cannot modify directly.
- The default URL is defined by `DEFAULT_URL` in `src/utils/constants.ts`.

## Development

1. Open this folder in VSCode.
2. Run `npm install`.
3. Run `npm run compile`.
4. Press `F5` to launch an Extension Development Host.
5. In the new VSCode window, click the `VSCode Webview Browser` Activity Bar icon or run `VSCode Webview Browser: Open URL` from the Command Palette.

## Structure

- `src/extension.ts`: extension activation and module wiring.
- `src/commands/browserCommands.ts`: command registration and command UI.
- `src/views/browserView.ts`: browser view state, navigation, and webview messages.
- `src/templates/browserWebviewTemplate.ts`: loads and composes the browser webview template.
- `resources/browser-webview/`: browser webview HTML, CSS, and client-side script.
- `src/utils/themeState.ts`: current workspace page theme state.
- `src/utils/url.ts`: URL parsing and HTML escaping helpers.
- `src/utils/constants.ts`: command, view, and default value constants.
- `src/types/index.ts`: shared TypeScript types.

Some websites block being embedded in iframes with security headers such as `X-Frame-Options` or `Content-Security-Policy`. Those pages cannot be displayed inside a VSCode webview without using a different browser-integration strategy.

The dark theme is applied to the rendered webpage image. This is stable for embedded pages, but images and videos may also be color-adjusted.