mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-08-06 09:27:44 +00:00
KoalaDev
d26b95985d
The card was rendered in every room with a "Guest" badge by default — confusing in normal rooms, and outright misleading against a relay that doesn't yet support host control (older server omits hostPeerId, so amHost is always false and nobody is ever recognized as host). Now the card shows only when it's meaningful: the host always sees it (to toggle host-only), a guest sees it only while host-only is active, and it's hidden in a normal "everyone" room and whenever the server doesn't advertise hostPeerId (feature unavailable). Thread hostPeerId through updateHostControlUI to detect server support. Note: the feature still requires the relay to run the host-control server code; this just makes the client degrade cleanly instead of showing a stray "Guest". Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
KoalaSync Browser Extension
A Manifest V3 Browser Extension (Chrome & Firefox) for synchronized video playback across any website.
Key Features
- Manifest V3: Optimized Service Worker architecture with session persistence.
- Pure Vanilla JS: No external dependencies or heavy libraries.
- Smart Peer IDs: Hexadecimal IDs combined with customizable Usernames for easy identification.
- On-Demand Connection: The service worker only maintains a WebSocket connection while you're in a room. No persistent background connections — privacy-first architecture. Based on
connectIntentflag that gates all reconnect attempts. - Live Diagnostics: Built-in "Dev" tab for real-time video state debugging (ReadyState, CurrentTime, etc.).
- Dynamic i18n (Multi-Language): Fully localized in 13 languages (
en,de,fr,es,it,pl,tr,nl,ja,ko,pt-BR,pt,ru) with auto-detected fallback and dynamic on-the-fly language selectors.
Tab Overview
- Room: Manage connections, view active peers, and share invitation links.
- Sync: Control video playback (Play/Pause/Force Sync) and view recent activity.
- Settings: Customize your Username, toggle domain-based Noise Filtering, and switch the App Language.
- Dev: Monitor connection status and view real-time video element metadata for debugging.
Privacy & Permissions
KoalaSync requires <all_urls> permission to detect and interact with video elements (<video>) on websites.
- No Browsing History: We do not track or store your browsing history.
- State Management: Sensitive data (Room Passwords) is stored locally using
chrome.storage. - Zero Telemetry: No analytics or external tracking scripts.
- Zero Runtime Dependencies: The extension is built with pure Vanilla JS and contains no external libraries or tracking scripts, ensuring performance and privacy.
Installation
- Prepare Extension: From the repository root, run:
npm run build:extension - Open Chrome and go to
chrome://extensions/. - Enable Developer mode (top right).
- Click Load unpacked and select the
dist/chromefolder.
Development
If you modify shared/constants.js, you must synchronize the changes by running the build script from the root:
npm run build:extension
This ensures that the extension/shared folder is updated with the latest protocol constants.
Module Structure
| File | Purpose |
|---|---|
background.js |
Service worker: message routing, tab listeners, startup |
content.js |
Video detection, audio processing, episode transition (IIFE) |
popup.js |
Popup UI: join/create, tabs, status, settings |
bridge.js |
Landing page bridge (injected into sync.koalastuff.net) |
episode-utils.js |
Shared extractEpisodeId() / sameEpisode() — used by background.js, injected into content.js at build time |
i18n.js |
Translation loader |
shared/ |
Constants, blacklist, name generator |