如何在 Visual Studio 代码扩展中打开浏览器窗口？答案

【问题标题】：How do I open a browser window in a visual studio code extension?如何在 Visual Studio 代码扩展中打开浏览器窗口？
【发布时间】：2016-09-01 20:02:02
【问题描述】：

我正在编写一个 Visual Studio 代码扩展，我希望能够打开一个带有特定 URL 的浏览器窗口来响应命令。我知道 Electron 有一个 BrowserWindow 类，但似乎无法从 vscode 扩展访问 Electron API。

我希望在工具中打开浏览器窗口，但如果不可能，我可以在默认浏览器中打开网页。

如何通过扩展程序打开网页？

【问题讨论】：

stackoverflow.com/questions/34205481/…
是的，@Steffen 引用的答案将在 VS Code 之外打开浏览器。这是我的备用计划。但是，如果浏览器窗口位于 VS Code 中，我的扩展程序会稍微好一些。是否可以在工具本身内打开浏览器？
How to open browser from Visual Studio Code API的可能重复
How to open HTML file in vscode like in browser?的可能重复
@MattBierner 您的第一个建议副本涵盖了 Mark 在上面提到的内容：他想打开 在 VS Code 中，而不是像该问题详细信息那样的外部浏览器。第二个可能更正确地被标记为 this 问题的副本，因为 Mark 比它早了一年多。

标签： visual-studio-code vscode-extensions

【解决方案1】：

这是最近添加的（请参阅microsoft/vscode#109276）。

打开托盘（Ctrl + Shift + P）
选择“简单浏览器：预览”
输入网址

【讨论】：

这正是我想要的，但是进入网站后它只是得到一个白屏。不管是 localhost、google、包括 https 还是 www。
多么无缝的实现啊。它还支持实时重新加载。感谢分享。
哇！这与实时服务器扩展 (@^0^@)/ 相结合是唯一真正有效的并行 HTML 预览解决方案。
这对我有用，一次，然后我只看到一个白屏。尝试重新加载/重新启动代码，但无法解决 :( 代码的开发者控制台显示警告：main.js [Violation] 避免使用 document.write()。然后我再次尝试了一个简单的站点（例如 milosophical.me），它可以工作，但是有框架的网站（例如stackoverflow.com）没有。错误：拒绝框架'stackoverflow.com'，因为祖先违反了内容安全策略“frame-ancestors 'self'”
检查这个。 github.com/microsoft/vscode/issues/127141。有一些安全原因，所以 vs 代码不会提供任何解决方法。

【解决方案2】：

要在 VS Code 中打开浏览器窗口，您可以使用 WebView API，但您需要提供 HTML 内容而不是 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>`;
}

根据您的具体用例，还有一个 Browser Preview 扩展，它注册了一个您可以使用的命令 browser-preview.openPreview（您可能希望将 browser-preview 列为依赖项以确保它已安装）。

最后，如果您只想在普通浏览器窗口中打开，您可以使用env.openExternal API。在远程环境中运行时，这还将负责公开端口并映射到公开的主机名（如果它是本地主机服务的服务）：

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

【讨论】：

【解决方案3】：

您可以使用 Microsoft 的 Live Preview 扩展：

~~[Deprecated] Browser Preview~~

【讨论】：

请注意，这已被弃用。另外，我无法确认；但我相信可能存在与此扩展相关的一些恶意软件。
感谢@JohnHenry - 已修复！