Twitch Chat Font Size Adjuster

WHAT IT DOES

This script lets you adjust the font size of Twitch chat messages in real-time. A slider in the settings panel lets you increase or decrease the chat font size from 8px to 32px, making chat easier to read on large screens or more compact on small screens. The font size change is applied instantly to all chat messages—both existing messages and new messages as they arrive. Preset buttons (10px, 12px, 14px, 16px, 18px, 20px, 24px) let you jump to common sizes quickly. The setting is persisted across sessions, so your preferred font size is remembered. A "Reset" button restores the default 14px size. The script works with both live chat and VOD chat, and on both desktop and mobile views.

WHERE IT RUNS

The script runs on all Twitch pages (*.twitch.tv). It works on the video player with chat, chat-only mode, and VOD/Clip pages. 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 font size adjustment" toggle enables or disables the script.

- Use the slider to adjust the font size from 8px to 32px. The current size is displayed below the slider.

- Click any preset button (10px, 12px, 14px, 16px, 18px, 20px, 24px) to jump to that size.

- Click "Reset to default (14px)" to restore the default font size.

The font size is applied immediately to all chat messages. The setting is saved automatically.

TECHNICAL SECTION — REAL MECHANISM

The script detects Twitch pages by checking the URL for twitch.tv. It injects a style element into the document head with CSS rules that target Twitch chat message elements. The CSS uses !important to override Twitch's default styles. The selectors target chat message containers, message text, author names, timestamps, emotes, cheers, badges, and other chat elements. The font size is applied to .chat-scrollable-area__message-container, .chat-line__message, .chat-line__message span, .chat-line__message .message, .chat-line__message .message-body, .chat-line__message .text, .chat-line__message .fragment, .chat-author__display-name, .timestamp, and many other specific Twitch chat classes. The font size also sets line-height to font-size + 6px for proper spacing. The style element is re-created whenever the font size changes or the script is toggled. The script uses a MutationObserver to re-apply the styles if the chat container is re-rendered or if the user navigates to a new page.

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. Twitch frequently updates its chat interface, which may affect the CSS selectors used to target chat messages. If the script stops working, please check for updates. The script uses CSS injection with !important rules—this is the most reliable way to override Twitch's styles. The font size setting applies to all chat messages, including emotes, badges, and timestamps, scaled proportionally. The script stores only your preferences via GM_setValue. No data is sent externally—all data is stored 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.