mirror of
https://github.com/microsoft/vscode-extension-samples.git
synced 2026-04-27 16:55:44 +08:00
47 lines
1.6 KiB
Markdown
47 lines
1.6 KiB
Markdown
# Cat Coding — A Webview API Sample
|
|
|
|
Demonstrates VS Code's [webview API](https://code.visualstudio.com/api/extension-guides/webview). This includes:
|
|
|
|
- Creating and showing a basic webview.
|
|
- Dynamically updating a webview's content.
|
|
- Loading local content in a webview.
|
|
- Running scripts in a webview.
|
|
- Sending message from an extension to a webview.
|
|
- Sending messages from a webview to an extension.
|
|
- Using a basic content security policy.
|
|
- Webview lifecycle and handling dispose.
|
|
- Saving and restoring state when the panel goes into the background.
|
|
- Serialization and persistence across VS Code reboots.
|
|
|
|
## Demo
|
|
|
|
|
|
|
|
## VS Code API
|
|
|
|
### `vscode` module
|
|
|
|
- [`window.createWebviewPanel`](https://code.visualstudio.com/api/references/vscode-api#window.createWebviewPanel)
|
|
- [`window.registerWebviewPanelSerializer`](https://code.visualstudio.com/api/references/vscode-api#window.registerWebviewPanelSerializer)
|
|
|
|
## Running the example
|
|
|
|
- Open this example in VS Code 1.47+
|
|
- `npm install`
|
|
- `npm run watch` or `npm run compile`
|
|
- `F5` to start debugging
|
|
|
|
Run the `Cat Coding: Start cat coding session` to create the webview.
|
|
|
|
## Commands
|
|
|
|
This extension provides the following commands:
|
|
|
|
- `Cat Coding: Start cat coding session`: Creates and displays the Cat Coding webview.
|
|
- `Cat Coding: Do refactor`: Halves the count of lines of code displayed in the Cat Coding webview.
|
|
|
|
## Messages
|
|
|
|
The Cat Coding webview can send the following messages to the extension:
|
|
|
|
- `alert`: Sent when the cat introduces a bug. The message includes the text '🐛 on line ' followed by the current line count. |