Kindroid.ai Tools / Background / Transparency

Allows the user to customize the background image/GiF/Mp4 and some visual test.
当前为 2023-09-19 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Kindroid.ai Tools / Background / Transparency
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  Allows the user to customize the background image/GiF/Mp4 and some visual test.
// @match        https://kindroid.ai/home
// @grant        GM_setValue
// @grant        GM_getValue
// @info         By TenPassion
// @license      MIT
// ==/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
    function changeImageBackground(imageURL) {
        const targetElement = document.querySelector('.css-1lvpjll');
        if (targetElement) {
            // Remove the old background image (if any)
            targetElement.style.backgroundImage = 'none';
            targetElement.style.backgroundVideo = 'none';

            if (imageURL !== '') {
                // Set the background image
                targetElement.style.backgroundImage = `url("${imageURL}")`;
                targetElement.style.backgroundSize = 'cover';
                targetElement.style.backgroundRepeat = 'no-repeat';
            }
        }
    }

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

            if (videoURL !== '') {
                // Create a video element for the background
                const videoElement = document.createElement('video');
                videoElement.src = videoURL;
                videoElement.autoplay = true;
                videoElement.loop = true;
                videoElement.muted = true;
                videoElement.style.objectFit = 'cover';
                targetElement.appendChild(videoElement);
            }
        }
    }

    // Function to adjust opacity of 'css-teti0a' and 'css-100dd8p' elements
    function adjustOpacityTeti0a() {
        const elementsToAdjust = document.querySelectorAll('.css-teti0a, .css-1j9xj7u');
        elementsToAdjust.forEach(function(element) {
            element.style.opacity = '0.85';
        });
    }

    // Function to adjust opacity of 'css-100dd8p' elements
    function adjustOpacity100dd8p() {
        const elementsToAdjust = document.querySelectorAll('.css-100dd8p');
        elementsToAdjust.forEach(function(element) {
            element.style.opacity = '0.85';
        });
    }

    // Function to handle file selection for custom media
    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);

                if (isVideo) {
                    changeImageBackground(''); // Clear any existing image background
                    changeVideoBackground(mediaURL);
                } else {
                    changeVideoBackground(''); // Clear any existing video background
                    changeImageBackground(mediaURL);
                }

                // Adjust opacity when media changes
                adjustOpacityTeti0a();
                adjustOpacity100dd8p();
            };
            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 media background
    const customMediaButton = document.createElement('button');
    customMediaButton.textContent = '😈';
    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 (isVideo) {
        changeVideoBackground(customMediaURL);
    } else {
        changeImageBackground(customMediaURL);
    }

    // Add event listeners for opacity adjustments
    fileInput.addEventListener('change', function() {
        // Adjust opacity when custom media is selected
        adjustOpacityTeti0a();
        adjustOpacity100dd8p();
    });

    window.addEventListener('load', function() {
        // Adjust opacity when the page is loaded
        adjustOpacityTeti0a();
        adjustOpacity100dd8p();
    });

    // 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);
                    adjustOpacityTeti0a();
                    adjustOpacity100dd8p();
                }

            }
        }
    });

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

    // Initial adjustments
    adjustOpacityTeti0a();
    adjustOpacity100dd8p();
})();
欢迎访问Greasy Fork镜像
