visual-studio-code - 如何向 VS Code 资源管理器标题栏或命令面板贡献一个命令，该命令仅在我的 webview 获得焦点时才处于事件状态？

Question

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

• 刷新预览 命令仅在我的 webview 获得焦点时显示在命令面板中？

• 刷新预览 命令显示在 webview 的编辑器标题栏中？

Answer 1

首先，创建自定义 context key跟踪您的 WebView 何时聚焦。使用 VS Code 的 setContext 命令在您的 webview 获得焦点时跟踪此上下文键:

const myWebview = ...;

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

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

对于 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有关此的更高级示例。