visual hex colors in the chat

visualhex.js

// ==UserScript==
// @name          better colors
// @author        Robert Lemon
// @version       0.0.0.1
// @namespace     
// @description   replaces #ff0000 with [actual color] #ff0000.
// @include       http://chat.stackoverflow.com/rooms/*
// @include       http://chat.stackexchange.com/rooms/*
// @include       https://chat.stackoverflow.com/rooms/*
// @include       https://chat.stackexchange.com/rooms/*
// ==/UserScript==


(function() {
"use strict";
var chat = document.getElementById('chat');
function visualHexColors(node) {
    if (node.classList && node.classList.contains('message') && !node.classList.contains('pending') && !node.querySelector('.ob-post')) {
        [].forEach.call(node.childNodes, function(child) {
            if (child.parentNode.tagName === 'PRE') return;
            if (/\B#(?:[0-9a-f]{3}){1,2}\b/ig.test(child.textContent)) {
                child.innerHTML = child.innerHTML.replace(/\B#(?:[0-9a-f]{3}){1,2}\b/ig, function(match) {
                    return '<span style="width:12px;height:12px;border:1px solid #222;background-color:' + match + ';display:inline-block;"></span>' + match;
                });
            }
        });
    }
}

setTimeout(function() {
    [].forEach.call(chat.querySelectorAll('.user-container .message'), visualHexColors);
}, 1000); // some messages are never parsed. this solves that.
new MutationObserver(function(records) {
    records.forEach(function(record) {
        [].forEach.call(record.addedNodes, visualHexColors);
    });
}).observe(chat, {
    childList: true,
    subtree: true
});
}());