Zebratic
02a90e839c
- manifest.json with MV3 config, host permissions for beat-battle.net - content/detector.ts: route + overlay observer, emits bbp:phase events - content/layout.ts: defensive mobile-first layout reflow - content/chat-drawer.ts: bottom-sheet drawer, dispatches synthetic events through site's own React-managed textarea + button (preserves auth, rate-limit, mute, profanity guards) - content/util/selectors.ts: text- and role-based fallback chain - content/util/ws-proxy.ts: lightweight WebSocket instrumentation, no payload capture - content/inject.css: mobile overrides using site's existing --bb-* vars - background.js: MV3 service worker stub - package.json + tsconfig.json + esbuild.config.mjs: build pipeline - icons/: 16/32/48/128 placeholder PNGs (chili-red disc) - docs/PLAN.md: full V1 architecture, risks, scope - README.md: scope, dev workflow (load unpacked), tech
69 lines
2.1 KiB
Markdown
69 lines
2.1 KiB
Markdown
# Beat Pocket
|
|
|
|
A browser extension that gives [beat-battle.net](https://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`](./docs/PLAN.md) for full design.
|
|
|
|
- [x] 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.ts`** — `MutationObserver` 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)
|
|
|
|
```sh
|
|
# 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.
|