Media
1 item
Description
Read tweets aloud with word highlighting, thread reading, keyboard shortcut (Alt+S), and smart text cleaning. # Tweet Reader A Chrome extension that reads tweets aloud using the Web Speech API. Adds unobtrusive buttons to every tweet on X (formerly Twitter) for single-tweet and full-thread reading, with real-time word highlighting as it speaks. ## Features ### Read Single Tweet Click the `🔊` button on any tweet to hear it read aloud. Click `⏹` to stop. ### Read Entire Thread Click the `📖` button to read all visible tweets on the page sequentially. The currently-reading tweet is highlighted with a blue left border and auto-scrolled into view. ### Word-by-Word Highlighting As a tweet is read aloud, each word is highlighted in real time so you can follow along visually. ### Keyboard Shortcut Press `Alt+S` to read the tweet you're hovering over. If no tweet is hovered, the tweet closest to the center of the viewport is read instead. ### Smart Text Cleaning - **Emoji stripping** — Emojis are removed before speaking so the voice doesn't try to narrate them. - **Hashtag cleaning** — The `#` symbol is stripped from hashtags so the voice says "trending" instead of "hashtag trending". ## Installation 1. Clone the repository: ```bash git clone git@github.com:Ncastro878/tweetreader.git ``` 2. Open Chrome and navigate to `chrome://extensions`. 3. Enable **Developer mode** (toggle in the top-right corner). 4. Click **Load unpacked** and select the `tweet-reader` directory inside the cloned repo. 5. Navigate to [x.com](https://x.com) — the extension activates automatically. ## Project Structure ``` tweetreader/ ├── tweet-reader/ │ ├── manifest.json # Chrome extension manifest (Manifest V3) │ └── content.js # All extension logic (injected into x.com pages) ├── .gitignore └── README.md ``` The extension is intentionally kept minimal — two files, no build step, no background scripts, no external dependencies. ## How It Works - A `MutationObserver` watches for new tweets added to the DOM (infinite scroll, navigation) and injects the reader buttons into each tweet's action bar. - Speech is handled entirely through the browser's built-in [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) (`SpeechSynthesisUtterance`). - Word highlighting uses the `onboundary` event fired by the speech engine to track which word is currently being spoken. ## Browser Support Chrome (desktop). Requires the Web Speech API, which is supported in all modern Chromium-based browsers. ## License MIT