moqtap — WebTransport Inspector

DevTools extension for inspecting WebTransport connections and MoQT protocol traffic.

Features

• Intercepts all WebTransport connections on a page (main thread, workers, and iframes)
• Auto-detects MoQT protocol and draft version from wire bytes
• Decodes control messages with full field display
• Tracks tab with per-track subscription state, timing, and namespace grouping
• WebTransport datagram interception and decoding (shown in Streams tab)
• Stream content detection: JSON, CBOR, MessagePack, and ISO BMFF media (CMAF, LOC, fMP4)
• Hex viewer with inline object boundary annotations and object navigation
• Live bitrate display for active connections
• Filter toolbar for messages (active only, group by namespace, TX/RX direction) and streams (text search)
• Recording toggle and clear controls for stream data
• Stack traces for control messages and stream creation
• Export/import .moqtrace trace files
• Graceful handling of non-MoQT WebTransport connections

Development

npm install
npm run dev          # Dev mode with hot reload
npm run build        # Production build
npm run test         # Run test suite
npm run compile      # Type check

Load the built extension from .output/chrome-mv3/ in chrome://extensions (developer mode).

Adding a New MoQT Draft

When a new MoQT draft is published (e.g. draft-19), follow these steps:

1. Update @moqtap/codec

The codec package must support the new draft first. The extension delegates all message encoding/decoding to @moqtap/codec. Once the codec is published with draft-19 support, bump the dependency version in package.json.

2. Register the draft (3 files)

src/types/common.ts — Add to the SupportedDraft union type.

src/detect/draft-detect.ts — Add the wire version to VERSION_TO_DRAFT. For ALPN-era drafts (17+), also bump LATEST_ALPN_DRAFT / LATEST_ALPN_DRAFT_VERSION so detection defaults to the newest known draft when only the 0x2F00 SETUP message is visible.

If the new draft changes the CLIENT_SETUP message type ID (unlikely between minor drafts), also update detectFromControlStream().

src/codec/message-ids.ts — Import MESSAGE_ID_MAP from the new draft subpath and register it in the maps record.

entrypoints/devtools-panel/stream-framing/index.ts — Register a parser via registerDraftParser('NN', createCodecDraftParser('NN')).

3. Handle wire format changes (if any)

If the new draft changes field names in control messages, update entrypoints/background.ts extractTrackInfo() which reads fields like subscribeId, trackNamespace, trackName from decoded messages.

If data stream framing changes (header fields, object layout), the codec adapter in entrypoints/devtools-panel/stream-framing/codec-adapter.ts may need new fields surfaced as header tags.

4. Update tests

Add the new wire version to src/detect/draft-detect.test.ts to verify detection works.

5. Build and verify

npm run test         # All tests pass
npm run build        # Bundle includes new draft support

Currently supported drafts: 07 through 18.

Architecture

Page JS -> content.ts (MAIN world, hooks WebTransport)
        -> bridge.content.ts (ISOLATED world, relays messages)
        -> background.ts (service worker, detects draft, decodes, records)
        -> DevTools panel (Vue 3 UI)

Key modules:

• src/detect/ — Draft auto-detection from CLIENT_SETUP wire bytes
• src/codec/ — Multi-draft facade over @moqtap/codec
• src/session/ — Session state machine (delegates to codec)
• src/trace/ — .moqtrace recording and export
• src/intercept/ — WebTransport constructor monkey-patching

License

MIT