Universal Reader Mode Injector

WHAT IT DOES

This script extracts the main article content from any webpage and displays it in a clean, distraction-free reading view. When you enable reader mode, the script scans the page for article content—looking for article tags, main content areas, or the largest text block—and displays it in an overlay with a clean background and readable typography. You can customize the font size, font family, line height, and background color to suit your reading preferences. The settings are saved locally and persist across sessions. A "Read Aloud" button uses the Web Speech API to read the extracted text aloud, making it accessible for users who prefer listening over reading. The reader view can be toggled on and off at any time.

WHERE IT RUNS

The script runs on all websites (*://*/*), making it truly universal. It works on any page with text—articles, blog posts, news sites, documentation, and more. It supports both desktop and mobile views.

HOW TO USE

After installation, the settings panel appears on the left side of the screen with the gear emoji (⚙️). Open the panel to configure the script:

- The "Enable reader mode" toggle enables or disables the script.

- Adjust the "Font size" slider to change the text size in reader mode.

- Select a "Font family" from the dropdown (Georgia, Arial, Times New Roman, Verdana, Courier New, OpenDyslexic).

- Adjust the "Line height" slider to control spacing between lines.

- Use the color picker to change the background color.

- Click "Toggle Reader Mode" to enable or disable the reader view.

- Click "Read Aloud" (when reader mode is active) to have the text read aloud.

The reader view appears as an overlay on top of the page. Click the ✕ button to close it.

TECHNICAL SECTION — REAL MECHANISM

The script extracts article content using a heuristic approach. It first looks for common article containers like article, main, .article, .post, .entry, .content, and .body. If none are found, it scans all paragraph, div, section, and article elements to find the largest text block, excluding navigation, footer, sidebar, and menu elements. The extracted content is cloned to avoid modifying the original page, and scripts, styles, and iframes are removed. The reader view is created as a fixed-position overlay with a semi-transparent background and custom CSS applied to the content. The overlay uses position:fixed with a high z-index to cover the page. The Read Aloud feature uses the Web Speech API (SpeechSynthesis) to create a SpeechSynthesisUtterance with the extracted text. The settings are stored via GM_setValue and applied when the reader view is created or updated.

THE PANEL

The settings panel is built with BotGentz's BGPanel component. It is draggable via its header, allowing you to reposition it anywhere on the screen. The panel snaps to the left edge by default but can be moved freely. Click the gear emoji to collapse the panel into a small bubble, and click the bubble to expand it again. The panel remembers its position per page session. Press the Escape key to quickly close or minimize the panel. The panel includes a status flash bar that provides visual feedback when settings are changed or actions are performed. All settings save automatically via GM_setValue.

PLEASE NOTE

This script requires the free BotGentz browser extension to run. It does not function as a standalone Chrome extension and does not use chrome.* APIs. The content extraction is heuristic-based and may not work perfectly on all websites—some pages with complex layouts may not extract correctly. The Read Aloud feature uses the Web Speech API, which is supported on most modern browsers but voice quality may vary. The script does not modify the original page—it displays an overlay that can be closed at any time. The script stores only your preferences via GM_setValue. No data is sent externally—all processing is performed locally in your browser. The script never reads or writes password fields, hidden inputs, or file inputs. All DOM operations use safe methods (style properties, textContent, appendChild) and never use innerHTML.