AudioScroll TTS & Export: Engineering a Browser Reader Extension
Modern web articles are often cluttered with distracting banners, tracking scripts, and erratic layouts. AudioScroll TTS & Export is a high-performance browser extension engineered for Edge and Chrome (Manifest V3) that turns any web article into a distraction-free, audio-guided reading experience with auto-scroll and one-click MP3 export.
Under the hood, the architecture relies on a lightweight Service Worker (background.js) that manages the extension lifecycle and dynamically injects Mozilla Readability.js and content scripts only when invoked. Cross-tab message handlers automatically stop speech playback on inactive tabs when switching tabs, preventing audio overlap.
The DOM Content Engine (content.js) injects a glassmorphic floating controller, parses page typography into clean sentence boundary chunks, and hooks directly into the browser HTML5 SpeechSynthesis API. As each sentence is spoken, the engine highlights the active text segment in high-contrast yellow/indigo and computes smooth viewport centering via scrollIntoView.
Because the standard browser SpeechSynthesis API does not support direct audio file downloads, AudioScroll implements a custom MP3 audio exporter. It chunks cleaned article text into <200-character sentence segments, fetches TTS audio buffers from Google Translate TTS endpoints with rate-limit throttling, stitches the raw ArrayBuffer data into a unified byte stream, converts it to a Base64 data URI, and invokes the Chrome downloads API to export a clean .mp3 file.
Productionization & Paywall Blueprint: To monetize AudioScroll into a SaaS platform, we employ a Freemium + Metered Paywall. The Free tier offers unlimited local OS speech synthesis + 3 MP3 exports/month. The Pro Tier ($4.99/mo) unlocks unlimited MP3 exports, OpenAI (tts-1-hd) / ElevenLabs neural voices, position sync across devices, and Redis edge audio caching (indexing generated audio by article URL hash to keep API costs near zero). Stripe Customer Portal and Supabase Auth manage subscriber access via chrome.identity JWT tokens.
Competitive Differentiation & Go-To-Market: Unlike Speechify ($140/yr) which is heavy and expensive, or Readwise Reader ($9.99/mo) which locks users into a dedicated app wrapper, AudioScroll provides a zero-bloat inline browser controller. Growth is driven via Hacker News ("Show HN"), Product Hunt, and a viral 2-second audio watermark on free MP3 exports ("Generated by AudioScroll.com") that turns exported audio files into organic referral channels across podcast apps.
Source code is available on GitHub at https://github.com/PatilSac/Exten. Store release for Microsoft Edge Add-ons is currently in preparation.
System Architecture & Data Pipeline Diagram
Click Image to Zoom
Figure 1: Manifest V3 Data Flow and Audio Buffer Transfer Pipeline
Live Text-to-Speech & Auto-Scroll Execution Pipeline
User Action / Event
User clicks toolbar extension icon on active tab. Invokes chrome.action.onClicked.
Service Worker Injection
background.js dynamically injects Readability.js, content.js & styles.css.
DOM Extractor & Chunker
Parses paragraph tags (<p>, <h1>) and splits text using regex sentence boundary rules.
HTML5 Speech Engine
Passes sentence queue to window.speechSynthesis.speak() with male/female voice selector & 0.5x-2x speed control.
Active Sentence Highlight
Applies high-contrast yellow/indigo active background class to currently spoken DOM node in real-time.
Viewport Auto-Scroll Drive
Triggers element.scrollIntoView({ behavior: "smooth", block: "center" }) to maintain focus.
Background MP3 Audio Export & Buffer Stitching Pipeline
Export Trigger
content.js collects article text and sends exportAudio message to service worker.
Sentence Segmentation
Splits full text into array of small sentence chunks under 200 characters each to fit TTS endpoint payload constraints.
Throttled Fetch Loop
Queries Google TTS endpoint asynchronously for each chunk with 600ms artificial delay to prevent rate limits.
Uint8Array Buffer Stitching
Collects MP3 ArrayBuffer fragments and concatenates them into a single continuous binary byte array in memory.
Base64 Data URI Conversion
Encodes stitched byte array to data:audio/mpeg;base64,... URI string.
Local MP3 File Save
Triggers chrome.downloads.download({ filename: "article_audio.mp3" }).
Interactive Extension Screenshots
Click Any Image for Full Screen
Floating Glassmorphic Reader Toolbar
Full-Screen Distraction-Free Reader Mode
Productionization, Paywall Architecture & GTM Playbook
📊 Competitor Matrix & AudioScroll Positioning
| Platform | Pricing | Key Strengths | Weaknesses & Our Differentiation |
|---|---|---|---|
| Speechify | $139.99/yr (~$11.58/mo) | Celebrity AI voices, heavy marketing budget. | Aggressive paywall popups, locked app ecosystem, no raw MP3 downloads. AudioScroll Edge: Lightweight inline widget, 1-click standalone MP3 export, native OS speech fallback. |
| Readwise Reader | $9.99/mo | RSS reader, highlights, read-it-later sync. | Requires reading inside their custom app wrapper. AudioScroll Edge: Works directly on active web pages without app migration. |
| NaturalReader | $9.99 – $19/mo | Established in accessibility & education. | Dated UI/UX, restrictive download caps. AudioScroll Edge: Modern glassmorphic toolbar, zero-latency local execution, open byte-stitching pipeline. |
💳 Metered Paywall Architecture & Cloud Infrastructure
Local OS Speech Engine
Unlimited in-browser reading using client-side OS SpeechSynthesis API + 3 MP3 exports/month. Requires zero backend API compute cost.
Neural Voices & Unlimited MP3
Unlocks OpenAI (tts-1-hd) & ElevenLabs HD voices, unlimited MP3 exports, and multi-device position sync via Supabase Auth & Stripe API.
Redis Edge Audio Cache
Generated MP3 buffers are indexed by article_url_hash in S3/Redis. If multiple users export the same article, server returns cached MP3 instantly for $0 API cost.
📣 Go-To-Market & Growth Engine
01. Developer & Launchpad
Product Hunt & Hacker News ("Show HN") launch emphasizing open architecture, no bloated reader apps, and $4.99 vs $140 Speechify pricing.
02. Product-Led Growth (PLG)
Free tier MP3 exports include a 2-second audio watermark at the end (*"Generated by AudioScroll.com"*), driving viral organic discovery in podcast apps.
03. B2B Publisher Licensing
Selling embeddable "Listen to Article" JS widgets to blogs and online magazines for $29/month subscription fee.
Video Walkthrough Status
Full video demonstration & voice tutorial is currently in post-production and will be published shortly.