65

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?

Mark M
  • 1,807
  • 2
  • 21
  • 40
  • 6
    http://stackoverflow.com/questions/34205481/how-to-open-browser-from-visual-studio-code-api – Steffen May 10 '16 at 23:14
  • Yes, the answer referenced by @Steffen will open a browser outside of VS Code. This is my backup plan. However, it would be slightly better for my extension if the browser window was in VS Code. Is it possible to open a browser within the tool itself? – Mark M Aug 18 '16 at 23:16
  • 1
    Possible duplicate of [How to open browser from Visual Studio Code API](https://stackoverflow.com/questions/34205481/how-to-open-browser-from-visual-studio-code-api) – Matt Bierner Jul 07 '17 at 09:16
  • Possible duplicate of [How to open HTML file in vscode like in browser?](https://stackoverflow.com/questions/47301694/how-to-open-html-file-in-vscode-like-in-browser) – Matt Bierner Nov 02 '18 at 00:32
  • 2
    @MattBierner Your first suggested duplicate covers what Mark addresses, above: He wants to open _in VS Code_, not an external browser like that question details. The second would likely more rightfully be marked as a duplicate of _this_ question, since Mark's predates it by over a year. – ruffin May 12 '21 at 13:46

5 Answers5

131

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

  1. Open the palette (Ctrl + Shift + P)
  2. Select "Simple Browser: Show"
  3. Enter web address
PG1
  • 1,220
  • 2
  • 12
  • 27
John Henry
  • 2,419
  • 2
  • 20
  • 22
  • 62
    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. – Syzygy May 06 '21 at 21:31
  • 4
    What a seamless implementation. It also supports live reload. Thanks for sharing. – RBT Jul 27 '21 at 04:20
  • 3
    wow! this combined with live server extension \(@^0^@)/ is the only side-by-side HTML preview solution that actually works. – S. Goody Oct 06 '21 at 08:57
  • @s-goody you may want to checkout the edge dev tools: https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools – John Henry Oct 16 '21 at 01:52
  • 1
    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. https://milosophical.me) which works, but a site with frames (e.g. https://stackoverflow.com) does not. Error: Refused to frame 'https://stackoverflow.com' because an ancestor violates the Content Security Policy "frame-ancestors 'self'" – mike Nov 15 '21 at 04:08
  • 2
    check this. https://github.com/microsoft/vscode/issues/127141. there are some security reason, so vs code will not provide any work around. – Chan Dec 07 '21 at 08:30
  • 3
    While I normally prefer development preview in chrome but sometimes for quick checks this works just fine. To all those who are seeing a white screen. you need to prefix `http://` or `https://` just typing in `www.google.com` or `localhost:port-number` wont work it has to be `https://www.google.com` or `http://localhost:3000` etc.. Hope this helps. – Sanket Sonavane Sep 18 '22 at 05:34
14

You can use the Live Preview extension from Microsoft:

Live Preview Extension

[Deprecated] Browser Preview

KyleMit
  • 30,350
  • 66
  • 462
  • 664
  • 1
    You can only browse to html files served up by this plugin's own server. You can however bring up "external" content in an iframe: I have a Php/C++ application serving up pages and I added this to a blank html `` – Rodney Sep 28 '22 at 07:09
10

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>`;
}

enter image description here

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/"));
Danny Tuppeny
  • 40,147
  • 24
  • 151
  • 275
4

Steps:

  1. Open vscode
  2. Click ctrl + shift + P
  3. Search Simple Browser Show
  4. enter your localhost URL
Warkaz
  • 845
  • 6
  • 18
dbgupta
  • 51
  • 3
3

step1: Open command Palate {shift+ctrl+p} step2: search for -> Simple Browser: view step3: Click on it and Enter webLink what you want to view

Sibsankar De
  • 31
  • 2