A few years ago I developed Nightlight for Visual Studio Code that switches the color theme based on the time of day. By providing your GPS coordinates, you can use it to automatically switch to dark mode when the sun sets and switch to light mode when the sun rises.

Over the years VS Code has transformed into almost a de facto standard when it comes to (code) editing. With extensions, like Nighlight, you can basically transorm it into a full-fledged IDE. Since it has been largely built using Web technologies, it would’ve always been theoritically possible to have a version running in your browser. That day has now come, with vscode.dev and github.dev, you can use VS Code without having to install it.

Extensions also work, but not always right out the box. Some work has to be done. And, luckily, this summer a pull request for Nightlight came in. Someone did the research and made Nightlight ready to be built for the Web. Let me take you through the main tasks you’d have to perform in order to transform your regular extension into a Web extension.

1. Add Webpack

For building the VS Code extension for the Web. The build system relies on Webpack. Add it to your project:

npm install --save-dev webpack webpack-cli ts-loader

2. Add the browser entry point to the package.json

The package.json already has a main entry. Next to that, you can add your browser entry point:

"browser": "./out/web/extension.js",

It points to the same file, only it is now also found in the /out/web/ directory.

3. Add two scripts

To be able to build the extension, add these two scripts to your package.json:

scripts: {
  ...
  "compile-web": "webpack --mode production --devtool hidden-source-map",
  "watch-web": "webpack --watch",
  ...
}

and then alter the vscode:prepublish script

"vscode:prepublish": "npm run compile && npm run compile-web",

4. Make necessary changes to your main file.

Nightlight did not require any changes, because it only uses API’s that are also available on the Web. If your extension uses different API’s, like the file system. It is good to go through this list of recommendations.

5. Create a webpack.config.js

VS Code uses WebPack to pack your complete extension into a single file that will be loaded by the browser. The webpack.config.js for Nightlight is close to the default provided in the docs.

6. Test your extension

There are three ways to now test your extension:

  1. Test normally using VS Code for the desktop, like you did before;
  2. Test it inside a browser running on localhost;
  3. Test it on vscode.dev.

I recommend to test all three cases, but at least option 1 and 2. For the second option, some additional configuration is required. First you’d have to install another package:

npm install --save-dev @vscode/test-web

And then add one more script to your package.json

scripts: {
  ...
  "open-in-browser": "vscode-test-web --extensionDevelopmentPath=. ."
  ...
}

To trigger the Web version from VS Code you may want to add a new launch configuration to your launch.json:

{
  "name": "Run Web Extension in VS Code",
  "type": "pwa-extensionHost",
  "debugWebWorkerHost": true,
  "request": "launch",
  "args": [
    "--extensionDevelopmentPath=${workspaceFolder}",
    "--extensionDevelopmentKind=web"
  ],
  "outFiles": [
    "${workspaceFolder}/out/web/**/*.js"
  ],
  "preLaunchTask": "npm: watch-web"
}

That should do it! If everything works as you’d expect, you can publish your extension and then install it in VS Code for the Web. Once you’re there, give Nightlight a spin.

To conclude, a quick tip: did you know that when you press dot (.) when you’re viewing a GitHub repo, it automatically opens the repository in VS Code for the Web?!