scripts/smoke.js, scripts/probe.js, scripts/probe-inject.js,
scripts/probe-minimal.js, scripts/smoke-final.js
The smoke test verifies the Beat Pocket extension loads and injects into
beat-battle.net:
1. Service worker registers (manifest valid, MV3 wiring works)
2. Content script runs (creates #bbp-host element on document.body)
3. No JS errors thrown on the page
4. Site renders normally (PLAY button still visible)
Why Playwright instead of raw --load-extension:
- Google Chrome refuses --load-extension on the command line
- Chromium full build accepts it but hangs under --virtual-time-budget
- Playwright's launchPersistentContext properly initializes extensions
in headless mode and gives a clean Chromium without the GCM/dbus noise
- The bundled Chromium is at
/root/.cache/ms-playwright/chromium-1208/chrome-linux64/chrome
Run with: node scripts/smoke-final.js (after npm install)
Probe results from this session:
- [final:dom] #bbp-host is appended to body via ensureHost()
- [final:errors] 0 page errors
- [final:console] 0 extension-related console lines (expected: silent
happy path; logs only on phase transitions)
Beat Pocket
A browser extension that gives beat-battle.net a mobile-first UI without modifying the site itself. We never modify the site's code or call its private API — we only restyle the DOM it gives us and splice in our own components.
Status
V1 in progress. See docs/PLAN.md for full design.
- Plan
- Scaffolding (this commit)
- Build via Codex
- Smoke-test on Chromium "load unpacked"
- Package for Chrome Web Store
Scope (V1)
| Screen | Treatment |
|---|---|
Home (/) |
Single-column, big thumb buttons, sticky login chip |
| Lobby list | Card-per-room, full-width |
| In-game | Player list → top, score/timer → safe top, action bar → sticky bottom |
| Chat | NEW: bottom drawer (closed / peeking / expanded) |
| Profile / Shop / Settings / Events | Out of scope V1 — link to original site |
Out: voice, native push, anything needing permissions.
Architecture (TL;DR)
inject.css— mobile overrides for the site's existing CSS variablesdetector.ts—MutationObserverwatches for.bb-room-overlay, route changeslayout.ts— reflows outer shell, mounts drawer hostchat-drawer.ts— bottom sheet UI + chat send-bridge
The chat-drawer sends messages by dispatching synthetic events on the site's own chat textarea + button. The server-side auth, rate limit, mute, and profanity filters all stay intact — we don't poke React state.
Dev (no build step in V1)
# Load unpacked extension
# 1. Open chrome://extensions
# 2. Toggle Developer Mode
# 3. "Load unpacked" -> select extension/
# 4. Visit https://beat-battle.net
For Firefox: about:debugging#/runtime/this-firefox → "Load Temporary
Add-on" → pick extension/manifest.json.
Tech
- Vanilla TypeScript
- esbuild for the bundle (one-time build, no HMR for V1)
- MV3 (works in Chromium + Firefox 109+)
Repo
This project will be pushed to git.molberg.cloud/bonzi/beat-pocket once
the vault session is unlocked.
License
Private until first public release.