Can TextDocumentContentProvider HTML/JScontent talk to an the extension's code?

Question

I'm building a Visual Studio Code extension. This extension has a TextDocumentContentProvider that is displayed with the vscode.previewHtml command.

I want this provider to show the result of my compiled code. That seems trivial. However, because my extension also has a debugger; I want the extension context (or better yet, the debugger context) to be able to talk to that preview tab's code. That way, the debugger can update the tab (sending recompiled data to it) and maybe get some data back for status.

Is there any way to do it without a server of some sort? I suppose I could have a net server running from the extension context (since it's Node) and a client of some kind in the preview HTML that connects to the server in a port specified by the preview tab schema uri, but it seems a bit cumbersome.

I normally find answers to VSC extension development questions (and references/examples) by searching for extensions with similar features on GitHub, but I can't find any extension that quite does that (including Microsoft's two TextDocumentContentProvider samples).

So, does anyone know of an easy way to do that, or if it's possible at all? (Or any extension that does that that I can investigate).

(Edit) I'm leaning towards using a Node WebSocket server (at the extension level) and WebSocket client (at the preview HTML level), which is what the LaTeX preview extension does for real time preview updates. Seems very possible and likely enough for me, but a bit of a workaround since I'll have to establish my own serialized protocol for actions. Having a similar JS context of the ability to communicate with VSCode commands (not just commands-as-links) would be better, if at all possible.

Answer 1

Edit (2018-11-01): This is now possible with the new webview API. See Matt Bierner's answer above for a real solution to the problem. The following answer is now outdated.

---

After much investigation, it turns out there's no normal way to communicate between the extension/debugger code and the preview (webview) context.

Currently available features are:

• Updating the content provider, which calls a re-render of the preview content
• Calling vscode commands from the preview content via HTML links that need to be clicked
• Calling vscode commands from the preview content by injecting links
• Some scroll manipulation via the editor interface

None of these are appropriate for communication with the preview tab.

For now, a WebSocket-based client/server architecture is the only way to provide bidirectional communication between the two contexts.

An extension to the preview/webview support is being investigated, so this might change in the future.

Answer 2

This is now easy to do using the webview api. Extensions can post messages to the webview content and webview can post messages back to the extension.

This sample extension demonstrates how to use the webview API and webview communication. The webview docs have much more detail on the api and webview communication as well.

Answer 3

Updating a text content provider is already built-in. Your text content provider should have an onDidChange event property. The previewHTML impl connects to that to know when an update is due. So in your extension whenever you feel the need you would call an update function of your provider which in turn triggers this even. This will then cause the previewHTML impl to trigger your provideTextDocumentContent function again where you can provide updated data.