Twitch Chat User Highlight

Highlights messages by user, on username or @username click
As of 21.01.2021. See ბოლო ვერსია.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Twitch Chat User Highlight
// @namespace    1N07
// @version      0.1
// @description  Highlights messages by user, on username or @username click
// @author       1N07
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
// @match        https://www.twitch.tv/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    //TODO: Need to handle page changes without full reload

    var MutTarget;
    var MutUser;
    const MutConf = {childList: true};
    const Observer = new MutationObserver(OnNewComment);

    addGlobalStyle(`
        .tcuh-highlighted {
            border: rgba(255,255,255,0.5) 2px solid;
            background: rgba(255,255,255,0.15);
        }
        .chat-line__message-mention, .mention-fragment
        {
            cursor: pointer;
        }
    `);


    $(function(){
        AfterChatIsAvailable((ChatList) => {
            MutTarget = ChatList;

            StartClickListener(ChatList);
        });
    });

    function AfterChatIsAvailable(callback)
    {
        let interval;
        interval = setInterval(() => {
            let ChatList = $("div.video-chat__message-list-wrapper > div > ul");
            if(ChatList.length == 0) ChatList = $(".chat-scrollable-area__message-container");
            if(ChatList.length > 0)
            {
                callback(ChatList);
                clearInterval(interval);
            }
        }, 50);
    }

    function StartClickListener(ChatList)
    {
        ChatList.on("click", ".video-chat__message-author, .chat-line__username", function(e){
            e.preventDefault();
            e.stopPropagation();

            let user = $(this).closest(".chat-line__message[data-user]");
            if(user.length == 0) user = $(this).find(".chat-author__display-name");

            user = user.data("user") || user.data("aUser");
            StartHighlightingUser(ChatList, user);
        });
        ChatList.on("click", ".chat-line__message-mention, .mention-fragment", function(e){
            e.preventDefault();
            e.stopPropagation();
            let user = $(this).data("login") || $(this).text().replace("@", "").toLowerCase();
            StartHighlightingUser(ChatList, user);
        });
    }

    function StartHighlightingUser(ChatList, user)
    {
        if(user && user.length > 0)
        {
            StopHighlightingUsers();
            if(user == MutUser)
                MutUser = null;
            else
            {
                MutUser = user;

                let targets = ChatList.find(".chat-line__message[data-user='"+MutUser+"']");
                if(targets.length > 0)
                {
                    targets.each(function(e){
                        $(this).addClass("tcuh-highlighted");
                    });
                }
                else
                {
                    ChatList.find(".chat-author__display-name[data-a-user='"+MutUser+"']").each(function(e){
                        let target = $(this).closest("li.tw-full-width");
                        if(target.length == 0) target = $(this).closest(".chat-line__message");
                        if(target.length > 0) target.addClass("tcuh-highlighted");
                    });
                }

                Observer.observe(MutTarget[0], MutConf);
            }
        }
    }
    function StopHighlightingUsers()
    {
        $(".tcuh-highlighted").removeClass("tcuh-highlighted");
        Observer.disconnect();
    }

    function OnNewComment(mutationsList, observer)
    {
        for(let i = 0; i < mutationsList.length; i++)
        {
            if(mutationsList[i].type == 'childList' && mutationsList[i].addedNodes.length > 0)
            {
                for(let j = 0; j < mutationsList[i].addedNodes.length; j++)
                {
                    if($(mutationsList[i].addedNodes[j]).find(".chat-author__display-name[data-a-user='"+MutUser+"']").length > 0)
                        $(mutationsList[i].addedNodes[j]).addClass("tcuh-highlighted");
                    else if($(mutationsList[i].addedNodes[j]).data("user") == MutUser)
                        $(mutationsList[i].addedNodes[j]).addClass("tcuh-highlighted");
                }
            }
        }
    }

    function addGlobalStyle(css)
    {
        var head, style;
        head = document.getElementsByTagName('head')[0];
        if (!head) { return; }
        style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        head.appendChild(style);
    }

})();