☰

Greasy Fork 还支持 简体中文。

Youtube Thumbnail Button

Coloca um botão para ver thumbnail de um video do youtube

目前為 2021-01-08 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         Youtube Thumbnail Button
  3. // @namespace    https://greasyfork.org/users/715485
  4. // @version      1.0
  5. // @description  Coloca um botão para ver thumbnail de um video do youtube
  6. // @author       Luiz-lp
  7. // @icon         https://upload.wikimedia.org/wikipedia/commons/4/4c/YouTube_icon.png
  8. // @match        *://*.youtube.com/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.     const textStyle = `
  15. .thumbnail-button {
  16. display: table;
  17. margin-top:4px;
  18. cursor: pointer;
  19. color: rgb(255, 255, 255);
  20. border-top-left-radius: 3px;
  21. border-top-right-radius: 3px;
  22. border-bottom-right-radius: 3px;
  23. border-bottom-left-radius: 3px;
  24. background-color: #1b7adc;
  25.  
  26. }
  27. .thumbnail-text {
  28. display:block;
  29. cursor: pointer;
  30. color: rgb(255, 255, 255);
  31. background-color: #1b7adc;
  32. padding: 0.49em;
  33. }`;
  34.     const BUTTON_ID = 'yt-thumbnail-luiz-lp-08012021';
  35.     let currentUrl = document.location.href;
  36.     let isPlaylist = currentUrl.includes("playlist");
  37.  
  38.     css();
  39.  
  40.     init(10);
  41.  
  42.     locationChange();
  43.  
  44.     function init(times) {
  45.         for (let i = 0; i < times; i++) {
  46.             setTimeout(delButton, 500 * i);
  47.             setTimeout(findPanel, 500 * i);
  48.         }
  49.     }
  50.  
  51.     function delButton() {
  52.         if (!isPlaylist) return;
  53.         document.querySelectorAll("#analytics-button.thumbnail-panel").forEach(panel => {
  54.             panel.classList.remove("thumbnail-panel");
  55.             panel.querySelector(".thumbnail-button").remove();
  56.         });
  57.     }
  58.  
  59.     function findPanel() {
  60.         if (isPlaylist) return;
  61.         document.querySelectorAll("#analytics-button:not(.thumbnail-panel)").forEach(panel => {
  62.             panel.classList.add("thumbnail-panel");
  63.             addButton(panel);
  64.         });
  65.     }
  66.  
  67.     function addButton(panel) {
  68.  
  69.         const div = document.createElement('div');
  70.         const select = document.createElement('select');
  71.         const option = document.createElement('option');
  72.  
  73.         div.classList.add("thumbnail-button");
  74.  
  75.         div.id = BUTTON_ID;
  76.  
  77.         select.id = 'thumbnail_selector';
  78.  
  79.         select.classList.add("thumbnail-text");
  80.  
  81.         option.textContent = "THUMBNAIL";
  82.         option.selected = true;
  83.         select.appendChild(option);
  84.  
  85.         select.addEventListener('change', function () {
  86.             download_thumbnail(this);
  87.         }, false);
  88.  
  89.         div.appendChild(select);
  90.  
  91.         panel.insertBefore(div, panel.firstElementChild);
  92.  
  93.         load_list(select);
  94.  
  95.     }
  96.  
  97.     async function download_thumbnail(selector) {
  98.  
  99.         if (selector.selectedIndex == 0) {
  100.             return;
  101.         }
  102.  
  103.         var m = currentUrl.match(/(?:watch\?.*v=|\/v\/)([\w\-=]+)/);
  104.         var current_id = m[1];
  105.         var url = "http://img.youtube.com/vi/"+ current_id +"/"+ selector.options[selector.selectedIndex].value +".jpg";
  106.         window.open(url);
  107.  
  108.         selector.options[0].selected = true;
  109.     }
  110.  
  111.     function load_list(select) {
  112.  
  113.         var option = document.createElement('option');
  114.         option.textContent = "HD (1280x720)";
  115.         option.value = "maxresdefault";
  116.         select.appendChild(option);
  117.  
  118.         option = document.createElement('option');
  119.         option.textContent = "HQ (480x360)";
  120.         option.value = "hqdefault";
  121.         select.appendChild(option);
  122.  
  123.         option = document.createElement('option');
  124.         option.textContent = "MQ (320x180)";
  125.         option.value = "mqdefault";
  126.         select.appendChild(option);
  127.     }
  128.  
  129.     function css() {
  130.         const style = document.createElement("style");
  131.         style.type = "text/css";
  132.         style.innerHTML = textStyle;
  133.         document.head.appendChild(style);
  134.     }
  135.  
  136.     function locationChange() {
  137.         const observer = new MutationObserver(mutations => {
  138.             mutations.forEach(() => {
  139.                 if (currentUrl !== document.location.href) {
  140.                     currentUrl = document.location.href;
  141.                     isPlaylist = currentUrl.includes("playlist");
  142.                     init(10);
  143.                 }
  144.             });
  145.         });
  146.         const target = document.body;
  147.         const config = { childList: true, subtree: true };
  148.         observer.observe(target, config);
  149.     }
  150.  
  151. })();