'How to create webview in sidebar in vscode using javascript?

I am unable to create a review in the sidebar. All the codes that are available are in typescript and I don't have any experience regarding that.

Here is my main extension.js code

const vscode = require("vscode");
const SideBarProvider = require("./sidebarProvider.js");

/**
 * @param {vscode.ExtensionContext} context
 */

function activate(context) {
  const sidebarProvider = new SideBarProvider(context.extensionUri);
  context.subscriptions.push(
    vscode.window.registerWebviewViewProvider("sidebar-view", sidebarProvider)
  );
  context.subscriptions.push();
}

// this method is called when your extension is deactivated
function deactivate() {}

module.exports = {
  activate,
  deactivate,
};

This is my sidebarProvider.js

const vscode = require("vscode");

class SideBarProvider extends vscode.WebviewViewProvider {
  constructor(extensionUri) {
    super();
    this.extensionUri = extensionUri;
    this.view;
  }
  resolveWebviewView(webviewView) {
    this.webviewView = webviewView;
    webviewView.webview.options = {
      // Allow scripts in the webview
      enableScripts: true,
    };
    webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
    webviewView.webview.onDidReceiveMessage((data) => {
      switch (data.type) {
        case "onInfo": {
          if (!data.value) {
            return;
          }
          vscode.window.showInformationMessage(data.value);
          break;
        }
        case "onError": {
          if (!data.value) {
            return;
          }
          vscode.window.showErrorMessage(data.value);
          break;
        }
      }
    });
  }
  revive(panel) {
    this.view = panel;
  }
  _getHtmlForWebview(webview) {
    const styleResetUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this._extensionUri, "media", "reset.css")
    );
    const styleVSCodeUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this._extensionUri, "media", "vscode.css")
    );
    return `!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <link href="${styleResetUri}" rel="stylesheet">
            <link href="${styleVSCodeUri}" rel="stylesheet">
          <title>Document</title>
        </head>

        <body>
          <div>Hello world</div>
        </body>
      </html>`;
  }
}
module.exports = SideBarProvider;

And finally, in my package.json, I am registering my views

"contributes": {
    "viewsContainers": {
      "activitybar": [
        {
          "id": "testview-explorer",
          "title": "Tazim Rahbar",
          "icon": "./resources/testView.svg"
        }
      ]
    },
    "views": {
      "testview-explorer": [
        {
          "type": "webview",
          "id": "sidebar-view",
          "name": "Work",
          "icon": "./resources/testView.svg",
          "contextualTitle": "Work"
        }
      ]
    }
  },

I am able to understand every part but am unable to figure out how to write a provider for "registerwebViewProvider".

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to create webview in sidebar in vscode using javascript?

Sources

Related Questions