{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreifhpql6yyhfdu5d5cyjtyhzjs7scwne3s6xyrxn7bkfsxcbeifrjm",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3mpuvmwsxach2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreichohqgrsbabsx2xljqqatrzatbkwv4zhnn4tif252i5bvel2jvvu"
    },
    "mimeType": "image/webp",
    "size": 76928
  },
  "path": "/codebunny20/reading-ruler-update-text-to-speech-popup-redesign-and-a-lot-of-under-the-hood-work-2bk7",
  "publishedAt": "2026-07-05T05:44:45.000Z",
  "site": "https://dev.to",
  "tags": [
    "extensions",
    "webdev",
    "devpride",
    "trans",
    "Reading Ruler v1.2"
  ],
  "textContent": "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.\n\nThis post breaks down everything that changed this time around.\n\n🔊 Text‑to‑Speech (TTS) Integration\nReading 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.\n\nNew settings added\nThese are now part of the shared extension config:\n\nttsEnabled\n\nautoSpeakSelection\n\nttsRate\n\nttsPitch\n\nttsVolume\n\nPage‑side behavior\nThe content script handles:\n\nSpeaking the current selection\n\nAuto‑speaking when the selection changes\n\nStopping active speech\n\nReading text from both normal selections and text inputs/textareas\n\nKeeping all TTS settings synced with storage\n\nShortcut support\nCtrl+Shift+S → Speak selected text\n\nFiles touched\npopup.ts\n\ncontent.ts\n\nmanifest.json (added tabs permission)\n\n🎨 Popup UI + UX Redesign\nThe 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.\n\nLayout changes\nHero header\n\nSeparate cards for Ruler + TTS\n\nShortcut section\n\nClear primary/secondary actions\n\nNew TTS controls\nEnable/disable TTS\n\nAuto‑speak toggle\n\nRate slider\n\nPitch slider\n\nVolume slider\n\nSpeak Selection button\n\nStop button\n\nLive status message (success/error/info)\n\nStyling updates\nLarger popup\n\nNew color system + gradients\n\nGlass‑style panel\n\nCustom switches\n\nMetric chips\n\nBetter spacing + hierarchy\n\nStyled status states\n\nShortcut pills\n\nSafari‑compatible -webkit-backdrop-filter\n\nFiles touched\npopup.html\n\npopup.css\n\npopup.ts\n\n🛠️ Build Outputs + Validation\nRebuilt all compiled JS + sourcemaps\n\nFixed the popup CSS error\n\nTypeScript build completed cleanly (npm run build)\n\nFiles touched\ncontent.js\n\ncontent.js.map\n\npopup.js\n\npopup.js.map\n\n✔️ Summary\nThis update adds:\n\nFull TTS support\n\nAuto‑speak behavior\n\nInput‑field reading\n\nA new keyboard shortcut\n\nA redesigned popup UI\n\nNew controls + status messages\n\nA full styling overhaul\n\nManifest permission updates\n\nClean builds and fixed CSS\n\nIf 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",
  "title": "Reading Ruler Update — Text‑to‑Speech, Popup Redesign, and a Lot of Under‑the‑Hood Work"
}