Twitch: <message deleted>

show deleted messages in twitch chat

// ==UserScript==
// @name         Twitch: <message deleted>
// @namespace    https://greasyfork.org/users/221926
// @version      1.1
// @description  show deleted messages in twitch chat
// @include	     https://www.twitch.tv/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    const ALWAYS_SHOW_DELETED_MESSAGES = "ALWAYS_SHOW_DELETED_MESSAGES";
    const INPUT_ID = "show-deleted-messages-input";

    let alwaysShow = localStorage.getItem(ALWAYS_SHOW_DELETED_MESSAGES) === "true";

    function onclick(event) {
        let e = event.target;
        while (e.initialChildNodes == null) { e = e.parentNode }
        showMessage(e);
        return false;
    }

    function showMessage(parentNode) {
        parentNode.style.backgroundColor = "rgba(255, 0, 0, .05)";
        parentNode.style.boxShadow = "inset 4px 0 0 0 rgba(255, 0, 0, .2)";
        Array.from(parentNode.childNodes).forEach(e => parentNode.removeChild(e))
        parentNode.initialChildNodes.forEach(e => parentNode.appendChild(e))
    }

    function addSetting() {
        if (document.getElementById(INPUT_ID) == null) {
            let container = document.createElement("div");
            container.innerHTML = '<div class="tw-mg-b-1"><div class="tw-checkbox tw-font-size-6"><input class="tw-checkbox__input" type="checkbox" id="' + INPUT_ID + '"' + (alwaysShow ? ' checked' : '') +'><label class="tw-checkbox__label" for="' + INPUT_ID + '">Always show deleted messages (userscript)</label></div></div>';
            container.getElementsByTagName("input")[0].onchange = function (e) { localStorage.setItem(ALWAYS_SHOW_DELETED_MESSAGES, alwaysShow = e.target.checked); };
            let parentNode = document.getElementsByClassName("chat-settings__content")[0].lastChild;
            parentNode.insertBefore(container.firstChild, (Array.from(parentNode.childNodes).filter(e => ((e.firstChild || {}).classList || {contains:_=>false}).contains("tw-checkbox")).slice(-1)[0] || {}).nextSibling);
        }
    }

    (new MutationObserver(function(mutationList) {
        mutationList.forEach(mutation => {
            Array.from(mutation.addedNodes).filter(e => e.className === "chat-line__message").forEach(e => {
                e.initialChildNodes = Array.from(e.childNodes)
            })
            Array.from(mutation.addedNodes).filter(e => e.className === "chat-line__message--deleted").forEach(e => {
				if (!alwaysShow) {
					e.innerHTML = "<a href>" + e.innerHTML + "</a>";
					e.onclick = onclick;
				} else { showMessage(mutation.target) }
            })
            if (Array.from(mutation.addedNodes).filter(e => (e.classList || {contains:_=>false}).contains("chat-settings")).length > 0) {
                addSetting()
            }
		})
    })).observe(document, {childList: true, subtree: true});
})();