Web Extensions

[isidorn]

We recently announced VS Code for the Web at https://vscode.dev/, which provides a free, zero-install Microsoft Visual Studio Code experience running entirely in your browser. You can learn more here.

We'd like to ensure your extension can run in the web, and we have a guide for enabling extensions for the web here. As a couple of highlights:

• In VS Code for the Web, both the UI and extension host run inside the browser.
• A web extension is structured like a regular extension, but with a different main file: it's defined by the browser property
• Access to workspace files needs to go through the VS Code file system API accessible at vscode.workspace.fs
• There are currently three ways to test a web extension

Please let us know if you have questions or feedback on enabling your extension for the web - our team would love to learn from your experiences and help you migrate your extensions for the web. Thank you!

[cedric05]

Use VS Code running on the desktop with the --extensionDevelopmentKind=web option to run your web extension in a web extension host running in VS Code.

I always have to use vscode.dev to test my extension. How do i use above option. this is what i have in .vscode/launch.json

 {
                        "name": "Web Extension Tests",
                        "type": "pwa-extensionHost",
                        "debugWebWorkerHost": true,
                        "request": "launch",
                        "args": [
                          "--extensionDevelopmentPath=${workspaceFolder}",
                          "--extensionDevelopmentKind=web",
                        ],
                        "outFiles": ["${workspaceFolder}/dist/*.js"],
}

[isidorn]

@cedric05 that looks correct. What is the exact problem you run into?

[cedric05]

extension is not running/activated.

[isidorn]

@cedric05 do you have a repository you can share so we try to reproduce this on our side?

[cedric05]

https://github.com/cedric05/dothttp-runner

[isidorn]

@aeschli can you help here? There seem to be good repro steps :)

[aeschli]

This works for me

• clone your repo, npm install && npm compile
• add a console.log('webextension') as first line of activate in webetension.ts, set a breakpoint
• run the launch config Web Extension Tests
• breakpoint is hit, continue
• in the window that opened, run Developer: Show Running Extensions and see that the extension is running in the web extension host
  

[cedric05]

I always use WSL for development and its not working when i launch from debugger.
WSL integration is so good that It didn't come to my mind that running webextension from WSL is the issue.
Its working when I clone and run in windows.
Thanks @aeschli , @isidorn

[cristian-spiescu]

I am developing a web extension. I use WSL. I observed that for this combination (web extension + WSL), the web extension doesn't get loaded in VS Code. A simple repro would be this issue.

Should I understand that web extension + WSL is a setup that is currently not supported? Or maybe it is, and additional config is needed?

[pcj]

How do URL handlers work in the context of vscode.dev? I can use a link like vscode://{extension-id}/whatever to invoke a vscode.UrlHandler on the desktop, but I don't know what the corresponding route would be for vscode.dev.

For the app I'm developing, I currently have an "Open in VSCode" link/menu item that will open a document in vscode desktop. I'm working on making the extension web/browser compatible and I'd like to offer a similar "Open in vscode.dev" menu item. Something like https://vscode.dev/extension/{extension-id}/whatever.

[r3m0t]

Take a look at the documentation of vscode.env.asExternalUri