logo标签列表

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

visual-studio-codevscode-extensions
69

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

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

如何从扩展中打开网页？

6
如何从 Visual Studio Code API 中打开浏览器？你可以使用 vscode.env 中的 openExternal() 方法。此方法接受一个 URL 字符串作为参数并在用户默认的浏览器中打开它。下面是一个示例：// 导入必要的模块 const vscode = require('vscode'); // 定义命令 let openBrowser = vscode.commands.registerCommand('extension.openBrowser', function () { // 获取当前活跃的编辑器 let editor = vscode.window.activeTextEditor; if (!editor) { return; } // 获取选中的文本 let selection = editor.selection; let text = editor.document.getText(selection); // 打开浏览器并访问所选的 URL vscode.env.openExternal(text); }); // 注册命令 context.subscriptions.push(openBrowser);现在，当用户运行您的扩展程序并调用 extension.openBrowser 命令时，将在浏览器中打开选定的 URL。 - Steffen
是的，@Steffen提供的答案会在VS Code之外打开浏览器。这是我的备选方案。然而，如果浏览器窗口在VS Code中，对于我的扩展来说会稍微更好一些。是否可能在工具本身内部打开浏览器？ - Mark M
1
可能是如何从Visual Studio Code API打开浏览器的重复问题。 - Matt Bierner
可能是如何在VSCode中像在浏览器中打开HTML文件？的重复问题。 - Matt Bierner
2
@MattBierner，你第一个提出的重复问题已经涵盖了Mark提到的内容：他想要在VS Code中打开，而不是像那个问题描述的那样使用外部浏览器。第二个可能更适合标记为这个问题的重复，因为Mark的问题比它早了一年。 - ruffin
5个回答
143

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

  1. 打开调色板（Ctrl + Shift + P）
  2. 选择“简单浏览器：显示”
  3. 输入网址
67
这正是我想要的，但是进入网站后只会得到一个白色屏幕。无论是本地主机还是 Google，包括 https 或 www 在内都没有影响。 - Syzygy
5
太流畅的实现了，它还支持实时重新加载。感谢分享。 - RBT
3
哇！这个结合了实时服务器扩展(@^0^@)/的工具是目前唯一真正可行的并排 HTML 预览解决方案。 - S. Goody
2
请查看此链接：https://github.com/microsoft/vscode/issues/127141。由于存在某些安全原因，VS Code将不提供任何解决方法。 - Chan
4
虽然我通常更喜欢在Chrome中使用开发预览，但有时候为了快速检查，这也可以。对于所有看到白屏的人，请注意需要在网址前加上 http:// 或者 https:// ，仅仅输入 www.google.com 或者 localhost:port-number 是不行的，必须是 https://www.google.com 或者 http://localhost:3000 等等。希望这能帮到你们。 - Sanket Sonavane
显示剩余2条评论
14
1
你只能浏览由此插件自己的服务器提供的HTML文件。但是，你可以在iframe中打开“外部”内容：我有一个Php/C++应用程序提供页面，并将其添加到空白的HTML <iframe style="width:800px"" src="http://localhost:8000"></iframe>中。 - Rodney
10
要在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>`;
}

enter image description here

根据您具体的使用情况，还有浏览器预览扩展程序可供使用，它注册了一个命令browser-preview.openPreview，您可以使用它（您可能希望将browser-preview列为依赖项以确保其已安装）。
最后，如果您只想在普通浏览器窗口中打开，您可以使用env.openExternal API。在远程环境中运行时，它还会处理端口暴露和映射到暴露的主机名（如果是本地主机服务）。
vscode.env.openExternal(Uri.parse("https://www.stackoverflow.com/"));
5

步骤：

  1. 打开 VS Code
  2. 按下 Ctrl + Shift + P
  3. 搜索 Simple Browser Show
  4. 输入你的本地主机 URL
3

步骤1：打开命令面板{shift+ctrl+p} 步骤2：搜索 -> Simple Browser: view 步骤3：点击它并输入您想查看的网址链接

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接