I’ve been expanding Reading Ruler pretty aggressively lately, and this update brings in a full text‑to‑speech system, a redesigned popup UI, new controls, new shortcuts, and a bunch of internal improvements across the extension.
This post breaks down everything that changed this time around.
🔊 Text‑to‑Speech (TTS) Integration
Reading Ruler now supports page‑side text‑to‑speech. Not a browser‑level API wrapper — actual content‑script‑driven behavior that reacts to selections and input fields.
New settings added
These are now part of the shared extension config:
ttsEnabled
autoSpeakSelection
ttsRate
ttsPitch
ttsVolume
Page‑side behavior
The content script handles:
Speaking the current selection
Auto‑speaking when the selection changes
Stopping active speech
Reading text from both normal selections and text inputs/textareas
Keeping all TTS settings synced with storage
Shortcut support
Ctrl+Shift+S → Speak selected text
Files touched
popup.ts
content.ts
manifest.json (added tabs permission)
🎨 Popup UI + UX Redesign
The popup went from a simple stacked form to an actual structured interface. This makes the TTS controls usable and gives the extension a more coherent feel.
Layout changes
Hero header
Separate cards for Ruler + TTS
Shortcut section
Clear primary/secondary actions
New TTS controls
Enable/disable TTS
Auto‑speak toggle
Rate slider
Pitch slider
Volume slider
Speak Selection button
Stop button
Live status message (success/error/info)
Styling updates
Larger popup
New color system + gradients
Glass‑style panel
Custom switches
Metric chips
Better spacing + hierarchy
Styled status states
Shortcut pills
Safari‑compatible -webkit-backdrop-filter
Files touched
popup.html
popup.css
popup.ts
🛠️ Build Outputs + Validation
Rebuilt all compiled JS + sourcemaps
Fixed the popup CSS error
TypeScript build completed cleanly (npm run build)
Files touched
content.js
content.js.map
popup.js
popup.js.map
✔️ Summary
This update adds:
Full TTS support
Auto‑speak behavior
Input‑field reading
A new keyboard shortcut
A redesigned popup UI
New controls + status messages
A full styling overhaul
Manifest permission updates
Clean builds and fixed CSS
If you’re using Reading Ruler for accessibility or focus, this update makes the extension significantly more capable and much nicer to interact with. I've been putting a lot of work behind this and now there's 13 people who have downloaded it and its not much but i think that's pretty cool you can find it with the link here ->Reading Ruler v1.2 if you would like to give it a shot and id love any good critiques and tips and tricks
Top comments (0)