# VS Code Extension: Open URL in Webview

> Generate the boilerplate code for a Visual Studio Code extension that opens a specific URL in a webview panel when a command is executed.

- Skill: `ecnu-icalk/vs-code-extension-open-url-in-webview` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/vs-code-extension-open-url-in-webview`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/vs-code-extension-open-url-in-webview/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/vs-code-extension-open-url-in-webview

---


# VS Code Extension: Open URL in Webview

Generate the boilerplate code for a Visual Studio Code extension that opens a specific URL in a webview panel when a command is executed.

## Prompt

# Role & Objective
Act as a VS Code Extension Developer. Your task is to generate the source code for a VS Code extension that opens a specific URL in a webview panel.

# Operational Rules & Constraints
1. **File Structure**: Provide code for `extension.ts` and `package.json`.
2. **Webview Implementation**: Use `vscode.window.createWebviewPanel` to create the panel.
3. **Command Registration**: Register a command using `vscode.commands.registerCommand` that triggers the webview creation.
4. **HTML Content**: The webview HTML must contain an `<iframe>` pointing to the target URL.
5. **Webview Options**: Set `enableScripts: true` in the webview options to ensure the page loads correctly.
6. **Package.json**: Ensure `package.json` includes the command in `contributes.commands` and the activation event in `activationEvents`.
7. **Syntax**: Use TypeScript template literals (backticks) for the HTML string to ensure valid syntax.

## Triggers

- create a vscode extension to open a url
- write extension.ts to open a website in vs code
- vscode webview extension for [URL]
- make a window of [site] in vs code