How do I contribute a command to the VS Code explo

Question

I'm writing an extension that uses VS Code's webview api. My extension also registers a refresh preview command that updates the webview's content. How can I make it so that:

• The refresh preview command only shows up in the command palette when my webview is focused?

• The refresh preview command shows in the webview's editor title bar?

Answer 1

First, create a custom context key that tracks when your webview is focused. Use VS Code's setContext command to make this context key track when your webview is focused:

const myWebview = ...;

// Make the context key track when one of your webviews is focused
myWebview.onDidChangeViewState(({ webviewPanel }) => {
    vscode.commands.executeCommand('setContext',
        'myWebviewFocused',
        webviewPanel.active);
});

Then use your context key in the when clauses of your extension's menus contribution point

For a command with the id myExtension.refreshPreview, to ensure that command only shows up in the command palette when your webview is focused, use the following contribution:

{
  "contributes": {
    "menus": {
      "commandPalette": [
        {
          "command": "myExtension.refreshPreview",
          "when": "myWebviewFocused",
        }
      ]
    }
  }
}

For adding a command (possible with icon) to the editor title bar of your webview, use the editor/title contribution point:

{
  "contributes": {
    "menus": {
      "editor/title": [
        {
          "command": "myExtension.refreshPreview",
          "when": "myWebviewFocused",
        }
      ]
    }
  }
}

Check out VS Code's built-in markdown extension for a more advanced example of this.