Vscode: is it possible to load monaco within a webview VSCode Extension?

Created on 18 Dec 2019 · 6Comments · Source: microsoft/vscode

I'm using the monaco-editor-webpack-plugin to load monaco within a vscode extension, but I'm running into an error around the webworkers when it loads the json language:

Uncaught ReferenceError: importScripts is not defined

are webworkers just not supported?

this is the code to set the vscode-resource in my extension

  getWebviewContent(extensionPath: string) {
    const manifest = require(path.join(extensionPath, 'build', 'asset-manifest.json'));

    // get all generated chunks names
    const chunksRegex = /^((?!\.map|\.css|\.html).)*$/;
    const chunkNames = Object.keys(manifest.files).filter(key => chunksRegex.test(key));

    // Use a nonce to whitelist which scripts can be run
    const nonce = v4();

    const scripts = [...chunkNames]
      .map((scriptName) => {
        const scriptUri = vscode.Uri
          .file(path.join(extensionPath, 'build', manifest.files[scriptName]))
          .with({ scheme: 'vscode-resource' });

        return `<script nonce="${nonce}" src="${scriptUri}"></script>`;
      })
      .join('');

    return `<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
                <meta name="theme-color" content="#000000">
                <title>React App</title>
        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}';style-src vscode-resource: 'unsafe-inline' http: https: data:;">
                <base href="${vscode.Uri.file(path.join(extensionPath, 'build')).with({ scheme: 'vscode-resource' })}/">
                <style>
                    body {
                        background: white;
                    }
                </style>
            </head>

            <body>
                <noscript>You need to enable JavaScript to run this app.</noscript>
                <div id="root"></div>
                ${scripts}
            </body>
            </html>`;
  }

and how it gets used:

      ReactWebView.currentPanel.webview.html = this.getWebviewContent(context.extensionPath);

feature-request webview

Source

shanejonas

👍34

Most helpful comment

This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

vscodebot[bot] on 17 Jan 2020

👍28

All 6 comments

@mjbvz Are web workers available inside web views ?

alexdima on 16 Jan 2020

I don't think we can enable them at the moment. We serve up the WebViews in its own origin, this causes chrome to throw a security error:

[Embedded Page] Uncaught SecurityError: Failed to construct 'Worker': Script at 'vscode-resource://file///Users/matb/projects/vscode-extension-samples/webview-sample/media/worker.js' cannot be accessed from origin 'null'.

mjbvz on 17 Jan 2020

Happy Coding!

vscodebot[bot] on 17 Jan 2020

👍28

This feature request has not yet received the 20 community upvotes it takes to make to our backlog. 10 days to go. To learn more about how we handle feature requests, please see our documentation.

Happy Coding

vscodebot[bot] on 7 Mar 2020

👍8

:slightly_smiling_face: This feature request received a sufficient number of community upvotes and we moved it to our backlog. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

vscodebot[bot] on 11 Mar 2020

🎉6

It is very likely the common usecase of this would be to embed an instance of Monoco in the webview (as seen in the original post). I know several people who want to do this as well. Wouldn't it be better for performance & usability to instead provide an API to use VSCode's native Monoco & editing tools for your custom file editor?

Editor receives a plain text input & language id (support for JSON language schema's as well) from the extension
User edits like any other file (with snippets, language server, color scheme/theme, etc)
Extension is given updated plain text output on save.

SW support would provide that option for other things, but it is not far off to assume that the primary use of this feature would be to get the Monoco editor. Therefore, a (presumably) more performant & usage friendly feature should be considered.