如何在Visual Studio Code状态栏项Hover时创建自定义对话框

要实现类似GitLens的状态栏自定义Hover对话框，不能仅依赖原生状态栏API的tooltip属性，需要结合DOM监听和VS Code的Hover API来实现，具体步骤如下：

1. 创建状态栏项并获取对应DOM元素 #

先正常创建状态栏项，再通过DOM查询定位到该状态栏项的元素（需延迟确保DOM已渲染）：

import * as vscode from 'vscode';

let statusBarItem: vscode.StatusBarItem;
let statusBarElement: HTMLElement | undefined;

export function activate(context: vscode.ExtensionContext) {
  // 创建状态栏项
  statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
  statusBarItem.text = '$(git-branch) My Branch';
  statusBarItem.tooltip = '自定义分支信息'; // 用这个属性作为DOM查询标识
  statusBarItem.show();
  context.subscriptions.push(statusBarItem);

  // 延迟获取DOM元素
  setTimeout(() => {
    statusBarElement = document.querySelector(`div[aria-label="${statusBarItem.tooltip}"]`);
    if (statusBarElement) setupHoverListener();
  }, 100);
}

2. 绑定鼠标事件并触发自定义Hover #

给状态栏DOM元素添加鼠标进入/离开事件，触发自定义Hover内容：

function setupHoverListener() {
  if (!statusBarElement) return;

  // 鼠标进入时显示自定义Hover
  statusBarElement.addEventListener('mouseenter', (e) => {
    // 构建结构化Hover内容，支持Markdown和HTML
    const hoverContent = new vscode.MarkdownString();
    hoverContent.appendMarkdown(`### 当前分支详情\n`);
    hoverContent.appendMarkdown(`- 分支名: \`main\`\n`);
    hoverContent.appendMarkdown(`- 未提交变更: 3 项\n`);
    hoverContent.appendMarkdown(`- 最近提交: *feat: 添加用户中心模块*\n`);
    
    // 启用HTML支持，可添加自定义样式
    hoverContent.supportHtml = true;
    hoverContent.appendHtml(`<div style="color: #2196F3; margin-top: 8px; font-size: 12px;">点击状态栏可切换分支</div>`);

    // 根据鼠标位置显示Hover
    vscode.window.createHover(hoverContent).show({
      x: e.clientX,
      y: e.clientY
    }, vscode.window.activeTextEditor?.viewColumn);
  });

  // 鼠标离开时隐藏Hover
  statusBarElement.addEventListener('mouseleave', () => {
    vscode.window.hideHover();
  });
}

3. 扩展停用清理 #

记得在扩展停用移除事件监听，避免内存泄漏：

export function deactivate() {
  if (statusBarElement) {
    statusBarElement.removeEventListener('mouseenter', () => {});
    statusBarElement.removeEventListener('mouseleave', () => {});
  }
}

进阶优化 #

• 如果需要更复杂的交互（比如按钮点击、动态数据加载），可以将Webview内容通过iframe嵌入到MarkdownString的HTML中，但需注意VS Code的安全策略限制。
• 若状态栏项动态更新（如文本变化），需重新获取DOM元素并绑定事件。

内容的提问来源于stack exchange，提问作者Alex