ElevenPage Reader is a Chrome Extension that transforms any web page into an immersive audio experience using the ultra-realistic AI voices from ElevenLabs.
This extension integrates directly with your ElevenLabs account, allowing you to listen to articles, blogs, and documentation with precision highlighting and full playback control.
2026-01-07.00-41-50.mov
- ElevenLabs Integration: Connects directly to the ElevenLabs API using your personal API key.
- Real-time Highlighting:
- Sentence Level: Highlights the full sentence currently being read.
- Word Level: Applies a distinct highlight style to the exact word being spoken in real-time.
- Smart Playback Control:
- Play/Pause: Standard global controls.
- Skip Next/Previous: Navigate between paragraphs. Skip previous restarts the current paragraph if more than 3 seconds in, otherwise goes to the previous paragraph.
- Variable Speed: Increase or decrease playback speed (0.5x to 3.0x).
- Click-to-Read: Hover over any paragraph to see a "Play" button. Clicking it instantly pauses current audio and jumps reading to that specific paragraph.
- Auto-Continue: Automatically continues to the next paragraph when the current one finishes.
- Voice Selection: Fetches your saved voices directly from your ElevenLabs library for easy switching via the extension popup.
Before installing, ensure you have:
- Google Chrome (or a Chromium-based browser like Brave or Edge).
- An ElevenLabs Account with an active API Key.
- Get your API key here: ElevenLabs API Keys
- When creating your API key, ensure the following permissions are enabled:
- "Text to Speech" section has "Access" - Required for generating audio from text.
- "Voices" section has "Read" access - Required for the extension to fetch your available voices.
- Note: Word-level highlighting requires the ElevenLabs API to return timestamp information. Ensure your tier supports the required latency/features.
- Go to the Releases page.
- Download the latest
elevenpage-reader-extension.zipfile. - Extract the ZIP file to a folder on your computer.
- Open Chrome and navigate to
chrome://extensions. - Toggle Developer mode in the top right corner.
- Click the Load unpacked button.
- Select the extracted folder.
- The extension icon should now appear in your browser toolbar.
- Clone or Download this repository to your local machine.
- Install dependencies and build:
npm install npm run build
- Open Chrome and navigate to
chrome://extensions. - Toggle Developer mode in the top right corner.
- Click the Load unpacked button.
- Select the root folder of this project.
- The extension icon should now appear in your browser toolbar.
For development with auto-rebuild on changes:
npm run build:watchRun tests:
npm test- Click the ElevenPage Reader icon in your toolbar to open the popup.
- Go to the Settings tab (gear icon).
- Paste your ElevenLabs API Key.
- Click Save. The extension will immediately fetch and populate your available voices.
When you visit a page with readable content, a floating player appears with these controls:
- Skip Previous (⏮): Go to previous paragraph, or restart current if more than 3 seconds in
- Play/Pause (▶/⏸): Toggle playback
- Skip Next (⏭): Advance to next paragraph
- Stop (⏹): Stop playback completely
- Speed: Dropdown to adjust playback speed (0.5x - 3.0x)
When viewing a web page:
- Hover your mouse over any block of text.
- A small Play icon (▶) will appear to the left of the paragraph.
- Click the icon. If audio is already playing, it will stop and immediately restart from this new paragraph.
This extension uses Manifest V3.
src/content/: Content scripts for DOM parsing, text wrapping, highlighting, and the floating player UI. Bundled with esbuild.src/background/service-worker.js: Manages the ElevenLabs API calls, playback state, and audio coordination.src/popup/: User interface for settings, voice selection, and API key management.src/background/offscreen.js: Handles audio playback (Service Workers cannot access Audio API directly).
The project uses esbuild to bundle content scripts:
npm run build # One-time build
npm run build:watch # Watch mode for developmentEntry point: src/content/content-entry.js -> dist/content-entry.js
To achieve word-level highlighting, the extension requests with_timestamps=true from ElevenLabs. The returned JSON data maps character indices to time. The Content Script uses this map to toggle CSS classes on specific word spans in sync with the audio's currentTime.
.
├── manifest.json # Extension configuration
├── esbuild.config.js # Build configuration
├── icons/ # App icons
├── src/
│ ├── background/ # Service worker logic (API calls, audio coordination)
│ ├── content/ # DOM manipulation, highlighting, floating player (bundled)
│ ├── popup/ # UI for the extension window
│ └── styles/ # CSS for highlights and floating player
├── lib/ # Utility scripts (API wrappers, storage)
├── dist/ # Bundled output (generated by build)
├── tests/ # Test files
└── README.md
This project uses GitHub Actions for continuous integration:
On every push and pull request to main:
- Dependencies are installed
- Extension is built with esbuild
- Tests are run with Vitest
- Build artifacts are uploaded and available for download
Contributions are welcome!
- Fork the project.
- Create your feature branch (
git checkout -b feature/AmazingFeature). - Commit your changes.
- Push to the branch.
- Open a Pull Request.
The CI pipeline will automatically build and test your changes.
Distributed under the MIT License. See LICENSE for more information.
Disclaimer: This project is not affiliated with ElevenLabs. It is a third-party client using their public API. Usage of the API will incur costs against your ElevenLabs quota.