YouTube CRT Overlay

Applies a CSS CRT scanline and vignette effect to YouTube videos
目前為 2025-11-21 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         YouTube CRT Overlay
// @version      1.0
// @namespace    http://tampermonkey.net/
// @license      MIT License
// @description  Applies a CSS CRT scanline and vignette effect to YouTube videos
// @author       itsmebucky
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    const CHECK_INTERVAL_MS = 2000; // Check every 2 seconds for new videos

    function applyCRT() {

        // Find the player
        const player = document.querySelector('.html5-video-player');
        const video = document.querySelector('video');

        if (!player || !video) return;

        // Check if overlay already exists
        if (document.getElementById('crt-overlay-inject')) {
            return;
        }

        // Apply CSS Filters
        video.style.filter = "contrast(1.3) saturate(1.2) blur(0.6px)";

        // Create and Inject the Overlay
        const overlay = document.createElement('div');
        overlay.id = 'crt-overlay-inject';
        overlay.style.cssText = `
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: 10;
            pointer-events: none;
            background:
                repeating-linear-gradient(
                    to bottom,
                    transparent 0px,
                    transparent 2px,
                    rgba(0, 0, 0, 0.25) 2px,
                    rgba(0, 0, 0, 0.25) 4px
                ),
                repeating-linear-gradient(
                    to right,
                    transparent 0px,
                    rgba(255, 0, 0, 0.05) 1px,
                    rgba(0, 255, 0, 0.05) 2px,
                    rgba(0, 0, 255, 0.05) 3px
                ),
                radial-gradient(
                    circle,
                    transparent 60%,
                    rgba(0, 0, 0, 0.6) 100%
                );
            mix-blend-mode: overlay;
        `;

        player.appendChild(overlay);
        console.log("📺 CRT Overlay Applied");
    }

    // Run Loop
    // YouTube navigates without reloading the page, so I use an interval
    // to ensure the effect applies if you click a new video.
    setInterval(applyCRT, CHECK_INTERVAL_MS);

    // Also run immediately once
    applyCRT();
})();