How to load a react app via URL inside VS code using the Webview API? #1276

JensWinkler91 · 2024-07-18T09:31:58Z

JensWinkler91
Jul 18, 2024

Hi there,

I'm looking for some help.

I want to develop a VS code extension that displays a react app inside VS code (URL: https://app.visualboost.de). The react app contains routes and session cookies.
Additionally, I'd also like to add some event handler to the window so I can respond to them within the VS code extension.

I tried to load the web app using the following html snippet and the WebView API:

Here's what I've tried so far:

Passing the URL as the src attribute of an iframe in a static HTML document.

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Web Page</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    overflow: hidden;
                }
                iframe {
                    width: 100%;
                    height: 100%;
                    border: none;
                }
            </style>
        </head>
        <body>
        <script>
                    window.onload = () => {
                        var iframe = document.getElementById('myIframe')
                        iframe.contentWindow.myValue = "test_value";
                    }
                </script>
            <iframe id="myIframe" src="${url}"></iframe>
        </body>
        </html>

However, in this case, I encounter the following error: Failed to set a named property 'myValue' on 'Window': Blocked a frame with origin "vscode-webview://15jpppnno59so6hp8bi6a1divotb6vsvmgran1q4a4pjb5l5iair" from accessing a cross-origin frame.
at window.onload (:6:54)

Load the URL with axios and pass the document to panel.webview.html:

	const vbSite = await axios.get("https://app.visualboost.de");
	panel.webview.html = vbSite.data;

I get the following error: Failed to load resource: net::ERR_ACCESS_DENIED main.06ae35db.js:1

Can anyone tell me, if it's possible (and if yes how) to load the react app successfully inside VS code?
Thanks in advance!

P.S. I tried to load the react app via Simple Browser but it doesn't work because the simple browser does not support Cookies.

Answered by isidorn

Aug 29, 2024

This is not supported. And we have no plans to add this capability in the near future. You can search the vscode repo for issues similar to this where we discussed what concerns we have from opening this up for extension developers. Thank you

View full answer

isidorn · 2024-08-29T13:50:37Z

isidorn
Aug 29, 2024
Maintainer

This is not supported. And we have no plans to add this capability in the near future. You can search the vscode repo for issues similar to this where we discussed what concerns we have from opening this up for extension developers. Thank you

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to load a react app via URL inside VS code using the Webview API? #1276

{{title}}

Replies: 1 comment

{{title}}

Select a reply

How to load a react app via URL inside VS code using the Webview API? #1276

JensWinkler91 Jul 18, 2024

Replies: 1 comment

isidorn Aug 29, 2024 Maintainer

JensWinkler91
Jul 18, 2024

isidorn
Aug 29, 2024
Maintainer