A userscript that adds a sharpness toggle switch for YouTube videos.
// ==UserScript==
// @name YouTube Sharpness Enhancer
// @namespace http://tampermonkey.net/
// @version 1.4
// @description A userscript that adds a sharpness toggle switch for YouTube videos.
// @match https://www.youtube.com/*
// @grant GM_setValue
// @grant GM_getValue
// @license MIT
// @author Kirch (Kirchlive)
// ==/UserScript==
(function() {
'use strict';
function addSVGFilter() {
const svgFilter = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgFilter.setAttribute('width', '0');
svgFilter.setAttribute('height', '0');
svgFilter.innerHTML = `
<filter id="sharpness-filter">
<feConvolveMatrix order="3" preserveAlpha="true" kernelMatrix="0 -1 0 -1 5 -1 0 -1 0"/>
</filter>
`;
document.body.appendChild(svgFilter);
}
function applySharpnessFilter(video, isEnabled) {
if (isEnabled) {
const sharpnessValue = 0.0005;
const contrastValue = 0.995 - sharpnessValue * 0.5;
const brightnessValue = 1 + sharpnessValue * 0.1;
video.style.filter = `url(#sharpness-filter) contrast(${contrastValue}) brightness(${brightnessValue})`;
} else {
video.style.filter = 'none';
}
}
function addSharpnessToggle() {
const playerControls = document.querySelector('.ytp-chrome-bottom');
if (!playerControls) return;
const toggleContainer = document.createElement('div');
toggleContainer.style.cssText = `
position: absolute;
right: 10px;
top: -40px;
color: white;
display: flex;
align-items: center;
font-family: Arial, sans-serif;
`;
toggleContainer.innerHTML = `
<span style="margin-right: 10px; font-weight: bold; font-size: 14px;">Sharpness Enhancer</span>
<label class="switch">
<input type="checkbox" id="sharpness-toggle">
<span class="slider round"></span>
</label>
`;
const style = document.createElement('style');
style.textContent = `
.switch {
position: relative;
display: inline-block;
width: 45px;
height: 25.5px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 19.5px;
width: 19.5px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:checked + .slider:before {
transform: translateX(19.5px);
}
.slider.round {
border-radius: 25.5px;
}
.slider.round:before {
border-radius: 50%;
}
`;
document.head.appendChild(style);
playerControls.appendChild(toggleContainer);
const toggle = toggleContainer.querySelector('#sharpness-toggle');
const video = document.querySelector('video');
// Lade den gespeicherten Zustand
const savedState = GM_getValue('sharpnessEnhancerEnabled', false);
toggle.checked = savedState;
applySharpnessFilter(video, savedState);
toggle.addEventListener('change', function() {
GM_setValue('sharpnessEnhancerEnabled', this.checked);
applySharpnessFilter(video, this.checked);
});
}
function waitForVideo() {
const videoElement = document.querySelector('video');
if (videoElement) {
addSVGFilter();
addSharpnessToggle();
} else {
setTimeout(waitForVideo, 1000);
}
}
// Überwache Seitenwechsel
let lastUrl = location.href;
new MutationObserver(() => {
const url = location.href;
if (url !== lastUrl) {
lastUrl = url;
setTimeout(waitForVideo, 1000);
}
}).observe(document, {subtree: true, childList: true});
waitForVideo();
})();