如何从VSCode扩展向WebviewProvider创建的自定义Webview发送消息

使用WebviewViewProvider注册的面板Webview不需要独立创建Panel实例，只要在resolveWebviewView回调触发时缓存传入的WebviewView实例，后续命令执行时直接通过该实例的webview属性调用postMessage即可。

具体修改步骤 #

• 定义模块级变量缓存WebviewView实例
• 在resolveWebviewView执行时将传入的第一个参数赋值给缓存变量，同时绑定销毁事件清空缓存，避免调用已销毁实例报错
• 命令逻辑执行完成后，判断缓存实例存在则直接发送消息
• 修正Webview内部脚本的消息处理逻辑，正确渲染接收到的内容

修改后的完整extension.js代码如下：

// 缓存WebviewView实例
let cachedWebviewView;

// 注册命令
const listenCommand = vscode.commands.registerCommand("monitor.listen", () => {
  // 此处替换为你实际的命令执行逻辑，拿到输出结果
  const commandOutput = "实际命令执行的输出内容";

  // 校验webview实例存在且未销毁，再发送消息
  if (cachedWebviewView) {
    cachedWebviewView.webview.postMessage({
      command: "results",
      data: commandOutput
    });
  }
});

const monitorViewProvider = {
  resolveWebviewView(webviewView, context, token) {
    // 更新缓存的实例
    cachedWebviewView = webviewView;
    webviewView.webview.options = { enableScripts: true };

    webviewView.webview.html = `<!DOCTYPE html>
<html>
<body>
  <div id="results" style="white-space: pre;"></div>
  <script>
    const resultsEl = document.getElementById("results");
    window.addEventListener('message', event => {
      const message = event.data;
      switch (message.command) {
        case 'results':
          // 直接将收到的输出渲染到页面
          resultsEl.textContent = message.data;
          break;
      }
    });
  </script>
</body>
</html>`;

    // webview销毁时清空缓存
    webviewView.onDidDispose(() => {
      cachedWebviewView = null;
    });
  }
};

context.subscriptions.push(
  listenCommand,
  vscode.window.registerWebviewViewProvider("monitor.output", monitorViewProvider)
);

注意点 #

• 原代码Webview脚本中console.log(results)存在变量未定义错误，已修正为从消息体取数据并渲染到对应DOM节点
• 命令注册返回的disposable需要加入context.subscriptions，否则插件生命周期管理会出现异常
• 现有package.json的视图、命令配置无需修改，可以直接正常使用

内容的提问来源于stack exchange，提问作者S.P