CODEWITHSUNDEEP
visual-studio-codewebviewvscode-extensionsvscode-webview
jacob lol
jacob lol

Reputation: 1

Visual Studio Code Webview Provider

Clarity on what a webview provider is and how to create one.

I'm currently working on creating an extension within VSCode. Just to add, i'm very new to software developing so my terminology may be a bit incorrect.

I realized creating a webview view (So a webview that's displayed within a 'view' i.e. the sections within a view container) is a lot different than creating a basic webview panel. It requires you to have a 'webview provider' which is not explained very well in their documentation https://code.visualstudio.com/api/references/vscode-api#WebviewView

Are there any resources someone can provide to help bring some clarity on what a Webview Provider is and creating one?

Upvotes: 0

Views: 415

Answers (1)

Rajan Thakur
Rajan Thakur

Reputation: 31

Registering webviews for view containers (sidebar showing up) specifically will make your VS Code extension have an activity bar icon that opens up a side bar. An example of this is Github Copilot. The logo on the left that opens up a side bar in the primary bar.

If you, or anybody else who comes to this StackOverflow post needs help with view containers, here it is (IF YOU HAVE BEEN TRYING TO RESOLVE AN ISSUE WITH HTML NOT SHOWING UP, THIS POST IS FOR YOU TOO).

CREATION - JAVASCRIPT:

function activate(context) {
  // Register the webview view
  const myWebviewProvider = new MyWebviewProvider(context.extensionUri);
  console.log("WEB VIEW PROVIDER CREATED");
  context.subscriptions.push(vscode.window.registerWebviewViewProvider('package',myWebviewProvider)); // Instead of 'package,' have your view ID
  console.log("WEB VIEW REGISTERED");
}

class MyWebviewProvider {

  constructor(extensionUri) {
    this._extensionUri = extensionUri;
  }

  resolveWebviewView(webviewView) {
    this._view = webviewView;

    // console.log("WEB VIEW *RESOLVED*");
    // // Allow scripts in the webview
    webviewView.webview.options = {
      enableScripts: true,
      localResourceRoots: [
                this._extensionUri
            ]
    };
    
    webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);

  }

  _getHtmlForWebview(webview) {
    // Webview content
    return `...`; // Type HTML here, with proper HTML boilerplate
  }
}

CREATION - JSON (UNDER "CONTRIBUTES," IN PACKAGE.JSON):

"contributes": {
    "viewsContainers": {
      "activitybar": [
        {
          "id": "mySidebar",
          "title": "My Beautiful Sidebar extension",
          "icon": "/path/to/your_logo.svg"
        }
      ]
    },
    "views" : {
      "mySidebar" : [
        {
          "id": "myViewID",
          "name": "Some name that I want to put",
          "type": "webview"
        }
      ]
    },

The most important part is setting type: "webview", else the entire thing doesn't work (didn't work for me when I didn't have that set).

The reason for lots of bold and caps lock is because I've been struggling to create a proper web view for the past 3 days and when I figured it out I thought I'd share it immediately.

Upvotes: 3

Related Questions