Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Readable Twitch chat

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!
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;
}
// ==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);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.