☰

Twitter Image to SauceNAO

Adds a button to convert Twitter image URLs to SauceNAO search URLs independently of other extensions or buttons and changes color when clicked

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

// ==UserScript==
// @name         Twitter Image to SauceNAO
// @namespace    http://yourwebsite.com
// @version      1.5
// @description  Adds a button to convert Twitter image URLs to SauceNAO search URLs independently of other extensions or buttons and changes color when clicked
// @author       FunkyJustin
// @match        https://twitter.com/*
// @match        https://x.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Add custom CSS for the button
    const style = document.createElement('style');
    style.innerHTML = `
        .saucenao-button {
            color: rgb(29, 155, 240); /* Twitter's default link color */
        }
        .saucenao-button.clicked {
            color: rgb(255, 69, 0); /* Color after button is clicked */
        }
    `;
    document.head.appendChild(style);

    function createSauceNAOButton(imageUrl) {
        const button = document.createElement('div');
        button.className = 'saucenao-button';
        button.style.display = 'inline-block';
        button.style.marginLeft = '8px';
        button.style.cursor = 'pointer';
        button.innerText = 'SauceNAO';

        button.addEventListener('click', (event) => {
            event.stopPropagation();
            event.preventDefault();
            const encodedUrl = encodeURIComponent(imageUrl);
            const saucenaoUrl = `https://saucenao.com/search.php?url=${encodedUrl}`;
            window.open(saucenaoUrl, '_blank');
            button.classList.add('clicked');
        });

        return button;
    }

    function addSauceNAOButtons() {
        const images = document.querySelectorAll('img[src*="pbs.twimg.com/media"]');
        images.forEach(image => {
            const container = image.closest('article')?.querySelector('div[role="group"]');
            if (container) {
                const existingButton = container.querySelector('.saucenao-button');
                if (!existingButton) {
                    const sauceNAOButton = createSauceNAOButton(image.src);
                    container.appendChild(sauceNAOButton);
                }
            }
        });
    }

    const observer = new MutationObserver((mutations) => {
        mutations.forEach(() => {
            addSauceNAOButtons();
        });
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    addSauceNAOButtons();
})();