Webview API

import * as vscode from 'vscode';

function createWebviewPanel(context: vscode.ExtensionContext) {
  // Create and show panel
  const panel = vscode.window.createWebviewPanel(
    'myWebview',              // Identifies the type of the webview
    'My Webview',             // Title displayed in the editor
    vscode.ViewColumn.One,    // Editor column to show in
    {
      enableScripts: true,    // Enable JavaScript in the webview
      retainContextWhenHidden: false
    }
  );

  // Set HTML content
  panel.webview.html = getWebviewContent();
}

function getWebviewContent(): string {
  return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Webview</title>
</head>
<body>
    <h1>Hello from Webview!</h1>
    <button onclick="sendMessage()">Click Me</button>
    
    <script>
        const vscode = acquireVsCodeApi();
        
        function sendMessage() {
            vscode.postMessage({
                command: 'alert',
                text: 'Button clicked!'
            });
        }
    </script>
</body>
</html>`;
}

function getWebviewContent(webview: vscode.Webview, extensionUri: vscode.Uri): string {
  // Local path to script and CSS
  const scriptUri = webview.asWebviewUri(
    vscode.Uri.joinPath(extensionUri, 'media', 'main.js')
  );
  const styleUri = webview.asWebviewUri(
    vscode.Uri.joinPath(extensionUri, 'media', 'style.css')
  );
  const imageUri = webview.asWebviewUri(
    vscode.Uri.joinPath(extensionUri, 'media', 'logo.png')
  );

  return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="${styleUri}" rel="stylesheet">
</head>
<body>
    <img src="${imageUri}" alt="Logo">
    <script src="${scriptUri}"></script>
</body>
</html>`;
}

const panel = vscode.window.createWebviewPanel(
  'resourceExample',
  'Resource Example',
  vscode.ViewColumn.One,
  {
    enableScripts: true,
    localResourceRoots: [
      vscode.Uri.joinPath(context.extensionUri, 'media'),
      vscode.Uri.joinPath(context.extensionUri, 'dist')
    ]
  }
);

panel.webview.html = getWebviewContent(panel.webview, context.extensionUri);

// In extension code
panel.webview.postMessage({
  command: 'update',
  data: { count: 42 }
});

// In webview HTML
const vscode = acquireVsCodeApi();

window.addEventListener('message', event => {
  const message = event.data;
  
  switch (message.command) {
    case 'update':
      document.getElementById('count').textContent = message.data.count;
      break;
  }
});

// In webview HTML
const vscode = acquireVsCodeApi();

document.getElementById('button').addEventListener('click', () => {
  vscode.postMessage({
    command: 'save',
    data: { value: 'test' }
  });
});

// In extension code
panel.webview.onDidReceiveMessage(
  message => {
    switch (message.command) {
      case 'save':
        vscode.window.showInformationMessage(`Saving: ${message.data.value}`);
        return;
    }
  },
  undefined,
  context.subscriptions
);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" 
          content="default-src 'none'; 
                   img-src ${webview.cspSource} https:; 
                   script-src ${webview.cspSource}; 
                   style-src ${webview.cspSource} 'unsafe-inline';">
    <title>Secure Webview</title>
</head>
<body>
    <!-- Content -->
</body>
</html>

// In webview HTML
const vscode = acquireVsCodeApi();

// Get previous state
const previousState = vscode.getState() || { count: 0 };

// Update UI with previous state
document.getElementById('count').textContent = previousState.count;

// Save state when it changes
function updateCount(newCount) {
  vscode.setState({ count: newCount });
  document.getElementById('count').textContent = newCount;
}

export function activate(context: vscode.ExtensionContext) {
  // Register a serializer for restoring webviews
  vscode.window.registerWebviewPanelSerializer('counter', {
    async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
      // Restore the webview state
      const count = state?.count || 0;
      webviewPanel.webview.html = getCounterHtml(count);
      
      // Reattach event handlers
      setupWebviewMessageHandling(webviewPanel, context);
    }
  });
}

export function activate(context: vscode.ExtensionContext) {
  const provider = new MyWebviewViewProvider(context.extensionUri);

  context.subscriptions.push(
    vscode.window.registerWebviewViewProvider('myExtension.view', provider)
  );
}

class MyWebviewViewProvider implements vscode.WebviewViewProvider {
  constructor(private readonly _extensionUri: vscode.Uri) {}

  public resolveWebviewView(
    webviewView: vscode.WebviewView,
    context: vscode.WebviewViewResolveContext,
    _token: vscode.CancellationToken
  ) {
    webviewView.webview.options = {
      enableScripts: true,
      localResourceRoots: [this._extensionUri]
    };

    webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);

    // Handle messages from webview
    webviewView.webview.onDidReceiveMessage(data => {
      switch (data.type) {
        case 'colorSelected':
          vscode.window.showInformationMessage(data.value);
          break;
      }
    });
  }

  private _getHtmlForWebview(webview: vscode.Webview) {
    return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My View</title>
</head>
<body>
    <h3>My Sidebar View</h3>
    <p>This appears in the sidebar!</p>
</body>
</html>`;
  }
}

{
  "contributes": {
    "views": {
      "explorer": [
        {
          "type": "webview",
          "id": "myExtension.view",
          "name": "My View"
        }
      ]
    }
  }
}

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
    vscode.window.registerCustomEditorProvider(
      'myExtension.customEditor',
      new MyCustomEditorProvider(context),
      {
        webviewOptions: {
          retainContextWhenHidden: true
        },
        supportsMultipleEditorsPerDocument: false
      }
    )
  );
}

class MyCustomEditorProvider implements vscode.CustomTextEditorProvider {
  constructor(private readonly context: vscode.ExtensionContext) {}

  public async resolveCustomTextEditor(
    document: vscode.TextDocument,
    webviewPanel: vscode.WebviewPanel,
    _token: vscode.CancellationToken
  ): Promise<void> {
    webviewPanel.webview.options = {
      enableScripts: true
    };
    webviewPanel.webview.html = this.getHtmlForWebview(webviewPanel.webview);

    // Update webview when document changes
    const changeDocumentSubscription = vscode.workspace.onDidChangeTextDocument(e => {
      if (e.document.uri.toString() === document.uri.toString()) {
        this.updateWebview(webviewPanel.webview, document);
      }
    });

    webviewPanel.onDidDispose(() => {
      changeDocumentSubscription.dispose();
    });

    // Handle edits from webview
    webviewPanel.webview.onDidReceiveMessage(e => {
      switch (e.type) {
        case 'update':
          this.updateTextDocument(document, e.text);
          return;
      }
    });

    this.updateWebview(webviewPanel.webview, document);
  }

  private updateWebview(webview: vscode.Webview, document: vscode.TextDocument) {
    webview.postMessage({
      type: 'update',
      text: document.getText()
    });
  }

  private updateTextDocument(document: vscode.TextDocument, text: string) {
    const edit = new vscode.WorkspaceEdit();
    edit.replace(
      document.uri,
      new vscode.Range(0, 0, document.lineCount, 0),
      text
    );
    return vscode.workspace.applyEdit(edit);
  }

  private getHtmlForWebview(webview: vscode.Webview): string {
    // Return HTML for custom editor
    return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Editor</title>
</head>
<body>
    <textarea id="editor"></textarea>
    <script>
        const vscode = acquireVsCodeApi();
        const editor = document.getElementById('editor');
        
        editor.addEventListener('input', () => {
            vscode.postMessage({
                type: 'update',
                text: editor.value
            });
        });
        
        window.addEventListener('message', event => {
            const message = event.data;
            if (message.type === 'update') {
                editor.value = message.text;
            }
        });
    </script>
</body>
</html>`;
  }
}