如何通过VS Code扩展在活动编辑器窗口右上角添加固定div

方法一：编辑器装饰器（推荐） #

这是最贴合编辑器窗口场景的方案，通过VS Code的文本装饰器API创建元素，结合CSS定位固定到右上角，切换标签页时重新给活动编辑器应用装饰即可。

1. 定义装饰类型：

const cornerDecoration = vscode.window.createTextEditorDecorationType({
  position: 'absolute',
  top: '10px',
  right: '10px',
  width: '80px',
  height: '30px',
  zIndex: 100,
  backgroundColor: '#4CAF50',
  color: '#fff',
  textAlign: 'center',
  lineHeight: '30px',
});

2. 绑定编辑器切换事件，自动同步装饰：

// 初始化给当前活动编辑器添加装饰
updateCornerDecor(vscode.window.activeTextEditor);

// 监听活动编辑器切换
vscode.window.onDidChangeActiveTextEditor(editor => updateCornerDecor(editor));

function updateCornerDecor(editor: vscode.TextEditor | undefined) {
  if (!editor) return;
  // 选文档起始的空范围挂载装饰
  const emptyRange = new vscode.Range(0, 0, 0, 0);
  editor.setDecorations(cornerDecoration, [{
    range: emptyRange,
    renderOptions: { after: { contentText: '自定义内容' } }
  }]);
}

这种方式完全嵌入编辑器区域，窗口大小变化时会自动跟随，无需额外调整位置。

方法二：浮动Webview面板（适合复杂交互） #

如果需要给div添加点击、表单等复杂交互，可以创建浮动Webview面板，通过配置让它固定在编辑器右上角：

1. 创建Webview面板：

let cornerPanel: vscode.WebviewPanel | undefined;

function initCornerPanel() {
  cornerPanel = vscode.window.createWebviewPanel(
    'fixedCornerPanel',
    '', // 隐藏标题
    vscode.ViewColumn.Active,
    {
      enableScripts: true,
      retainContextWhenHidden: true,
      preserveFocus: false, // 不抢占编辑器焦点
    }
  );

  // 设置面板内容与样式
  cornerPanel.webview.html = `
    <!DOCTYPE html>
    <html>
    <body style="margin:0;">
      <div style="width:80px; height:30px; background:#2196F3; color:#fff; text-align:center; line-height:30px;">
        <button onclick="alert('Clicked')">操作</button>
      </div>
    </body>
    </html>
  `;

  // 隐藏标题栏和图标
  cornerPanel.titleBarStyle = 'custom';
  cornerPanel.iconPath = vscode.Uri.parse('');

  // 编辑器切换时保持面板在当前列
  vscode.window.onDidChangeActiveTextEditor(() => {
    cornerPanel?.reveal(vscode.ViewColumn.Active);
  });
}

这种方式需要额外处理窗口大小变化时的位置适配，适合交互复杂的场景。

注意事项 #

• 装饰器方案要设置足够高的zIndex，避免被编辑器内容遮挡。
• 可以监听vscode.window.onDidChangeWindowState事件，在窗口尺寸变化时重新应用装饰，确保位置准确。
• 动态更新内容时，直接修改装饰的renderOptions并重新调用setDecorations即可。

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