Enable your extension to run on VS Code for the web

[tanhakabir]

Hey @johnpapa! 👋

I'm part of the VS Code team and we recently launched VS Code for the web with github.dev! You can read the full guide for extension authors creating and migrating extensions here: Web Extensions

In hopes to help you migrate I helped make the changes necessary to make your extensions work on the web.

The changes I made:

• Modify webpack bundling to create web and desktop friendly versions of your extension
• Add the necessary dependencies for web bundling
• Add the browser entry point to your package.json to link to the web-friendly compiled extension
• Add some folders/files to ignore in your .gitignore and .vscodeignore
• Add launch configuration for launching your extension in a web extension host

You can test your extension with a launch configuration or vscode-test-web. Learn more on the docs.

[tanhakabir]

cc @egamma

[johnpapa]

Thank you for the PR! I 100% want to support github.dev with Peacock.

I’m not sure I follow the changes. Seems like the change in package.json helps it launch in the browser, but there are also a lot of testing related changes and webpack changes/additions. Can you help me understand what those are for?

[tanhakabir]

@johnpapa no worries! There's more detailed information on Web Extensions
but essentially for an extension to work on the browser it needs to be compiled into a single JS file to be loaded on vscode in the browser. This web friendly version must also only use libraries available in the browser, so none of the core node libraries like fs and path.

To do this I modified your webpack config file to output another web friendly single file compilation of your extension that has the environment of webworker to work in the browser rather than node to work in VS Code.

To let VS Code k now your extension will work in the browser, I added a browser entry point to point to the file, this is the same as main for VS Code on the machine.

I also upgraded some of the old dependencies and I used vscode-test-web to launch your extension in a Chromium instance and wanted to ignore all the files generated by that method. You can learn more about how to verify your extension works here: Web Extension Tests

I realized I made one error in the launch config to point to the appropriate web version. I'm fixing that now

[johnpapa]

I am having difficulty verifying that this works. I'll reach out directly so we can set up a time to connect.

[johnpapa]

@all-contributors please add @tanhakabir for code

[allcontributors]

@johnpapa

I've put up a pull request to add @tanhakabir! 🎉