ranger
529409eed9
David flagged 2026-06-10: '14 stations wraps 3 lines, original idea was 2 lines tidy, but now thought of user selecting themselves' + 'maybe have a description of each station' + 'be great to keep the code clean.' Architecture: pure data, not code. Adds tuner.quickStations as a new chrome.storage.local key. Default 8 (tidy 2-row layout per the v0.4.0 picks). User can pick any subset of the 46 SomaFM channels via a new Options page card. NEW FILE src/lib/quick-stations.js — DEFAULT_QUICK_IDS + storage helpers (getQuickStations, setQuickStations, resetQuickStations) with the same defensive 'fall back if chrome.storage missing' pattern as history.js + theme.js. CHANGED src/newtab/newtab.js — removed hardcoded QUICK_IDS array, replaced with module-level 'let quickIds = []' populated during init from getQuickStations() + re-loaded when chrome.storage.onChanged fires on tuner.quickStations. renderQuick() now uses module-level quickIds and shows 'No Quick Stations picked — set some in Settings' empty state if the array is empty. src/options/options.html — new 'Quick Stations' card between Appearance and Playback. Contains: helper text + selected-count badge + scrollable <ul> + Reset-to-defaults button. src/options/options.css — ~90 lines for the new picker: scrollable list (max-height 360px), checkbox-name-description row layout, accent-coloured count badge, subtle hover background, brand-styled scrollbar. src/options/options.js — initQuickStationsUI() reads cached channel list from tuner.stationsCache, sorts alphabetically, builds one row per channel with checkbox + name + genre pill + description. Toggle handler writes the current pick set to chrome.storage.local. Reset button confirms then calls resetQuickStations() + re-checks boxes to match defaults. Cross-surface sync via storage.onChanged re-syncs check state if changes happen elsewhere. 5 files (1 new), ~250 lines added. No new permissions, no new dependencies.
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.