microsoft / microsoft/vscode-extension-samples
Document localResourceRoot for Webview codicons.css net::ERR_ABORTED 401
@mjbvz is already working on this.
Since Nov 4, 2022.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.