ranger
b82f14ee7b
The 'pick a station to begin' state was too subtle on first install
(David's own 30-second panic moment when he uninstalled the dev build
and reinstalled from the Web Store, 2026-06-09 evening).
Two layered cues, both pure CSS driven by a body.is-first-run class:
1. Subtle accent-green glow pulses around:
- popup: the station list section
- newtab: the Quick Stations chip row
(rgba alpha 0.18-0.25, 2.4s ease-in-out infinite — visible but not noisy)
2. Bouncing ↓ arrow appended to the 'Pick a station to begin' text in
both surfaces (after-pseudo with translateY animation).
The is-first-run class is toggled in popup.js + newtab.js via a new
reflectFirstRunHint() function called from:
- init() once stations + currentStation are resolved
- onPickStation() the moment a user picks
- the chrome.storage.onChanged listener when another surface picks
(so the hint disappears on both surfaces simultaneously)
Existing users with stored currentStationId never see either cue —
the class only attaches when currentStation is null.
Working on branch v0.4.0-prep so the live main (= what shipped to
Web Store v0.3.0) is unchanged. Merge to main when ready to bump the
manifest version + readme.txt + CHANGELOG.md for v0.4.0 release.
RangerHQ Tuner
🎉 Install from the Chrome Web Store →
Lightweight indie internet radio player for Chrome. Plays SomaFM in any browser tab. Manifest V3, vanilla JS, no telemetry.
Sibling to rangerhq-radio (the WordPress version).
Tier 1 — MVP (current)
- ✅ Manifest V3 + Offscreen API audio
- ✅ Loads all SomaFM channels from
channels.json - ✅ Pick a station, click Play, audio runs in background
- ✅ Volume + state persisted across popup open/close
- ✅ Catalogue cached 6h in
chrome.storage.local - ✅ Source-adapter pattern in place for future networks
Install (developer mode)
- Open
chrome://extensions - Toggle Developer mode on (top right)
- Click Load unpacked → pick this folder (
rangerhq-tuner/) - Pin the extension to your toolbar (puzzle icon → pin)
- Click the toolbar icon → pick a SomaFM station → ▶ Play
Project layout
rangerhq-tuner/
├── manifest.json
└── src/
├── background/service-worker.js # message router, no audio here
├── offscreen/offscreen.{html,js} # the <audio> element host (MV3 needs this)
├── popup/popup.{html,css,js} # the toolbar UI
├── sources/ # extensibility seam
│ ├── base-source.js # RadioSource interface (JSDoc)
│ ├── somafm.js # first concrete adapter
│ └── index.js # registry
├── lib/ # shared utilities
└── assets/icons/ # 16/32/48/128 PNGs
License
GPL-2.0-or-later — matches the rest of the RangerHQ family.