kindroid.ai Tools, BackGround

Allows the user to customize the background/GIF image and some visual test.
当前为 2023-09-19 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         kindroid.ai Tools, BackGround 
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Allows the user to customize the background/GIF image and some visual test.
// @match        https://kindroid.ai/home
// @grant        GM_setValue
// @grant        GM_getValue
// @info         By TenPassion
// @license      GNU GPLv3
// ==/UserScript==

(function() {
    'use strict';

    // Function to change text
    function changeText(elements) {
        const text1 = document.querySelector('.css-19hb772');
        const text2 = document.querySelector('.css-ppua9z');
        elements.forEach(function(element) {
            element.textContent = text1.textContent + ' x ' + text2.textContent + ' on Kindroid ';
        });
    }

    // Function to remove elements based on XPath
    function removeElements(xpath) {
        const elementsToRemove = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null);
        let element = elementsToRemove.iterateNext();
        while (element) {
            element.parentNode.removeChild(element);
            element = elementsToRemove.iterateNext();
        }
    }

    // Function to change the background image or video
    function changeBackground(mediaURL, isVideo) {
        const targetElement = document.querySelector('.css-1lvpjll');
        if (targetElement) {
            // Remove the old background (if any)
            targetElement.style.backgroundImage = 'none';
            targetElement.style.backgroundVideo = 'none';

            if (mediaURL) {
                if (isVideo) {
                    // Create a video element for the background
                    const videoElement = document.createElement('video');
                    videoElement.src = mediaURL;
                    videoElement.autoplay = true;
                    videoElement.loop = true;
                    videoElement.muted = true;
                    videoElement.style.objectFit = 'cover';
                    targetElement.appendChild(videoElement);
                } else {
                    // Set the background image
                    targetElement.style.backgroundImage = `url("${mediaURL}")`;
                    targetElement.style.backgroundSize = 'cover';
                    targetElement.style.backgroundRepeat = 'no-repeat';
                }
            }
        }
    }

    // Function to handle file selection for custom background media (image, video, or GIF)
    function handleFileSelect(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const mediaURL = e.target.result;
                const isVideo = file.type.startsWith('video') || file.name.toLowerCase().endsWith('.mp4');
                GM_setValue('customMediaURL', mediaURL);
                GM_setValue('isVideo', isVideo);
                changeBackground(mediaURL, isVideo);
            };
            if (file.type.startsWith('video') || file.name.toLowerCase().endsWith('.mp4')) {
                reader.readAsDataURL(file); // Load as video
            } else {
                reader.readAsDataURL(file); // Load as image or GIF
            }
        }
    }

    // Create a hidden file input element for media customization
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.style.display = 'none';
    fileInput.addEventListener('change', handleFileSelect);

    // Create a button for customizing the background media
    const customMediaButton = document.createElement('button');
    customMediaButton.textContent = '😈'; // You can use a different emoji for media
    customMediaButton.style.position = 'fixed';
    customMediaButton.style.bottom = '10px';
    customMediaButton.style.right = '10px';
    customMediaButton.style.zIndex = '9999';
    customMediaButton.addEventListener('click', function() {
        fileInput.click();
    });

    // Append the file input and custom media button to the document body
    document.body.appendChild(fileInput);
    document.body.appendChild(customMediaButton);

    // Get the URL of the custom media from local storage
    const customMediaURL = GM_getValue('customMediaURL', '');
    const isVideo = GM_getValue('isVideo', false);
    if (customMediaURL) {
        changeBackground(customMediaURL, isVideo);
    }

    // Add an event listener to re-display the media when the page is loaded
    window.addEventListener('load', function() {
        const customMediaURL = GM_getValue('customMediaURL', '');
        const isVideo = GM_getValue('isVideo', false);
        if (customMediaURL) {
            changeBackground(customMediaURL, isVideo);
        }
    });

    // Use MutationObserver to watch for changes in the DOM
    const observer = new MutationObserver(function(mutationsList, observer) {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                const elements = document.querySelectorAll('.chakra-text.css-s68iw5');
                if (elements.length > 0) {
                    changeText(elements);
                }
                removeElements('//header/div[2]/a[1]/*[1]');
                removeElements('//header/div[2]/a[2]/*[1]');
            }
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();
欢迎访问Greasy Fork镜像
