vscode-webview-expert

SKILL.md

This skill enables expert-level implementation of VS Code WebView features. It provides comprehensive knowledge of WebView security requirements, communication patterns, state management, and performance optimization techniques specific to VS Code extensions.

| default-src | Fallback for other directives | 'none' | | script-src | JavaScript sources | 'nonce-${nonce}' | | style-src | Stylesheet sources | ${webview.cspSource} 'unsafe-inline' | | img-src | Image sources | ${webview.cspSource} https: data: | | font-src | Font sources | ${webview.cspSource} |

| connect-src | XHR/Fetch destinations | https: or specific origins | | frame-src | iframe sources | 'none' (unless needed) |

このスキルは、VS Code WebView 機能を実装するための専門家レベルのガイダンスを提供します。 WebView パネルの作成、安全な CSP ポリシーの実装、拡張機能と WebView の通信の処理、WebView 状態の永続性の管理、WebView のパフォーマンスの最適化、または WebView レンダリングの問題のデバッグを行うときに使用します。セキュリティのベスト プラクティス、メッセージ プロトコル、VS Code 固有の WebView パターンについて説明します。 ソース: s-hiraoku/vscode-sidebar-terminal。

原文を見る