TypeFox/vscode-messenger

RPC messaging library for the VS Code extension platform

Summary

vscode-messenger is a TypeScript RPC messaging library that simplifies communication between VS Code extensions and their webviews. It provides typed request/notification handlers, request cancellation, broadcast support, and a companion devtools extension for inspecting live message traffic. The library is split into three packages so the extension host, webview script, and shared message-type definitions stay cleanly separated.

What it is useful for

VS Code extension authors who build custom editors, side panels, or panels backed by webviews (vanilla TypeScript or React) typically hand-roll postMessage plumbing, which becomes brittle once multiple views, request/response pairs, and cancellation are involved. This library replaces that glue with a small Messenger class on each side, with the contract defined in a shared module using RequestType<P, R> and NotificationType<P>. Use cases covered in the README include:

• Calling into a webview from the extension and awaiting a typed result (e.g. asking a view for a selected color and inserting a snippet).
• Letting a webview call back into the host extension (e.g. fetching a list of available colors).
• Notifying a specific view type, a single view instance, or broadcasting to all opted-in views.
• Cancelling long-running requests via a vscode.CancellationToken on the host or an AbortController on the webview side.
• Debugging with the separate VS Code Messenger Developer Tool extension, which visualizes live requests, responses, and notifications.

How engineers can use it

Install only the packages each side needs, as documented in the README:

On the extension side, instantiate new Messenger(), register a view with messenger.registerWebviewView(webviewView), then call onNotification / onRequest to handle messages and sendNotification / sendRequest to target a view, a view group, or BROADCAST. For broadcasting, the README notes that each webview must be opted in via broadcastMethods on registration, otherwise it will not receive the notification.

On the webview side, construct new Messenger() (it calls acquireVsCodeApi() automatically), call messenger.start() before any incoming messages will arrive — the README explicitly warns that skipping this causes messages to be silently dropped — and use sendExtensionRequest / sendExtensionNotification as shorthand for talking to the host. For React, the README recommends creating one Messenger at module scope and registering handlers inside a useEffect whose cleanup disposes them, so that StrictMode's double-mount and HMR do not leave duplicate handlers behind (a second onRequest for the same method throws).

For debugging, expose messenger.diagnosticApi() from your extension's activate return value, then open Developer: Open vscode-messenger devtools from the Command Palette. A full example showing a WebviewView and a WebviewPanel sharing one Messenger lives in examples/calico-colors.