Readable Twitch chat

instruction.md

Chrome

• Download the Stylus extension (custom CSS)
• Download the Tampermonkey extension (custom JS)
• In Stylus, create a style for twitch.tv, and copy the stylus_chrome.css lines into it, and click save
• In Tampermonkey, "Create a new script..." and copy the tampermonkey_chrome.js lines into it, and click File->Save (in Tampermonkey on the top left)
• Refresh the twitch page, and chat should now look a lot better.

Firefox

• Instructions coming soon!

Safari

• Instructions coming soon!

stylus_chrome.css

span[data-a-target="chat-timestamp"] {
    margin-left: -8px;
}

span[aria-hidden="true"]:after {
    white-space: pre;
    content: "\a";
}

div[data-a-target="chat-line-message"] {
    border-bottom: #454545 1px solid;
    overflow: hidden;
}

span[data-a-target="chat-message-username"] {
    float: right;
}

tampermonkey_chrome.js

// ==UserScript==
// @name         Chat Coloring
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Make Twitch chat actually f***ing readable
// @author       Dominic Muller
// @match        https://www.twitch.tv/*
// @require http://code.jquery.com/jquery-3.4.1.min.js
// @grant        none
// ==/UserScript==

const messageColorizer = function(e) {
    let usernameColor = window.jQuery(e.target).find("[data-a-target=chat-message-username]").css("color");
    if(usernameColor) {
        let rgb = usernameColor.split(",").map((s) => {return s.replace(/\D/g, "")}).map(Number).map((num) => num/4.5);
        let outputStr = "rgb(" + rgb.join(",") + ")";
        window.jQuery(e.target).css("background-color", outputStr);
    }
};

(function() {
    'use strict';
    setTimeout(function() {
        let chatSection = window.jQuery("[role=log]")[0];
        chatSection.addEventListener("DOMNodeInserted", messageColorizer, false);
    }, 2000);
})();