在 VSCode WebView 扩展中允许弹出窗口的解决方法

Question

我们创建了一个独特的 VSCode WebView 扩展，仅供我们自己内部使用。此 WebView 提供了捕获域驱动设计模型的能力，这些模型是生成到微服务 API 中的代码。 我们添加的类型编辑器之一支持 JSON Schema，我们使用 OpenSource React 组件来实现这个编辑器。我们非常小心地没有使用 WebView 扩展实现任何弹出窗口，但是这个 JSON Schema 编辑器确实实现了许多模式对话框，这些对话框在我们的自定义 VSCode WebView 扩展中不会出现。

我正在寻找解决 VSCode WebView Extension 中限制的方法。

Answer 1

VS Code 有意阻止 webview 中的模式。请参阅this issue 了解有关原因的更多详细信息，但总结如下：

• Webviews 不应中断并影响编辑器的其余体验（部分原因是 webviews 允许运行未随扩展程序安装的潜在不受信任的代码）
• 本机模式不适合 VS Code UI 的其余部分，并且它们的功能受到严重限制。

从 webview 收集用户输入的正确方法是从 webview 将消息发送回调用 VS Code 的普通 UI API 的扩展，例如 showQuickPick 或 showInformationMessage。如果您使用的库不允许您注入自定义提示方法，那么您可以尝试覆盖 window.alert() 等全局变量以将它们连接到相应的 VS Code API

Answer 2

据我所知，目前 vscode webview 默认阻止弹出窗口，在 webview 中使用 modal/popup 的唯一方法是使用 vscode.window.showInformationMessage("message",{modal:true}) 解决或根据用户操作拒绝。

Answer 3

你是对的。为了解决这个问题，我们改用滑动窗口。这确实有效。遗憾的是，存在此限制，因为它将限制使用依赖于用户通过模态对话框进行交互的第三方控件。