Extending VSCode, custom UI

Question

I'm trying to write an extension for visual studio, but I'm completely new to typescript and visual studio code.
In fact I'm trying to write an extension similar to activate-power-mode for atom :

All the logic is already implemented but I can't find how I could go about creating custom UI and if it's even possible with a simple extension.

Answer 1

There's a Webview API that you can use to create non-standard UI using typical HTML/CSS/JS stack. Here's the actual quote from the original doc:

Webviews can ... be used to build complex user interfaces beyond what VS Code's native APIs support.

And here's a demo of potential opportunities:

Answer 2

No, this isn't possible with VS Code's extension model. Extensions run in a separate process and only have access to the editor via specific APIs. See https://code.visualstudio.com/docs/extensions/our-approach