Netflix Subtitle Style Customizer

WHAT IT DOES

This script lets you fully customize the appearance of Netflix subtitles. When you watch a show or movie on Netflix, the script applies your custom styles to the subtitle text, making it easier to read and more comfortable to watch. You can adjust font size, font family, text color, background color, background opacity, and text shadow. All changes are applied in real-time—you'll see the subtitle style update immediately as you adjust the settings. A toggle lets you enable or disable the custom styles. The settings panel includes sliders, color pickers, and dropdowns for easy customization. Your preferences are saved locally and persist across browsing sessions.

WHERE IT RUNS

The script runs on all Netflix domains (*.netflix.com). It works on the video player when you're watching a title (on /watch/ or /title/ 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 custom subtitle styles" toggle enables or disables the script.

- Adjust the font size using the slider (50% to 200% of default).

- Select a font family from the dropdown (Arial, Georgia, Courier New, Verdana, Times New Roman, Tahoma).

- Choose a text color using the color picker.

- Choose a background color using the color picker.

- Adjust the background opacity using the slider (0% to 100%).

- Select a text shadow style from the dropdown (None, Light, Medium, Heavy, Glow).

- Click "Apply styles now" to manually apply the current settings.

- Click "Reset to defaults" to restore the default settings.

The styles are applied automatically when you start watching something.

TECHNICAL SECTION — REAL MECHANISM

The script detects Netflix video pages by checking the URL for /watch/ or /title/. It identifies subtitle text elements by targeting CSS classes that Netflix uses for subtitles, including .player-timedtext-text-container, .subtitle-container, .nf-player-tt, .timedtext-text, and .watch-video--subtitle-container. The script injects a style element into the document head with CSS rules that override Netflix's default subtitle styles. The CSS uses !important to ensure the custom styles take precedence. Font size is applied as a percentage, so Netflix's base font size is scaled up or down. Background color is applied with the selected opacity using a hex color with opacity (e.g., #000000CC for 80% opacity). Text shadow is applied using the CSS text-shadow property. The script uses a MutationObserver to watch for DOM changes and re-applies the styles when the video player loads or when subtitle elements appear. All settings are stored via GM_setValue and loaded on page load.

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. Netflix frequently updates its video player and subtitle rendering, which may affect the CSS selectors used to target subtitle elements. If the custom styles stop working, please check for script updates. The script modifies the appearance of subtitles on Netflix—it does not modify Netflix's functionality or content. 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.