Twitch - Nullify Message Effects userscript

TwitchNullifyMessageEffects.user.js

// ==UserScript==
// @name         Twitch - Nullify Message Effects
// @version      0.1
// @description  Workaround to delete the <div> class that renders Message Effects power-up redeems and present them as a regular chat message, as of Jul 18 2024
// @include      https://*.twitch.tv/*
// @include      https://twitch.tv/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to process and remove specific div elements
    function processAndRemoveDivs(mutationList) {
        mutationList.forEach(mutation => {
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach(node => {
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        // Check if the node or any of its children have the keyword "simmerBackground" in their class
                        let elements = node.querySelectorAll('[class*="simmerBackground"]');
                        if (node.classList && Array.from(node.classList).some(cls => cls.startsWith('simmerBackground'))) {
                            elements = [node, ...elements];
                        }
                        elements.forEach(el => {
                            console.Log("Removing animated background in chat message.");
                            // Find the inner <div> two levels deep with the class "chat-line--inline chat-line__message"
                            let targetDiv = el.querySelector('div div.chat-line--inline.chat-line__message');
                            if (targetDiv) {
                                // Replace the outer element with the targetDiv
                                el.parentElement.replaceChild(targetDiv, el);
                            }
                        });
                    }
                });
            }
        });
    }

    // Function to observe the chat container for new chat lines
    function observeChatContainer() {
        const chatContainer = document.querySelector('.stream-chat');

        if (chatContainer) {
            const observer = new MutationObserver(processAndRemoveDivs);
            observer.observe(chatContainer, {
                childList: true,
                subtree: true
            });
        } else {
            // Retry if chat container not found
            setTimeout(observeChatContainer, 1000);
        }
    }

    // Start observing when the page is fully loaded
    window.addEventListener('load', observeChatContainer);

})();