microsoft / microsoft/vscode-extension-samples

Document localResourceRoot for Webview codicons.css net::ERR_ABORTED 401

Open
#720 2 comments 7 reactions 1 assignee View on GitHub

@mjbvz is already working on this.

Since Nov 4, 2022.

bug
Dominant language
TypeScript
Stars
10.2k
Forks
3.9k
PR merge metrics
No merged PRs in 30d

Description

When following the webview-codicons-sample I found the following error was returned on the extension host console:

GET https://file+.vscode-resource.vscode-cdn.net/ [...] /node_modules/%40vscode/codicons/dist/codicon.css net::ERR_ABORTED 401

This was caused due to Serialization and WebView Options:

if (vscode.window.registerWebviewPanelSerializer) {
    // Make sure we register a serializer in activation event
    vscode.window.registerWebviewPanelSerializer(TTSConsolePanel.viewType, {
      async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: unknown) {
        console.log(`Got state: ${state}`);
        // Reset the webview options so we use latest uri for `localResourceRoots`.
        webviewPanel.webview.options = getWebviewOptions(context.extensionUri);
        TTSConsolePanel.revive(webviewPanel, context.extensionUri);
      },
    });
  }

According to the localResourceRoot docs, this option should by default allow resources within extension's install directory, but I've found this is only true if localResourceRoots is not set. If there's any values passed, then the extension's install directory must also be explicitly allowed like so:

export function getWebviewOptions(extensionUri: vscode.Uri): vscode.WebviewOptions {
  return {
    enableScripts: true,
    localResourceRoots: [
      vscode.Uri.joinPath(extensionUri, 'node_modules', '@vscode/codicons', 'dist'), // <-- This was missing
      vscode.Uri.joinPath(extensionUri, 'assets'),
    ],
  };
}

This behavior was difficult to trace down and I believe it should be either included on the example or mentioned in the README.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.