Customize Netflix subtitles appearance
// ==UserScript==
// @name Netflix Subtitle Customizer
// @namespace https://greasyfork.org/de/users/1476487-hyperr
// @version 1.2
// @description Customize Netflix subtitles appearance
// @author HYPERR.
// @match https://www.netflix.com/*
// @icon https://www.netflix.com/favicon.ico
// @license MIT
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_registerMenuCommand
// ==/UserScript==
(function() {
'use strict';
const defaults = {
fontSize: '100%',
textColor: '#FFFFFF',
backgroundColor: '#000000',
backgroundOpacity: '0.5',
bold: false,
italic: false
};
let settings = Object.assign({}, defaults, GM_getValue('subtitleSettings', {}));
let styleElement = null;
function applyStyles() {
if (!styleElement) {
styleElement = document.createElement('style');
document.head.appendChild(styleElement);
}
styleElement.textContent = `
.player-timedtext-text-container span {
font-size: ${settings.fontSize} !important;
color: ${settings.textColor} !important;
background-color: rgba(${hexToRgb(settings.backgroundColor)}, ${settings.backgroundOpacity}) !important;
font-weight: ${settings.bold ? 'bold' : 'normal'} !important;
font-style: ${settings.italic ? 'italic' : 'normal'} !important;
}
`;
}
function createControlPanel() {
const panel = document.createElement('div');
panel.id = 'subtitle-control-panel';
panel.innerHTML = `
<h3>Subtitle Settings <span id="close-panel">×</span></h3>
<div>
<label>Size: </label>
<input type="range" id="fontSize" min="50" max="200" value="${parseInt(settings.fontSize)}">
<span id="fontSizeValue">${settings.fontSize}</span>%
</div>
<div>
<label>Color: </label>
<input type="color" id="textColor" value="${settings.textColor}">
</div>
<div>
<label>Background: </label>
<input type="color" id="backgroundColor" value="${settings.backgroundColor}">
<input type="range" id="backgroundOpacity" min="0" max="1" step="0.1" value="${settings.backgroundOpacity}">
</div>
<div>
<label><input type="checkbox" id="bold" ${settings.bold ? 'checked' : ''}> Bold</label>
<label><input type="checkbox" id="italic" ${settings.italic ? 'checked' : ''}> Italic</label>
</div>
<button id="resetSettings">Reset</button>
`;
document.body.appendChild(panel);
// Apply initial styles
applyStyles();
// Event listeners
document.getElementById('close-panel').addEventListener('click', () => {
panel.style.display = 'none';
});
document.getElementById('fontSize').addEventListener('input', (e) => {
settings.fontSize = e.target.value + '%';
document.getElementById('fontSizeValue').textContent = settings.fontSize;
GM_setValue('subtitleSettings', settings);
applyStyles();
});
document.getElementById('textColor').addEventListener('input', (e) => {
settings.textColor = e.target.value;
GM_setValue('subtitleSettings', settings);
applyStyles();
});
document.getElementById('backgroundColor').addEventListener('input', (e) => {
settings.backgroundColor = e.target.value;
GM_setValue('subtitleSettings', settings);
applyStyles();
});
document.getElementById('backgroundOpacity').addEventListener('input', (e) => {
settings.backgroundOpacity = e.target.value;
GM_setValue('subtitleSettings', settings);
applyStyles();
});
document.getElementById('bold').addEventListener('change', (e) => {
settings.bold = e.target.checked;
GM_setValue('subtitleSettings', settings);
applyStyles();
});
document.getElementById('italic').addEventListener('change', (e) => {
settings.italic = e.target.checked;
GM_setValue('subtitleSettings', settings);
applyStyles();
});
document.getElementById('resetSettings').addEventListener('click', () => {
settings = Object.assign({}, defaults);
GM_setValue('subtitleSettings', settings);
applyStyles();
location.reload(); // Only reload for reset to ensure clean state
});
}
function hexToRgb(hex) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `${r}, ${g}, ${b}`;
}
const observer = new MutationObserver(() => {
if (document.querySelector('.player-timedtext-text-container')) {
observer.disconnect();
createControlPanel();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
GM_registerMenuCommand('Show Subtitle Controls', () => {
const panel = document.getElementById('subtitle-control-panel');
if (panel) panel.style.display = 'block';
});
})();