ranger
41f42f1048
David flagged 2026-06-09 night: 'when i click the settings button i go to settings but we have no back link to radio'. Real UX gap — Options was a one-way trip. The popup auto-closes on launch and the NewTab is in a different tab, so there was no obvious way back. Fix: the existing brand header (helmet + 'RangerHQ Tuner — Options' title) is now a single anchor pointing at newtab.html. Adds a small ← glyph to the left of the helmet that hover-shifts left + colour-shifts to accent green for a clear back-affordance. Same-tab navigation (just an href, no chrome.tabs.create) so the user doesn't accumulate Tuner tabs. They came IN via Options, they go OUT into the player UI in the same tab. Aria: the ← is hidden from screen readers (decorative); the title attribute on the anchor gives the accessible label. 2 files, +24 lines, 4 lines modified in existing .opt-brand block. Branch: v0.4.1-prep — not for immediate ship since v0.4.0 is still in Web Store re-review. Bundle this with light-mode + other polish into v0.5.0 OR ship as quick v0.4.1 patch after v0.4.0 clears.
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.