如何在 Visual Studio 代码扩展中打开浏览器窗口？
Posted
技术标签:
【中文标题】如何在 Visual Studio 代码扩展中打开浏览器窗口？【英文标题】：How do I open a browser window in a visual studio code extension? 【发布时间】：2016-09-01 20:02:02 【问题描述】：我正在编写一个 Visual Studio 代码扩展，我希望能够打开一个带有特定 URL 的浏览器窗口来响应命令。我知道 Electron 有一个 BrowserWindow 类，但似乎无法从 vscode 扩展访问 Electron API。
我希望在工具中打开浏览器窗口，但如果不可能，我可以在默认浏览器中打开网页。
如何通过扩展程序打开网页？
【问题讨论】：
***.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 比它早了一年多。 【参考方案1】：这是最近添加的（请参阅microsoft/vscode#109276）。
-
打开托盘（Ctrl + Shift + P）
选择“简单浏览器：预览”
输入网址
【讨论】：
这正是我想要的，但是进入网站后它只是得到一个白屏。不管是 localhost、google、包括 https 还是 www。 多么无缝的实现啊。它还支持实时重新加载。感谢分享。 哇！这与实时服务器扩展 (@^0^@)/ 相结合是唯一真正有效的并行 HTML 预览解决方案。 这对我有用，一次，然后我只看到一个白屏。尝试重新加载/重新启动代码，但无法解决 :( 代码的开发者控制台显示警告：main.js [Violation] 避免使用 document.write()。然后我再次尝试了一个简单的站点（例如 milosophical.me），它可以工作，但是有框架的网站（例如***.com）没有。错误：拒绝框架'***.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" />
</body>
</html>`;
根据您的具体用例，还有一个 Browser Preview 扩展，它注册了一个您可以使用的命令 browser-preview.openPreview（您可能希望将 browser-preview 列为依赖项以确保它已安装）。
最后，如果您只想在普通浏览器窗口中打开，您可以使用env.openExternal API。在远程环境中运行时，这还将负责公开端口并映射到公开的主机名（如果它是本地主机服务的服务）：
vscode.env.openExternal(Uri.parse("https://www.***.com/"));
【讨论】：
【参考方案3】：您可以使用 Microsoft 的 Live Preview 扩展：
[Deprecated] Browser Preview
【讨论】：
请注意，这已被弃用。另外，我无法确认；但我相信可能存在与此扩展相关的一些恶意软件。 感谢@JohnHenry - 已修复！以上是关于如何在 Visual Studio 代码扩展中打开浏览器窗口？的主要内容，如果未能解决你的问题，请参考以下文章
从Visual Studio代码源代码控制窗格上下文菜单中提供“打开文件”命令
如何在 Visual Studio 中的单个操作中打开多个文件
创建 Visual Studio 扩展时如何获取源代码管理历史记录窗口中的选定项目？