☰

Youtube Custom Font

Applies a custom font, Vazirmatn, to all text elements on the current web page (YouTube).

目前为 2024-07-19 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Youtube Custom Font
  3. // @version      0.1
  4. // @author       Amm1rr
  5. // @description  Applies a custom font, Vazirmatn, to all text elements on the current web page (YouTube).
  6. // @homepage     https://github.com/Amm1rr/
  7. // @namespace    amm1rr
  8. // @match        https://*.youtube.*/*
  9. // @grant        none
  10. // @license      MIT - https://choosealicense.com/licenses/mit/
  11. // ==/UserScript==
  12.  
  13. // Description:
  14. // This script injects a small "bubble button" on the top left corner of the YouTube page.
  15. // Clicking the button applies a custom font, Vazirmatn, to all text elements on the webpage.
  16. // You can customize the font family and element selector to your preference.
  17.  
  18. (function () {
  19.   // Configuration object for easy customization
  20.   const config = {
  21.     fontFamily: "Vazirmatn",
  22.     selector: ".style-scope",
  23.     buttonID: "yt-custom-font",
  24.     buttonText: "A",
  25.     notificationDuration: 2000,
  26.     buttonFadeDuration: 2000,
  27.     notificationMessage: "Fonts updated: Vazirmatn font applied.",
  28.     buttonTooltip: "Enhance readability with Vazirmatn font",
  29.   };
  30.  
  31.   if (document.getElementById(config.buttonID)) {
  32.     console.log(
  33.       "Custom Font: " + config.buttonID + " button already exists.\n bye bye()"
  34.     );
  35.     // console.log("Custom Font: bye bye()");
  36.     return;
  37.   }
  38.  
  39.   // Apply custom font to selected elements
  40.   function applyCustomFont(selector, fontFamily) {
  41.     const style = document.createElement("style");
  42.     style.textContent = `${selector} * {font-family: ${fontFamily} !important;}`;
  43.     document.head.appendChild(style);
  44.   }
  45.  
  46.   // Show notification with fade effect
  47.   function showNotification(message, duration) {
  48.     const notification = document.createElement("div");
  49.     Object.assign(notification.style, {
  50.       position: "fixed",
  51.       bottom: "80%",
  52.       left: "50%",
  53.       transform: "translateX(-50%)",
  54.       padding: "10px 20px",
  55.       backgroundColor: "rgba(0, 123, 255, 0.8)",
  56.       color: "yellow",
  57.       borderRadius: "5px",
  58.       boxShadow: "0 2px 5px rgba(0,0,0,0.2)",
  59.       zIndex: "10000",
  60.       opacity: "0",
  61.       transition: "opacity 0.5s ease",
  62.       textAlign: "center",
  63.     });
  64.     notification.textContent = message;
  65.     document.body.appendChild(notification);
  66.  
  67.     requestAnimationFrame(() => {
  68.       notification.style.opacity = "1";
  69.     });
  70.  
  71.     setTimeout(() => {
  72.       notification.style.opacity = "0";
  73.       notification.addEventListener(
  74.         "transitionend",
  75.         () => notification.remove(),
  76.         { once: true }
  77.       );
  78.     }, duration);
  79.   }
  80.  
  81.   // Create and add font change button
  82.   function addFontChangeButton() {
  83.     const button = document.createElement("button");
  84.     button.id = config.buttonID;
  85.     button.textContent = config.buttonText;
  86.     button.title = config.buttonTooltip;
  87.  
  88.     const buttonStyle = {
  89.       position: "fixed",
  90.       top: "10px",
  91.       left: "3px",
  92.       zIndex: "9999",
  93.       width: "20px",
  94.       height: "20px",
  95.       borderRadius: "50%",
  96.       backgroundColor: "rgba(123, 110, 242, 0.3)",
  97.       color: "#FFFFFF",
  98.       border: "none",
  99.       fontWeight: "bold",
  100.       fontFamily: "Arial",
  101.       cursor: "pointer",
  102.       boxShadow: "0 2px 5px rgba(0,0,0,0.3)",
  103.       transition: "background-color 0.3s ease, opacity 0.3s ease",
  104.     };
  105.     Object.assign(button.style, buttonStyle);
  106.  
  107.     function setButtonHoverState(isHover) {
  108.       if (!button.disabled) {
  109.         button.style.backgroundColor = isHover
  110.           ? "rgba(123, 110, 242, 0.8)"
  111.           : "rgba(123, 110, 242, 0.3)";
  112.       }
  113.     }
  114.  
  115.     button.addEventListener("mouseenter", () => setButtonHoverState(true));
  116.     button.addEventListener("mousemove", () => setButtonHoverState(true));
  117.     button.addEventListener("mouseover", () => setButtonHoverState(true));
  118.     button.addEventListener("mouseleave", () => setButtonHoverState(false));
  119.  
  120.     button.addEventListener("click", () => {
  121.       button.disabled = true;
  122.       button.style.cursor = "default";
  123.       button.style.backgroundColor = "rgba(123, 110, 242, 0.3)";
  124.  
  125.       applyCustomFont(config.selector, config.fontFamily);
  126.       showNotification(config.notificationMessage, config.notificationDuration);
  127.  
  128.       button.style.opacity = "0";
  129.       setTimeout(() => {
  130.         button.disabled = false;
  131.         button.style.cursor = "pointer";
  132.         button.style.opacity = "1";
  133.       }, config.buttonFadeDuration);
  134.     });
  135.  
  136.     document.body.appendChild(button);
  137.  
  138.     function handleFullscreenChange() {
  139.       const isFullscreen = !!document.fullscreenElement;
  140.       button.style.opacity = isFullscreen ? "0" : "1";
  141.       button.style.pointerEvents = isFullscreen ? "none" : "auto";
  142.     }
  143.  
  144.     document.addEventListener("fullscreenchange", handleFullscreenChange);
  145.     document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
  146.   }
  147.  
  148.   // Initialize the font change functionality
  149.   addFontChangeButton();
  150. })();