如何从VS Code扩展Webview跳转至外部Windows应用？

我之前也遇到过类似的Electron/VS Code Webview处理自定义协议的问题，结合你的情况，问题主要出在URI格式不符合规范和Webview的安全限制导致直接<a>标签跳转失效这两点上，下面是具体的解决方案：

1. 修正URI的格式问题 #

你看到的UriError是因为Electron的URI解析器严格遵循RFC 3986规范：如果URI没有authority组件，路径不能以双斜杠开头。而你的原始URI reqtify:////NKR8WIN764PLP/... 其实是错误的格式——reqtify://已经是协议部分，后面的//NKR8WIN764PLP是authority（主机名），正确的格式应该是reqtify://NKR8WIN764PLP/Users/Public/...（协议后仅保留一个//，路径部分用单个斜杠）。

替换URI的代码可以改成更精确的版本，避免误替换：

public async provideRequirementsContent(sourceUri: vscode.Uri, state: any, webview: any): Promise<string> {
  let html = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"> <html> <head> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\"> </head> <body> <div class=\"sect2\"> <h2> <span class=\"numbering\">1. </span>Requirements of Specifications</h2> <table width=\"100%\" align=\"center\"> <colgroup> <col width=\"80\"></col> <col width=\"1*\"></col></colgroup> <thead> <tr> <th>Requirement</th> <th>Text</th></tr></thead> <tbody> <tr> <td><a href=\"reqtify:////NKR8WIN764PLP/Users//Public/Documents/Reqtify/2020x/Examples/Coupling/Code/Code%20C/Code%20Sample.rqtf?id=SPEC_1\">SPEC_1</a></td> <td>For any of the cruise control (CC) functions to take effect, CC must be turned on first.</td></tr> <tr> <td><a href=\"reqtify:////NKR8WIN764PLP/Users//Public/Documents/Reqtify/2020x/Examples/Coupling/Code/Code%20C/Code%20Sample.rqtf?id=SPEC_2\">SPEC_2</a></td> <td>CC can be in the following states: off, enabled (i.e., on and cruising), and disabled (on, but not cruising).</td></tr> <tr> <td><a href=\"reqtify:////NKR8WIN764PLP/Users//Public/Documents/Reqtify/2020x/Examples/Coupling/Code/Code%20C/Code%20Sample.rqtf?id=SPEC_3\">SPEC_3</a></td> <td>The CC system should be automatically disabled below 30mph and above 90mph.</td></tr> <tr> <td><a href=\"reqtify:////NKR8WIN764PLP/Users//Public/Documents/Reqtify/2020x/Examples/Coupling/Code/Code%20C/Code%20Sample.rqtf?id=SPEC_4\">SPEC_4</a></td> <td>Four actions are permitted during CC: set speed, accelerate, decelerate, and resume speed.</td></tr> <tr> <td><a href=\"reqtify:////NKR8WIN764PLP/Users//Public/Documents/Reqtify/2020x/Examples/Coupling/Code/Code%20C/Code%20Sample.rqtf?id=SPEC_5\">SPEC_5</a></td> <td>When the system is under CC and the brake is pressed, CC is disabled. When the resume button is pressed, the system resumes at the last set CC speed.</td></tr> <tr> <td><a href=\"reqtify:////NKR8WIN764PLP/Users//Public/Documents/Reqtify/2020x/Examples/Coupling/Code/Code%20C/Code%20Sample.rqtf?id=SPEC_6\">SPEC_6</a></td> <td>When the system is under CC and the accelerator pedal is pressed, CC is disabled and the speed increases correspondingly. When the accelerator is released, the CC resumes at its last set CC speed. If at any point of time during acceleration the CC speed is set, CC replaces the old set speed with the new speed.</td></tr> <tr> <td><a href=\"reqtify:////NKR8WIN764PLP/Users//Public/Documents/Reqtify/2020x/Examples/Coupling/Code/Code%20C/Code%20Sample.rqtf?id=SPEC_7\">SPEC_7</a></td> <td>If CC is enabled and the vehicle starts going uphill or downhill, CC should automatically apply the accelerator or brake to maintain the set speed.</td></tr> <tr> <td><a href=\"reqtify:////NKR8WIN764PLP/Users//Public/Documents/Reqtify/2020x/Examples/Coupling/Code/Code%20C/Code%20Sample.rqtf?id=SPEC_8\">SPEC_8</a></td> <td>You can assume an automatic transmission vehicule.</td></tr></tbody></table></div> </body> </html> ";

  // 修正协议部分：将reqtify:////xxx替换为reqtify://xxx
  html = html.replace(/reqtify:\/\/\/(\/[^/]+)/g, 'reqtify://$1');
  // 修正路径中的重复斜杠
  html = html.replace(/([^:])(\/\/+)/g, '$1/');

  // 添加Webview交互脚本
  html += `
  <script>
    const vscode = acquireVsCodeApi();
    // 监听所有reqtify链接的点击事件
    document.addEventListener('click', (e) => {
      const link = e.target.closest('a[href^="reqtify://"]');
      if (link) {
        e.preventDefault(); // 阻止默认跳转
        // 向扩展发送消息，请求打开外部URI
        vscode.postMessage({
          type: 'openExternal',
          uri: link.href
        });
      }
    });
  </script>
  `;

  return html;
}

2. 在扩展中监听消息并打开外部应用 #

VS Code Webview出于安全考虑，直接通过<a>标签跳转自定义协议可能会被拦截，官方推荐使用vscode.env.openExternal()方法来打开外部资源。我们需要在扩展中监听Webview发送的消息，然后调用这个方法：

修改doUpdate方法，添加消息监听：

protected async doUpdate(): Promise<void> {
  let content: string;
  this.throttleTimer = undefined;
  content = await this.contentProvider.provideRequirementsContent(document.uri, this.state, this.editor.webview);
  this.editor.webview.options = getWebviewOptions(this.contentProvider);
  this.editor.webview.html = content;

  // 添加消息监听，处理打开外部URI的请求
  this.editor.webview.onDidReceiveMessage(async (message) => {
    if (message.type === 'openExternal') {
      try {
        const uri = vscode.Uri.parse(message.uri);
        await vscode.env.openExternal(uri);
      } catch (err) {
        console.error('Failed to open external URI:', err);
        // 可以在这里添加错误提示，比如通知用户
        vscode.window.showErrorMessage(`无法打开链接: ${message.uri}`);
      }
    }
  });
}

为什么这个方法有效？ #

• URI格式修正：确保符合RFC规范，避免Electron的解析错误；
• 通过VS Code API跳转：vscode.env.openExternal()是专门用来打开外部资源的API，能正确识别并处理Windows上的自定义协议（比如reqtify://），绕过Webview的安全限制；
• 事件监听+消息传递：通过JavaScript拦截点击事件，避免了直接<a>标签跳转的兼容性问题。

内容的提问来源于stack exchange，提问作者Navnath