Overview

The Webreader reads web content aloud using the ABAIR Irish-language TTS API, with browser speech synthesis as a fallback. It highlights text as it plays and is aimed at users with visual impairments, dyslexia, or cognitive fatigue.

One source tree, two deliverables:

Deliverable	Runs on	Manifest
Browser extension	Chrome, Edge, Brave (MV3); Firefox (MV2)	manifest.json / manifest-firefox.json
Embed widget	Any site via <script src="https://webreader.abair.ie/script.js">	served by the embed server

Both share the content scripts, chunker, highlighter, and i18n. Only the host glue differs.

What users get

A draggable floating panel that lets them:

• Read the whole page — Readability extracts the main article and reads it top-to-bottom.
• Read a selection — highlight text, press play.
• Navigate — Alt+→/← for sentences, Alt+↓/↑ for paragraphs.
• Control playback — Alt+P play/pause, Alt+S stop, Alt+]/[ speed.
• Watch text highlight as audio plays (background, underline, or outline; colorblind presets).
• Pick voice + dialect — Conamara, Donegal, Kerry, Waterford; male and female.
• Switch UI language between English and Irish.

The extension exposes a full settings page for highlight style, panel opacity, prefetch, accessibility, and shortcuts. The embed widget exposes a subset via window.WebReaderConfig — see Production → Embed Server.

How reading works

1. Pick a content container (<main>, <article>, etc.).
2. Collect readable elements, split each into chunks.
3. Send chunks to the TTS API one by one; prefetch the next two.
4. Play through Web Audio API; highlight tracks via XPath back to the DOM.
5. Fall back to SpeechSynthesis if the TTS API is unreachable.

How a page is marked up directly affects how it sounds — read Architecture before integrating.

Useful Links

Description	Link
Production embed	https://webreader.abair.ie
GitHub repository	https://github.com/phonlab-tcd/web_reader_extension
ABAIR TTS API	https://synthesis.abair.ie/api/synthesise
Chrome Web Store listing	(internal — ask the team)
Firefox Add-ons listing	(internal — ask the team)
Translations Editor	Translations Editor

Where to go next

If you're…	Start here
Modifying the codebase	Architecture → Extension
Adding the widget to another site	Production → Embed Server
Debugging or polishing UX	Architecture
Shipping a release	Extension (manual) or Embed Server (auto)

Last updated 2026-05-29