webviewdemo

English | 日本語

---

English

A sample VS Code extension demonstrating Webview integration.

Features

• Open Webview: Creates and displays a Webview panel with custom HTML, CSS, and JavaScript.
• Bi-directional Communication:
  • Sends messages from the extension to the Webview.
  • Receives messages from the Webview and displays them as VS Code notifications.
• Resource Loading: Demonstrates how to load local CSS and JS files into a Webview using asWebviewUri.

Commands

• Hello World: Opens the Webview panel.
• Send Message to Webview: Sends a message from the extension to the active Webview.

How to use

1. Press F5 to start debugging and open a new Extension Development Host window.
2. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
3. Run Hello World to open the Webview.
4. Run Send Message to Webview to see the text update in the Webview.
5. Interact with buttons in the Webview to see notifications in VS Code.

---

日本語

Webview の統合方法を実演するサンプルの VS Code 拡張機能です。

特徴

• Webview の表示: カスタムの HTML、CSS、および JavaScript を使用した Webview パネルを作成・表示します。
• 双方向通信:
  • 拡張機能から Webview へメッセージを送信します。
  • Webview からメッセージを受信し、VS Code の通知として表示します。
• リソースの読み込み: asWebviewUri を使用して、ローカルの CSS および JS ファイルを Webview に読み込む方法を示します。

コマンド

• Hello World: Webview パネルを開きます。
• Send Message to Webview: 拡張機能からアクティブな Webview へメッセージを送信します。

使い方

1. F5 キーを押してデバッグを開始し、新しい「拡張機能開発ホスト」ウィンドウを開きます。
2. コマンドパレットを開きます（Ctrl+Shift+P / Cmd+Shift+P）。
3. Hello World を実行して Webview を開きます。
4. Send Message to Webview を実行して、Webview 内のテキストが更新されることを確認します。
5. Webview 内のボタンを操作して、VS Code 側で通知が表示されることを確認します。