3

I have a list that has to be returned from the extension to the input box of my webview page.

Its like the javascript event present in the webview has to call the extension for the list and then use that list object and show the list data in the view. How do i do this?

1 Answer 1

11

The WebView class has a method to send messages to the WebView content and an event to receive messages from that. See the chapter in the vscode documenation about message passing.

In your webview code you can receive messages with:

        // Handle the message inside the webview
        window.addEventListener('message', event => {

            const message = event.data; // The JSON data our extension sent

            switch (message.command) {
                case 'refactor':
                    count = Math.ceil(count * 0.5);
                    counter.textContent = count;
                    break;
            }
        });

In the extension code you can handle messages from your webview content like this:

      // Handle messages from the webview
      panel.webview.onDidReceiveMessage(
        message => {
          switch (message.command) {
            case 'alert':
              vscode.window.showErrorMessage(message.text);
              return;
          }
        },
        undefined,
        context.subscriptions
      );

To send a message to the extension, you have to aquire the vscode API in your webview code:

        (function() {
            const vscode = acquireVsCodeApi();
            const counter = document.getElementById('lines-of-code-counter');

            let count = 0;
            setInterval(() => {
                counter.textContent = count++;

                // Alert the extension when our cat introduces a bug
                if (Math.random() < 0.001 * count) {
                    vscode.postMessage({
                        command: 'alert',
                        text: '🐛  on line ' + count
                    })
                }
            }, 100);
        }())

And finally, sending a message from the extension to the webview content is as easy as:

currentPanel.webview.postMessage({ command: 'refactor' });
7
  • yeah i got this but instead of sending a message , i need to send the object and use that in webview. i tried this way but didnot get. Jul 2, 2019 at 8:07
  • 1
    You can send that object as a parameter. Just define a member in the message object used in postMessage. You can then access it in the window event listener as event.data.yourObject. Jul 2, 2019 at 8:42
  • May I ask why context.subscriptions is needed as an argument?
    – laike9m
    Aug 4, 2020 at 5:40
  • Tbh. I have no idea. This is the way how it's used in the documentation. Aug 4, 2020 at 8:24
  • For more details check - code.visualstudio.com/api/extension-guides/webview Oct 24, 2022 at 0:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.