Youtube Thumbnail Search

Search youtube thumbnail image using yandex

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

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Youtube Thumbnail Search
// @namespace    http://tampermonkey.net/
// @version      0.6
// @description  Search youtube thumbnail image using yandex
// @author       Tanuki
// @match       *://*.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @namespace   https://greasyfork.org/id/scripts/449233-youtube-thumbnail-search
// @homepage    https://greasyfork.org/id/scripts/449233-youtube-thumbnail-search
// @grant       none
// @license     MIT
// ==/UserScript==

(function() {
    'use strict';

    // Embed Google Fonts stylesheet for Material Icons
    let link = document.createElement('link');
    link.href = 'https://fonts.googleapis.com/css2?family=Material+Icons';
    link.rel = 'stylesheet';
    document.head.appendChild(link);

    window.addEventListener("scroll",function(){
        // Select all ytd-thumbnail elements
        let thumbnails = document.querySelectorAll('ytd-thumbnail');

        // Iterate over each thumbnail element
        thumbnails.forEach(thumbnail => {
            // Find the img element within the thumbnail element
            let imgElement = thumbnail.querySelector('img');
            // Get the src attribute of the img element
            if (imgElement) {
                var imgSrc = imgElement.src;
                let thumbnailImg = imgElement.querySelector('yt-image');
                if (thumbnailImg){
                    imgSrc = thumbnailImg.querySelector('img').src;
                }
                if (!imgSrc && thumbnail.nextElementSibling && thumbnail.nextElementSibling.tagName === 'YTD-PLAYLIST-THUMBNAIL') {
                    let playlist = thumbnail.nextElementSibling.querySelector('ytd-playlist-video-thumbnail-renderer');
                    if (playlist) {
                        let thumbnailPlaylist = playlist.querySelector('yt-image');
                        if (thumbnailPlaylist){
                            imgSrc = thumbnailPlaylist.querySelector('img').src;
                        }
                    }
                }
                // Remove any parameters from the image source
                //imgSrc = imgSrc.split('?')[0];
                // Check if the URL contains "oar" in the filename
                if (!imgSrc.includes('/oar')) {
                    // Replace the filename with "maxresdefault.jpg"
                    imgSrc = imgSrc.replace(/\/[^\/]+\.jpg/, '/maxresdefault.jpg');
                }

                // Check if the TanTools div exists
                let tanToolsDiv = thumbnail.parentNode.parentNode.querySelector('.tan-tools');
                // Remove existing tanToolsDiv if it exists
                if (tanToolsDiv) {
                    tanToolsDiv.remove();
                }
                // Create a new div element for TanTools with buttons
                tanToolsDiv = document.createElement('div');
                tanToolsDiv.className = 'tan-tools'; // Add a class name to the div
                tanToolsDiv.dataset.layer = '6'; // Add data-layer attribute
                tanToolsDiv.style.cssText = 'position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height:10%;'; // Combine style properties

                // Create a new button element for 'Search Img' with a search icon
                let searchButton = document.createElement('button');
                searchButton.style.cssText = 'background: none; border: none; cursor: pointer;'; // Transparent button
                searchButton.addEventListener('click', function() {
                    window.open('https://lens.google.com/uploadbyurl?url=' + encodeURIComponent(imgSrc), '_blank');
                });
                let searchIcon = document.createElement('i');
                searchIcon.className = 'material-icons';
                searchIcon.style.color = 'white'; // Set the icon color
                searchIcon.textContent = 'search'; // Set the icon text
                searchButton.appendChild(searchIcon);
                tanToolsDiv.appendChild(searchButton);

                // Create a new button element for 'View Image' with a view icon
                let viewButton = document.createElement('button');
                viewButton.style.cssText = 'background: none; border: none; cursor: pointer;'; // Transparent button
                viewButton.addEventListener('click', function() {
                    window.open(imgSrc, '_blank');
                });
                let viewIcon = document.createElement('i');
                viewIcon.className = 'material-icons';
                viewIcon.style.color = 'white'; // Set the icon color
                viewIcon.textContent = 'visibility'; // Set the icon text
                viewButton.appendChild(viewIcon);
                tanToolsDiv.appendChild(viewButton);

                // Append the TanTools div to the parent element
                thumbnail.parentNode.parentNode.appendChild(tanToolsDiv);
            }
        });


    })

})();