☰

Color Highlighter

Highlights css compatible colors (rgb and hex) on the webpage

// ==UserScript==
// @name    Color Highlighter
// @description Highlights css compatible colors (rgb and hex) on the webpage
// @include /^https?://.*/
// @namespace   whiteabelincoln
// @author      whiteabelincoln
// @version     1.0
// @grant unsafeWindow
// ==/UserScript==
(function() {
'use strict';

let getHexComponents = (hex) => {
    let components = [];
    hex = hex.replace('#', '');
    if (hex.length == 3) {
        components = hex.match(/.{1,1}/g);
        components = components.map(e => {
            return ""+e+e;
        });
    } else if (hex.length == 6) {
        components = hex.match(/.{1,2}/g);
    }
    return components;
};
    
let contrast = (rgb) => {
    let c = rgb
    .map(e => { return e/255; })
    .map(e => {
        if (e <= 0.03928) return e / 12.92;
        else return Math.pow( (e+0.055) / 1.055, 2.4);
    });
    let l = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
    if (l > 0.179)
        return [0,0,0];
    else
        return [255,255,255];
};

let colorize = () => {
    var hex = new RegExp(/#([a-f\d]{6}|[a-f\d]{3})\b/ig);
    var rgb = new RegExp(/rgb(?:a)?\((\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b[, ]*){3,4}\)/ig);
    var span = document.createElement('span');

    if (window.self !== window.top) { return; }  // don't execute in a frame

    var theElems = document.evaluate(
        './/text()[normalize-space() != "" '
        + 'and not(ancestor::style) '
        + 'and not(ancestor::script) '
        + 'and not(ancestor::textarea)]',
        document.body, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

    if (!theElems.snapshotItem(0)) { return; }      // end execution if no elements found

    for (let i = 0; i < theElems.snapshotLength; i++) {
        let node = theElems.snapshotItem(i);

        if (hex.test(node.nodeValue)) {
            let sp = span.cloneNode(true);
            let hexval = node.nodeValue.match(hex)[0];
            let rgb = getHexComponents(hexval).map(e => { return parseInt(e, 16); });
            let fontColor = contrast(rgb);
            let replaceString = `<span style="background-color: $&; color: rgb(${fontColor[0]}, ${fontColor[1]}, ${fontColor[2]})">$&</span>`;
            
            sp.innerHTML = node.nodeValue.replace(hex, replaceString);
            node.parentNode.replaceChild(sp, node);
        } else if (rgb.test(node.nodeValue)) {
            let sp = span.cloneNode(true);
            let match = node.nodeValue.match(rgb)[0];
            let components = match.replace(/rgb(?:a)?\(/, '').replace(')','').split(',');
            let decimal = components.map(e => { return parseInt(e); });
            let fontColor = contrast(decimal);
            let replaceString = `<span style="background-color: $&; color: rgb(${fontColor[0]}, ${fontColor[1]}, ${fontColor[2]})">$&</span>`;
            
            sp.innerHTML = node.nodeValue.replace(rgb, replaceString);
            node.parentNode.replaceChild(sp, node);
        }
    }

};
    
unsafeWindow.colorize = colorize;
})();