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

Question

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

我更喜欢在工具中打开浏览器窗口，但如果不可能的话，我也可以在我的默认浏览器中打开网页。

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

Answer 1

这可能是最近添加的。

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

Answer 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.openPreview （您可能希望将 browser-preview 作为依赖项列出以确保它已安装）。

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

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

Answer 3

我无法打开Simple Browser: Preview ，但有一个名为Browser Preview的扩展具有更强大的支持

Answer 4

step1: 打开命令Palate {shift+ctrl+p} step2: search for -> Simple Browser: view step3: 点击它并输入你想查看的webLink

Answer 5

脚步：

打开vscode
单击 ctrl + shift + P
搜索简单浏览器显示
输入您的本地主机网址

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

问题描述

5 个解决方案

解决方案1
21 2021-03-06 03:20:12

解决方案2
4 2019-12-29 13:06:17

解决方案3
0 2021-08-20 02:03:52

解决方案4
0 2022-11-24 06:22:26

解决方案5
0 2022-12-09 09:52:26

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

问题描述

5 个解决方案

解决方案1 21 2021-03-06 03:20:12

解决方案2 4 2019-12-29 13:06:17

解决方案3 0 2021-08-20 02:03:52

解决方案4 0 2022-11-24 06:22:26

解决方案5 0 2022-12-09 09:52:26

解决方案1
21 2021-03-06 03:20:12

解决方案2
4 2019-12-29 13:06:17

解决方案3
0 2021-08-20 02:03:52

解决方案4
0 2022-11-24 06:22:26

解决方案5
0 2022-12-09 09:52:26