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扩展名，该扩展名注册了您可以使用的命令browser-preview.openPreview（您可能希望将浏览器预览列表作为依赖项列出，以确保已安装）。

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

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

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

2 个答案: