How do I open a browser window in a visual studio code extension?

27,495

Solution 1

This was added recently (see microsoft/vscode#109276).

Open the pallet (Ctrl + Shift + P)
Select "Simple Browser: Preview"
Enter web address

Solution 2

To open a browser window inside VS Code you can use the WebView API, though you need to supply HTML content rather than a URL:

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
    vscode.commands.registerCommand('catCoding.start', () => {
      // Create and show panel
      const panel = vscode.window.createWebviewPanel(
        'catCoding',
        'Cat Coding',
        vscode.ViewColumn.One,
        {}
      );

      // And set its HTML content
      panel.webview.html = getWebviewContent();
    })
  );
}

function getWebviewContent() {
  return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cat Coding</title>
</head>
<body>
    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" />
</body>
</html>`;
}

Depending on your specific use case, there's also the Browser Preview extension which registers a command browser-preview.openPreview that you could use (you'd probably want to list browser-preview as a dependency to ensure it's installed).

And finally, if you just want to open in a normal browser window you can use the env.openExternal API. When running in remote environments this will also take care of exposing ports and mapping to the exposed hostname (if it's a localhost-served service):

vscode.env.openExternal(Uri.parse("https://www.stackoverflow.com/"));

Solution 3

You can use the Live Preview extension from Microsoft:

~~[Deprecated] Browser Preview~~

27,495

Author by

Mark M

Updated on January 04, 2022

Comments

Mark M over 2 years

I am writing a visual studio code extension and I'd like to be able to open a browser window with a specific url in response to a command. I know that Electron has a BrowserWindow class but it appears that the Electron API is not accessible from a vscode extension.

I'd prefer the browser window to open within the tool but I'd be ok with opening the web page in my default browser if it is not possible.

How does one open a web page from an extension?
Syzygy almost 3 years

This would be exactly what I want, but it just get a white screen after entering the website. Doesn't matter if it's localhost, google, includes https or www.
RBT almost 3 years

What a seamless implementation. It also supports live reload. Thanks for sharing.
S. Goody over 2 years

wow! this combined with live server extension (@^0^@)/ is the only side-by-side HTML preview solution that actually works.
John Henry over 2 years

@s-goody you may want to checkout the edge dev tools: marketplace.visualstudio.com/…
mike over 2 years

This worked for me, once, and then afterwards I only see a white screen. Tried reloading/restarting Code, doesn't resolve :( Code's Developer Console shows a warning: main.js [Violation] Avoid using document.write(). Then I tried again with a simple site (e.g. milosophical.me) which works, but a site with frames (e.g. stackoverflow.com) does not. Error: Refused to frame 'stackoverflow.com' because an ancestor violates the Content Security Policy "frame-ancestors 'self'"
Chan over 2 years

check this. github.com/microsoft/vscode/issues/127141. there are some security reason, so vs code will not provide any work around.