Reading Ruler Update - Text‑to‑Speech, Popup Redesign, and a Lot of Under‑the‑Hood Work

🔊 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 it's 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 I'd love any good critiques and tips and tricks.