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

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