32

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

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

如何从扩展程序打开网页？

4

3 回答 3

50

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

  1. 打开托盘（Ctrl + Shift + P）
  2. 选择“简单浏览器：预览”
  3. 输入网址
于 2021-03-06T03:20:12.443 回答
6

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

实时预览扩展

[已弃用] 浏览器预览

于 2021-08-20T02:03:52.633 回答
5

要在 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.openExternalAPI。在远程环境中运行时，这还将负责公开端口并映射到公开的主机名（如果它是本地主机服务的服务）：

vscode.env.openExternal(Uri.parse("https://www.stackoverflow.com/"));
于 2019-12-29T13:06:17.170 回答