如何将命令提供给VS代码资源管理器标题栏或命令选项板，该命令选项板仅在我的webview聚焦时才处于活动状态？

Question

我正在写一个使用VS Code的webview api的扩展。我的扩展程序还注册了一个更新webview内容的refresh preview命令。我怎样才能这样做：

• 当我的webview聚焦时，refresh preview命令只出现在命令面板中？
• refresh preview命令显示在webview的编辑器标题栏中？

Answer 1

首先，创建一个自定义context key，用于跟踪webview的聚焦时间。当您的webview聚焦时，使用VS Code的setContext命令使此上下文键跟踪：

const myWebview = ...;

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

然后在扩展程序的when的menus contribution point子句中使用上下文键

对于具有id myExtension.refreshPreview的命令，要确保在关注webview时命令仅显示在命令选项板中，请使用以下贡献：

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

要将命令（可能带有图标）添加到webview的编辑器标题栏，请使用editor/title贡献点：

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

查看VS Code's built-in markdown extension以获得更高级的示例。