ColorCollection.js

// Shows all font and background colors on an table,
// use with Greasemonkes or as a browser bookmark
(function () {
    'use strict';

    function categorizeAndRankColorsWithRanksOnWebsite() {
        // let allElements = document.getElementsByTagName('*');
        const allElements = Array.from(document.body.getElementsByTagName('*')).filter((element) => element.tagName !== 'STYLE' && element.tagName !== 'SCRIPT');
        // console.log('allElements', allElements);
        const colorCategories = {
            font: [],
            background: [],
            // other: [],
        };

        for (let element of allElements) {
            const computedStyle = window.getComputedStyle(element);
            const colorProperties = ['color', 'background-color'];
            // const colorProperties = ['color', 'background-color', 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'];

            for (let property of colorProperties) {
                const colorValue = computedStyle.getPropertyValue(property).trim();

                if (colorValue && colorValue !== 'transparent' && colorValue !== 'rgba(0, 0, 0, 0)') {
                    let category = null;

                    if (property === 'color') {
                        category = colorCategories.font;
                    } else if (property === 'background-color') {
                        category = colorCategories.background;
                    } else {
                        category = colorCategories.other;
                    }
                    // console.log('\n\nproperty', property);
                    // console.log('element', element);
                    // console.log('colorValue', colorValue);
                    // console.log('computedStyle', computedStyle);

                    const existingColor = category.find((item) => item.color === colorValue);

                    if (existingColor) {
                        existingColor.count++;
                        existingColor.rank += element.textContent.length;
                    } else {
                        let rank = element.textContent.length;
                        category.push({ color: colorValue, count: 1, rank });
                    }
                }
            }
        }

        // sort colorCategories by rank
        for (let category in colorCategories) {
            colorCategories[category].sort((a, b) => b.rank - a.rank);
        }

        return { colorCategories };
    }

    const { colorCategories } = categorizeAndRankColorsWithRanksOnWebsite();
    console.log(JSON.stringify(colorCategories, null, 4));

    // creat an div element and append it to the body
    const div = document.createElement('div');
    div.id = 'color-collection';
    let HTML = '<h1>Color Collection</h1><br>';
    for (let category in colorCategories) {
        HTML += '<h2>' + category + '</h2>';
        HTML += '<table style="">';
        HTML += '<tr>';
        HTML += '<th style="user-select:none;">Color</th>';
        HTML += '<th style="user-select:none;">CSS</th>';
        HTML += '<th style="user-select:none;">Rank</th>';
        HTML += '<th style="user-select:none;">Count</th>';
        HTML += '</tr>';

        let i = 0;
        for (let { color, count, rank } of colorCategories[category]) {
            i++;
            HTML += '<tr>';
            HTML += `<td style="user-select:none; background-color: ${color}"></td>`;
            HTML += `<td>--${category}-${i}: ${color};</td>`;
            HTML += '<td style="user-select:none;">' + rank + '</td>';
            HTML += '<td style="user-select:none;">' + count + '</td>';
            HTML += '</tr>';
        }
        HTML += '</table><br>';
    }
    div.innerHTML = HTML;
    // div.innerHTML = HTML + HTML + HTML + HTML;
    const style = document.createElement('style');
    style.innerHTML = `
    #color-collection {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: 90vh;
        max-width: 80rem;
        overflow: auto;
        border: 1px solid black;
        border-radius: 15px;
        padding: 1rem;
        padding-top: 0rem;
        background-color: white;
    }
    #color-collection h1{
        position: sticky;
        top: 0;
        padding-top: 1rem;
        background-color: white;
    }
    #color-collection h1,h2 {
            font-family: monospace;
            text-transform: capitalize;
            margin:0;
            _margin-top: 1rem;
    }

    #color-collection table,
    #color-collection th,
    #color-collection td {
            font-family: monospace;
            border-collapse: collapse;
            border: 1px solid black;
            padding: 5px;
    }
    #color-collection button {
            font-family: monospace;
            text-transform: capitalize;
            margin-top: 1rem;
            float:right;
    }
    `;

    const button = document.createElement('button');
    button.innerHTML = 'Close';
    button.onclick = () => {
        div.remove();
    };
    div.appendChild(button);
    div.appendChild(style);
    document.body.appendChild(div);
})();

// For browser bookmark:
// javascript:(function(){
//     var script = document.createElement('script');
//     script.src = 'https://domain.com/ColorCollection.js';
//     document.body.appendChild(script);
//   })();