Skip to content
Back to Project Archive

Read Aloud

MV3 Chrome extension v4.0.0 — chrome.tts article reading, CSS Highlight API, skip controls, 59 tests. Not Web Speech API, not Web Store yet.

Read Aloud Logo
// PROJECT_ID
readaloud_chromeextension
// AUTHOR
DHAATRIK CHOWDHURY
// SUBJECT
CASE STUDY
// CLASSIFICATION
PUBLIC // OPEN
// TELEMETRY
STATUS: SHIPPED // MV3: COMPLIANT // TESTS: 59_141
// IMPACT.LOG
// FUCKUP_LOG
RECORDED
[ FUCKUP LOG ]  I tried memory-only state in an MV3 service worker until Chrome killed it mid-article — v4 backs playback up to chrome.storage.session and the test suite caught regressions.

SYS.STATUS: v4.0.0 shipped — chrome.tts, smart extraction, highlight + skip, CI tested

Read Aloud converts web articles into offline audiobook-style playback. It extracts main content, speaks via chrome.tts, highlights the active sentence with the CSS Custom Highlight API, and supports keyboard skip controls — no cloud TTS, no signup.

This page corrects portfolio copy that said Web Speech API. The extension uses Chromium’s chrome.tts engine and Intl.Segmenter for sentence boundaries.

What it is (scope)

SurfaceWhat you do there
ExtractionArticle/main heuristics; read selected text only
PlaybackPlay/pause/stop; continues after popup closes
HighlightNon-destructive sentence highlight (with fallback)
ShortcutsAlt+Shift+P play/pause; Left/Right skip sentences
Storagechrome.storage.sync preferences; session playback backup

Stack: MV3 service worker, vanilla JS, QUnit + Playwright, ESLint 9, GitHub Actions CI.

Tests: 59 tests, 141 assertions — lint → test → versioned zip artifact.

Who I built it for

  • Long-form readers who want eyes-free article consumption
  • Privacy-conscious users refusing cloud TTS uploads
  • Developers studying MV3 TTS + extraction patterns

Not for: non-Chromium browsers, guaranteed CMS extraction on every site, or one-click Web Store install (not published yet).

Fuckups & learnings

  • Wrong API name on portfolio. chrome.tts ≠ generic Web Speech API in extension architecture.
  • MV3 worker kills broke playback. Session storage backup + tests for persistence — v4 upgrade.
  • Segmentation quality matters. Intl.Segmenter handles abbreviations better than naive splits.
  • Voice quality is OS-dependent. Speed slider helps; voices vary by platform.

Honest limitations

LimitationReality
Chromium-onlyChrome extension APIs
No Web Store yetUnpack install from repo / CI zip
Heuristic extractionOdd CMS layouts can fool selectors
Restricted pageschrome:// and similar blocked with error UI

Deep-dive transmissions

  1. Why Read Aloud — article TTS without cloud APIs

Run it locally

git clone https://github.com/dhaatrik/ReadAloud_ChromeExtension.git
cd ReadAloud_ChromeExtension
npm install && npm test
# chrome://extensions → Developer mode → Load unpacked (select repo folder)

Closing transmission

Small utility, heavy test discipline. Load it, break extraction on a weird site, file an issue. Start with why-and-what.