gistfile1.txt

(function () {
    'use strict';

    function categorizeAndRankColorsWithRanksOnWebsite() {
        const isExcludedElement = (element) => element.tagName !== 'STYLE' && element.tagName !== 'SCRIPT';

        const allElements = Array.from(document.body.getElementsByTagName('*')).filter(isExcludedElement);

        const colorCategories = {
            font: [],
            background: [],
            // other: [],
        };

        const colorProperties = ['color', 'background-color'];

        for (let element of allElements) {
            const computedStyle = window.getComputedStyle(element);

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

                if (colorValue && colorValue !== 'transparent' && colorValue !== 'rgba(0, 0, 0, 0)') {
                    let category = property === 'color' ? colorCategories.font : colorCategories.background;

                    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 });
                    }
                }
            }
        }

        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));

    const createColorCollection = () => {
        const div = document.createElement('div');
        div.id = 'color-collection';
        // <button onclick="this.parentNode.parentNode.remove()">Close</button>

        var htmlContent = `
        <header>
        <button id="move">move</button>
        <h1>Color Collection</h1>
        <button id="remove">Close</button>
        </header>`;

        for (let category in colorCategories) {
            htmlContent += `
                <h2>${category}</h2>
                <table>
                <tr>
                <th>Color</th>
                <th>CSS</th>
                <th>Rank</th>
                <th>Count</th>
                </tr>`;

            let i = 0;
            for (let { color, count, rank } of colorCategories[category]) {
                i++;
                htmlContent += `
                    <tr>
                    <td style="background-color: ${color}"></td>
                    <td style="width:400px; user-select:text;">--${category}-${i}: ${color};</td>
                    <td style="text-align:end;">${rank}</td>
                    <td style="text-align:end;">${count}</td>
                    </tr>`;
            }

            htmlContent += '</table>';
        }

        div.innerHTML = htmlContent;
        const style = document.createElement('style');
        style.innerHTML = /*CSS*/ `
        #color-collection {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-height: 90vh;
            max-width: 90vw;
            overflow: auto;
            border: 1px solid black;
            border-radius: 15px;
            padding: 16px;
            padding-top: 0;
            background-color: hsl(0, 0%, 14%);
            color: hsl(0, 0%, 93%);
            font-family: monospace;
            user-select:none;
            z-index: 99999;
        }
        #color-collection header {
            position: sticky;
            top: 0;
            padding-top: 16px;
            display:flex;
            align-items: start;
            justify-content: space-between;
            gap:20px;
        }
        #color-collection > * {
            background-color: hsl(0, 0%, 14%);
            color: hsl(0, 0%, 93%);
            font-family: monospace;
            margin:0;
        }
        #color-collection h1 {
            position: sticky;
            top: 0;
            color: hsl(0, 0%, 93%);
            padding-top: 0px;
            line-height: 1;
            margin:0;
            font-size: 50px;
        }
        #color-collection h2 {
            margin:0;
            margin-top: 20px;
            font-size: 30px;
            text-transform: capitalize;
        }
        #color-collection table,
        #color-collection th,
        #color-collection td {
            border-collapse: collapse;
            border: 1px solid black;
            padding: 5px;
            font-size: 16px;
            white-space: nowrap;
        }
        #color-collection button {
            _position: fixed;
            _top: 22px;
            _right: 22px;
            border: 1px solid black;
            border-radius: 5px;
            padding: 5px;
            color: hsl(0, 0%, 93%);
            background-color: hsl(0, 0%, 29%);
            height: fit-content;
            font-size: 16px;
            cursor: pointer;
        }
        `;

        div.appendChild(style);
        document.body.appendChild(div);
        makeElementDraggable(div);
        const removeButton = document.getElementById('remove');
        removeButton.onclick = () => {
            div.remove();
            document.getElementById('color-collection').remove();
        };
    };
    createColorCollection();

    function makeElementDraggable(elmnt) {
        var pos1 = 0,
            pos2 = 0,
            pos3 = 0,
            pos4 = 0;

        document.getElementById('move').onmousedown = dragMouseDown;

        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            elmnt.style.top = elmnt.offsetTop - pos2 + 'px';
            elmnt.style.left = elmnt.offsetLeft - pos1 + 'px';
        }

        function closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }
})();

javascript:(function(){
    var script = document.createElement('script');
    script.src = 'https://dev.rasal.de/gm/ColorCollection.js';
    script.id = 'color-collection';
    document.body.appendChild(script);
  })();