【问题标题】:Sending message from webview to extension从 webview 发送消息到扩展
【发布时间】:2021-04-09 02:47:01
【问题描述】:

我有一个 webview (SidebarProvider),它允许用户输入并发送它。我想将这样的输入发送到扩展SearchedWordPanel

步骤:

  1. 在我的侧边栏视图(html、js 和 css)中,用户键入一个单词并按“搜索”。 (作品)
  2. 单词被发送到 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);
  })
);

侧边栏视图

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

SidebarProvider

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;
    }

问题:当我在SidebarProvider 中执行vscode.commands.executeCommand("vsmyapp.showSearched"); 时,如何将data.value 发送到SearchedWordPanel

【问题讨论】:

  • 如果您解决了这个问题,请告诉我们。我也被困住了:(

标签: typescript visual-studio-code vscode-extensions


【解决方案1】:

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

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

假设SearchedWordPanel 具有原生WebviewPanel 作为道具panel。为了向它发布消息,您可以这样做:

SearchedWordPanel.panel.postMessage()

【讨论】:

  • 我想将邮件从SidebarProvider 发送到SearchedWordPanel。不是来自SearchedWordPanel。我用伪代码COMMAND_THAT_SENDS_(data.value)_TO_SearchedWordPanel添加了我想发送消息的位置@
  • 选项 1:取决于扩展结构,但您可以在创建时将 SearchedWordPanel 实例传递给 SidebarProvider(如 here),以便稍后您可以调用它的 postMessage .
  • 选项2(实际上应该是1):由于您执行vsmyapp.showSearched并在extension.ts中收听该命令,因此您可以在那里拥有实例(如果您还没有) 所以你可以从那里拨打postMessage。我相信我的解释是模糊的。如果我能看到实际的结构,我可能会提供更多帮助。
猜你喜欢
  • 2012-07-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-11-16
  • 1970-01-01
  • 2017-06-29
  • 2014-02-04
相关资源
最近更新 更多