Zebratic 78ebc4fffd Add Playwright-based smoke test scripts
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)
2026-07-11 02:40:06 +00:00

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)

  1. inject.css — mobile overrides for the site's existing CSS variables
  2. detector.tsMutationObserver watches for .bb-room-overlay, route changes
  3. layout.ts — reflows outer shell, mounts drawer host
  4. chat-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.

S
Description
Mobile-first browser extension for beat-battle.net (chat drawer, single-column layout, thumb-sized controls). Uses the user's existing session — no login required.
Readme 65 KiB
Languages
TypeScript 47.6%
JavaScript 37.1%
CSS 15.3%