typescript - 将消息从 webview 发送到扩展

Question

我有一个 webview (SidebarProvider)，它允许用户输入并发送。我想将此类输入发送到扩展 SearchedWordPanel。

步骤:

1. 在我的边栏 View (html、js 和 css)中，用户键入一个词并按“搜索”。 (作品)
2. 单词被发送到 SidebarProvider，SidebarProvider 使用 onDidReceiveMessage 接收消息并运行命令以显示 SearchedWordPanel。 (作品)
3. SearchedWordPanel 打开并显示用户输入的单词。 (问题)

我可以执行第 1 点和第 2 点，但无法将搜索到的词发送到 SearchedWordPanel。

extensions.ts

const sidebarProvider = new SidebarProvider(context.extensionUri);
  context.subscriptions.push(
    vscode.window.registerWebviewViewProvider(
      "vsmyapp-sidebar",
      sidebarProvider
    )
  );

context.subscriptions.push(
  vscode.commands.registerCommand('vsmyapp.showSearched', () => {
    SearchedWordPanel.kill();
    SearchedWordPanel.createOrShow(context.extensionUri);
  })
);

侧边栏 View

<button on:click={() =>
  tsvscode.postMessage({
    type: 'onSearch',
    value: searchedText
  })
}>Search</button>

侧边栏提供者

webviewView.webview.onDidReceiveMessage(async (data) => {
  switch (data.type) {
    case "onSearch" : {
      if (!data.value) {
        return;
      }
      vscode.window.showInformationMessage(data.value); <-- WORKS
      vscode.commands.executeCommand( <--WORKS, the command is run. BUT How do I send data.value to SearchedWordPanel?
        "vsmyapp.showSearched",
      );
      COMMAND_THAT_SENDS_(data.value)_TO_SearchedWordPanel // Pseudocode
      break;
    }

问题:当我执行vscode.commands.executeCommand("vsmyapp. showSearched"); 在 SidebarProvider 中？

Answer 1

Webview 有 postMessage - https://code.visualstudio.com/api/extension-guides/webview#passing-messages-from-an-extension-to-a-webview .

我不确定 SearchedWordPanel 是什么(它不是 WebviewPanel)，可能是一个包装器。

假设 SearchedWordPanel 具有原生 WebviewPanel 作为 Prop panel。要向其发送消息，您可以执行以下操作:

SearchedWordPanel.panel.postMessage()