☰

Youtube Thumbnail Search

Search youtube thumbnail image using yandex

当前为 2024-04-06 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Youtube Thumbnail Search
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.6
  5. // @description  Search youtube thumbnail image using yandex
  6. // @author       Tanuki
  7. // @match       *://*.youtube.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  9. // @namespace   https://greasyfork.org/id/scripts/449233-youtube-thumbnail-search
  10. // @homepage    https://greasyfork.org/id/scripts/449233-youtube-thumbnail-search
  11. // @grant       none
  12. // @license     MIT
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.     'use strict';
  17.  
  18.     // Embed Google Fonts stylesheet for Material Icons
  19.     let link = document.createElement('link');
  20.     link.href = 'https://fonts.googleapis.com/css2?family=Material+Icons';
  21.     link.rel = 'stylesheet';
  22.     document.head.appendChild(link);
  23.  
  24.     window.addEventListener("scroll",function(){
  25.         // Select all ytd-thumbnail elements
  26.         let thumbnails = document.querySelectorAll('ytd-thumbnail');
  27.  
  28.         // Iterate over each thumbnail element
  29.         thumbnails.forEach(thumbnail => {
  30.             // Find the img element within the thumbnail element
  31.             let imgElement = thumbnail.querySelector('img');
  32.             // Get the src attribute of the img element
  33.             if (imgElement) {
  34.                 var imgSrc = imgElement.src;
  35.                 let thumbnailImg = imgElement.querySelector('yt-image');
  36.                 if (thumbnailImg){
  37.                     imgSrc = thumbnailImg.querySelector('img').src;
  38.                 }
  39.                 if (!imgSrc && thumbnail.nextElementSibling && thumbnail.nextElementSibling.tagName === 'YTD-PLAYLIST-THUMBNAIL') {
  40.                     let playlist = thumbnail.nextElementSibling.querySelector('ytd-playlist-video-thumbnail-renderer');
  41.                     if (playlist) {
  42.                         let thumbnailPlaylist = playlist.querySelector('yt-image');
  43.                         if (thumbnailPlaylist){
  44.                             imgSrc = thumbnailPlaylist.querySelector('img').src;
  45.                         }
  46.                     }
  47.                 }
  48.                 // Remove any parameters from the image source
  49.                 //imgSrc = imgSrc.split('?')[0];
  50.                 // Check if the URL contains "oar" in the filename
  51.                 if (!imgSrc.includes('/oar')) {
  52.                     // Replace the filename with "maxresdefault.jpg"
  53.                     imgSrc = imgSrc.replace(/\/[^\/]+\.jpg/, '/maxresdefault.jpg');
  54.                 }
  55.  
  56.                 // Check if the TanTools div exists
  57.                 let tanToolsDiv = thumbnail.parentNode.parentNode.querySelector('.tan-tools');
  58.                 // Remove existing tanToolsDiv if it exists
  59.                 if (tanToolsDiv) {
  60.                     tanToolsDiv.remove();
  61.                 }
  62.                 // Create a new div element for TanTools with buttons
  63.                 tanToolsDiv = document.createElement('div');
  64.                 tanToolsDiv.className = 'tan-tools'; // Add a class name to the div
  65.                 tanToolsDiv.dataset.layer = '6'; // Add data-layer attribute
  66.                 tanToolsDiv.style.cssText = 'position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height:10%;'; // Combine style properties
  67.  
  68.                 // Create a new button element for 'Search Img' with a search icon
  69.                 let searchButton = document.createElement('button');
  70.                 searchButton.style.cssText = 'background: none; border: none; cursor: pointer;'; // Transparent button
  71.                 searchButton.addEventListener('click', function() {
  72.                     window.open('https://lens.google.com/uploadbyurl?url=' + encodeURIComponent(imgSrc), '_blank');
  73.                 });
  74.                 let searchIcon = document.createElement('i');
  75.                 searchIcon.className = 'material-icons';
  76.                 searchIcon.style.color = 'white'; // Set the icon color
  77.                 searchIcon.textContent = 'search'; // Set the icon text
  78.                 searchButton.appendChild(searchIcon);
  79.                 tanToolsDiv.appendChild(searchButton);
  80.  
  81.                 // Create a new button element for 'View Image' with a view icon
  82.                 let viewButton = document.createElement('button');
  83.                 viewButton.style.cssText = 'background: none; border: none; cursor: pointer;'; // Transparent button
  84.                 viewButton.addEventListener('click', function() {
  85.                     window.open(imgSrc, '_blank');
  86.                 });
  87.                 let viewIcon = document.createElement('i');
  88.                 viewIcon.className = 'material-icons';
  89.                 viewIcon.style.color = 'white'; // Set the icon color
  90.                 viewIcon.textContent = 'visibility'; // Set the icon text
  91.                 viewButton.appendChild(viewIcon);
  92.                 tanToolsDiv.appendChild(viewButton);
  93.  
  94.                 // Append the TanTools div to the parent element
  95.                 thumbnail.parentNode.parentNode.appendChild(tanToolsDiv);
  96.             }
  97.         });
  98.  
  99.  
  100.     })
  101.  
  102. })();