Provide documentation on how to write extensions in GitHub.dev

[alefragnani]

Does this issue occur when all extensions are disabled?: Yes/No

• VS Code Version: GitHub.dev / Safari
• OS Version: macOS Big Sur

Steps to Reproduce:

1. Open any repo in GitHub
2. Hit .
3. It will open the new VS Code in the browser
4. Go to Extensions view
5. Search for Copy Word in Cursor extension from alefragnani
6. It shows a warning The 'Copy Word in Cursor' extension is not available in VS Code Web. Learn More
7. Click the Learn More link
8. The descriptions says:

   Why is an extension not installable in the browser# There are a small number of extensions that have built-in assumptions or need to run on the desktop. Examples are when an extension accesses files from the VS Code installation on the desktop or when an extension depends on an executable that must run in a desktop environment. When you try to install such an extension in the browser, you will be informed that the extension is not available.

Notice such an extension can still be used when connecting to a Codespace from VS Code running on the desktop.

9. The point is: This extension (like others that I developed) is already working on GitHub Codespaces and the new Virtual FileSystem (which seems to be the underlying technology behind this). It does not need to run on the desktop, or access files. It's a really simple extension, both in code and dependencies.
10. So it should be available in VS Code Web, right? Or it must be updated/changed somehow to support this new environment?

Thanks in advance

[larshp]

Hi, It looks like there is an undocumented browser field in the extension manifest, https://github.com/microsoft/vscode/blob/ee1655a82ebdfd38bf8792088a6602c69f7bbd94/src/vs/platform/extensions/common/extensions.ts#L241

Add it to your package.json, much like the main field https://github.com/larshp/vscode-source-map/commit/9d31c30e77dadfd5165787d2a7f504e1d16f3fde#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R26

I managed to install my extension vscode-source-map, tho something doesn't work regarding the contributed action, one step at a time 😁

[larshp]

Also found a LSP web-enabled sample extension = https://github.com/microsoft/vscode-extension-samples/tree/main/lsp-web-extension-sample

[kieferrm]

We're in the process of updating our extension API doc to show what it needs to allow and extension to run in the web-worker extension host, i.e. right in the browser.

[larshp]

@kieferrm thanks 👍

another note, I found https://github.com/microsoft/vscode-test-web which I guess can help testing for web compatiblity

[LinqLover]

Requirements for browser compatibility are unclear to me as well. As I see it, the following features cannot be used in browser:

• run external executables (such as git or bash)
• access VS Code files (i.e., if you wanted to patch VS Code's binaries themselves like Vibrancy does)

But what is about, e.g., storing data in a file system cache? Is there already an API, or could VS Code provide one, that allows extensions to read from and write to a cross-workspace cache? For VSC on desktop, this could map to /usr/local/whatever, but for github.dev, the browser's local storage feature could be utilized.

[aeschli]

The guide for web extensions is worked on here: https://github.com/microsoft/vscode-docs/blob/vnext/api/extension-guides/web-extensions.md

Feedback is welcome!

[alefragnani]

Hi @aeschli ,

Thanks a lot for the documentation. It’s extensive but informative. Contratulations 👏

I didn’t try to update any of my extensions yet, but I read the documentation carefully and looked the updated vscode-extensions-sample repo. I think I understood the idea, but I missed one thing and I think it could be an improvement to the documentation and/or samples repo:

• A helloworld_regular_and_web_sample, because the helloworld_web_sample seems to be a web only extension
• A webpack_regular_and_web_sample, because I use Webpack (as VS Code docs suggests to use in some cases) and because I noticed the Webpack script for Web is a bit different, it would be great to have a all in one sample

Also, based on this phrase in the publishing section ( ”Web extensions are hosted on the Marketplace along with other extensions.” ), my understanding is that the web version will be a different package. Is that correct, or will vsce take care of it in a single vsce publish command?

I also looked at other web ready extensions (mostly from MS/VSCode team) which were already available at launch, and noticed these missing pieces. That’s another reason why I think those samples would help other extension developers to update their extensions.

Thank you

[aeschli]

@alefragnani Thanks for the feedback. I restructured the article to give more space for Update existing extensions to Web extensions where I can spend more words on what to do to make an extension both a node and a web extension. I try to find a good example of an extension that has a webpack file that contains both web and node that I can link to. Not sure about another sample.

my understanding is that the web version will be a different package

At the moment it's the same package . That means when a user installs an extension on disk, it contains all the bits. That's not ideal and we are working on a solution. But the idea is that vsce publish will take care of it .

[aeschli]

Closing as fixed. The guide will be part of the docs that are published once the August release is out.

[ghost]

Related question - as TypeScript can import from a JSON file, is it okay to set the main and browser manifest fields to ./themes/color-theme.json for a theme pack?

[aeschli]

I've never seen that main points to a json file. For extensions we expect this to be a commonjs JavaScript file with exports activate and optionally deactivate.