☰

WTR-Lab Reader & UI Enhancer

Adds a responsive configuration panel to adjust reader width, navigation width, and font style on wtr-lab.com.

Author
MasuRiii
Daily installs
0
Total installs
1
Ratings
0 0 0
Version
2.7
Created
2025-10-17
Updated
2025-10-26
Size
16.1 KB
License
MIT
Applies to

Alt text Alt text

This script enhances the reading experience on wtr-lab.com by giving you full control over the reader's layout and appearance. It replaces the default fixed-width design with a powerful, persistent, and user-friendly configuration panel.

The Problem

The default reading pane on wtr-lab.com is fixed to a narrow width and a limited font selection. On wider monitors, this results in a lot of wasted space and a less-than-ideal typographic experience, which can be uncomfortable for long reading sessions.

The Solution

This userscript introduces a central configuration panel to override the default styles. It adds a single, clean "Configure Settings" command to your Tampermonkey menu, allowing you to easily:

  • Independently adjust the width of the reader and the bottom navigator.
  • Choose from a vast selection of high-quality reading fonts, fetched directly from Google Fonts.
  • Constrain the bottom navigator's background to match its content width, removing distracting excess background on the sides.
  • Reset any setting back to its default with a single click.

Your preferred settings are automatically saved and applied every time you visit a chapter, so you only need to set them once for a perfectly tailored reading environment.

Features

  • Unified Configuration Panel: No more cluttered menus! A single Configure Settings command opens a clean, modern panel with all options in one place.
  • Dynamic Font Selection:
    • Overrides the website's limited font choices with a large, categorized list from Google Fonts.
    • The dropdown is intelligently grouped into "Top 10 for Reading (Serif)" and "All Other Fonts" to help you find the perfect style without being overwhelmed.
    • Includes a "Refresh" button to fetch the latest font list on demand.
  • Dual Width Control: Independently adjust the width of both the main reader content and the bottom navigation bar to create your perfect layout.
  • Navigator Background Control: A simple checkbox lets you "Constrain Navigator Background," trimming the excess dark background to perfectly match the width of the navigator's content. This feature is fully responsive and adjusts automatically when you resize your browser.
  • Responsive & Mobile-Friendly: The settings panel is designed to work flawlessly on both desktop and mobile browsers, with controls that adapt to your screen size.
  • Persistent Settings: Your chosen widths, font, and navigator style are saved locally, so your preferences are remembered across sessions.
  • Developer Tools: Includes a Toggle Debug Logging command for advanced users and easier troubleshooting.
  • Lightweight and Safe: The script is minimal, efficient, and only affects the styling of the page. It does not interact with the website's data or your account.

How to Use

  1. Make sure you have the Tampermonkey (or a compatible) browser extension installed.
  2. Install this script.
  3. Navigate to any chapter page on wtr-lab.com.
  4. Click the Tampermonkey extension icon in your browser's toolbar and select Configure Settings.
  5. The settings panel will appear over the page.
  6. Use the sliders for width, select your preferred font from the categorized dropdown, and toggle the navigator constraint checkbox. Changes are applied and saved instantly. Click "Close" or click outside the panel to dismiss it.

Technical Notes

  • Settings are saved using GM_setValue, which stores the data securely within the Tampermonkey extension.
  • Uses GM_xmlhttpRequest to safely fetch the font list from the google-webfonts-helper API, bypassing browser cross-origin restrictions.
  • The script uses CSS !important tags to ensure its styles reliably override the website's own styles.