MiTube
Chrome extension that syncs YouTube playback across multiple browsers by joining a room code over WebSocket.
A Chrome MV3 extension paired with a Node.js/Express backend that lets you watch YouTube videos in perfect sync across multiple browsers and devices, all joined by a short room code over WebSocket.
- TypeScript
- React 19
- Chrome Manifest V3
- CRXJS
- Tailwind CSS v4
- Express.js
- WebSocket (ws)
- MySQL 2
- Zod
- Node.js 20+
- Vite
- Vitest
MiTube is a synchronization bridge for YouTube: you create a room (or join a friend's), and every play/pause/seek across all connected browsers happens in lock-step. The extension sits on top of YouTube's player with minimal friction—no player replacement, no iframe breaks, just surgical script injection and playback control.
The architecture splits cleanly: @mitube/shared exports Zod schemas and time-sync math (both used by browser and server); @mitube/server runs Express + raw WebSocket over MySQL-backed rooms (no ORMs, direct queries for speed); @mitube/extension uses CRXJS to build a Manifest V3 bundle with React 19 in a side panel, Tailwind v4 styling, and three content scripts that inject into YouTube's page, the onboarding landing page, and your browser tab's background context. A custom port-based IPC protocol (not window messages) connects extension background, content, and popup cleanly, dispatching mutations down to the Room model and broadcasting snapshots back up.
The sync strategy is subtle: each client sends a burst of time-sync packets on reconnect, measuring clock offset using the server as NTP arbiter. Playback commands get timestamp-adjusted so they land consistent across geographies and latencies—a PAUSE from you arrives on your friend's screen at the same server-relative millisecond, not relative to your ping. The extension queues volatile messages (play/pause/seek) while offline and drops stale ones on flush; durable messages (queue edits) replay indefinitely. The server handles ad-interrupt state (telling all clients to freeze until the ad-watcher clears it) and auto-promotes a host if the current one disappears.
- NTP-style clock offset calculation so playback syncs to server time, not peer ping—clients compute offset from 5 round-trip samples and apply median filtering for stability.
- Active-tab election: only one YouTube tab at a time can control playback in a room, avoiding fights between tabs; users manually promote a tab via right-click context menu or it auto-elects on join.
- LAN-native sharing—detects the host's LAN IP, builds an extension zip with that IP baked into the manifest, and generates a QR link so friends can install from the landing page without source repository access.
- Message queuing with TTL replay—volatile commands (play/pause/seek) expire after 2 seconds if not delivered; structural mutations (queue adds/reorders) queue indefinitely until flushed or replayed on reconnect.
- Graceful offline resilience—extension continues accepting user input while disconnected, accumulates intents up to 500 deep, filters on reconnect, and re-syncs time burst on socket reconnect.