Chess.com Board Changer, Changes so it has notations! (CORS Fix)

Replace Chess.com's 200.png with custom image *it has notations on it for white and black!*

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name         Chess.com Board Changer, Changes so it has notations! (CORS Fix)
// @namespace    http://tampermonkey.net/
// @version      v3.193.13.6-7
// @description  Replace Chess.com's 200.png with custom image *it has notations on it for white and black!*
// @description   Uppercase are for white lowercase Are for black!
// @author       NotYou
// @match        https://*.chess.com/*
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @connect      cdn.discordapp.com
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    // Your Discord image URL
    const discordImageUrl = 'https://i.imgur.com/zhMb2U4_d.webp?maxwidth=760&fidelity=grand';

    // We'll use a data URL to avoid CORS issues
    // This will be populated once we fetch and convert the image
    let dataUrl = '';

    // Fetch the image and convert it to a data URL to avoid CORS issues
    GM_xmlhttpRequest({
        method: 'GET',
        url: discordImageUrl,
        responseType: 'blob',
        onload: function(response) {
            const blob = response.response;
            const reader = new FileReader();
            reader.onloadend = function() {
                dataUrl = reader.result;
                console.log('Image converted to data URL');

                // Now apply the replacement with our data URL
                applyReplacement();
            };
            reader.readAsDataURL(blob);
        },
        onerror: function(error) {
            console.error('Failed to fetch image:', error);
        }
    });

    function applyReplacement() {
        // Add CSS to replace all instances of 200.png
        GM_addStyle(`
            /* Target background images */
            [style*="200.png"] {
                background-image: url('${dataUrl}') !important;
            }

            /* Target image elements */
            img[src*="200.png"] {
                content: url('${dataUrl}') !important;
            }
        `);

        // Replace existing images
        function replaceExistingImages() {
            // Skip if data URL is not ready yet
            if (!dataUrl) return;

            // Replace image src attributes
            document.querySelectorAll('img[src*="200.png"]').forEach(img => {
                img.src = dataUrl;
            });

            // Replace background images
            document.querySelectorAll('*').forEach(el => {
                const computedStyle = getComputedStyle(el);
                if (computedStyle.backgroundImage.includes('200.png')) {
                    el.style.backgroundImage = `url('${dataUrl}')`;
                }
            });
        }

        // Run once and then periodically
        replaceExistingImages();
        setInterval(replaceExistingImages, 2000);

        // Observe DOM changes
        const observer = new MutationObserver(replaceExistingImages);
        observer.observe(document.body || document.documentElement, {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['style', 'src']
        });

        console.log('Chess.com board replacement active with data URL');
    }
})();