GreasyFork Count Script Items by Dynamic Categories

Count how many items belong to dynamic categories based on script names, display it vertically with total count and smooth design
Instalar o script ?
Faça uma pergunta, publique uma avaliação, ou denuncie o script.
Wrap lines
// ==UserScript==
// @name         GreasyFork Count Script Items by Dynamic Categories
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Count how many items belong to dynamic categories based on script names, display it vertically with total count and smooth design
// @author       Mahmudul Hasan Shawon
// @license      MIT
// @match        https://greasyfork.org/en/users/1392874-mahmudul-hasan-shawon
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Initialize an empty dictionary to store categories and their counts
    const categories = {};

    // Select all <li> items in the list
    const listItems = document.querySelectorAll('#user-script-list li');

    // Loop through each <li> item and extract the script name
    listItems.forEach(item => {
        const scriptName = item.querySelector('.script-link').textContent.toLowerCase();

        // Extract the category from the script name (for simplicity, we use the first word)
        const category = scriptName.split(' ')[0]; // This uses the first word of the script name as the category

        // If the category doesn't exist in the dictionary, initialize it with 0
        if (!categories[category]) {
            categories[category] = 0;
        }

        // Increment the count for this category
        categories[category]++;
    });

    // Calculate the total number of items
    const totalItems = listItems.length;

    // Create a div to display the results visually
    const countDisplay = document.createElement('div');
    countDisplay.innerHTML = `
        <div class="count-header"><strong>Total Scripts: ${totalItems}</strong></div>
        <div class="category-list">
            ${Object.keys(categories)
                .map(category => `${capitalizeFirstLetter(category)}: ${categories[category]} items`)
                .join('<br>')}
        </div>
    `;

    // Style the count display
    GM_addStyle(`
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

        #category-count-display {
            position: fixed;
            top: 120px;
            right: 10px;
            background-color: #69247C;
            color: white;
            padding: 15px;
            border-radius: 10px;
            font-size: 16px;
            font-family: 'Inter', sans-serif;
            z-index: 9999;
            max-width: 250px;
            width: auto;

            transition: all 0.3s ease;
            animation: slideIn 0.5s ease-out;
        }

        .count-header {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .category-list {
            font-size: 14px;
            line-height: 1.6;
        }

        .category-list br {
            margin-bottom: 5px;
        }

        #category-count-display:hover {
            background-color: rgba(0, 0, 0, 0.9);
            transform: scale(1.05);
        }

        /* Slide-in effect */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
    `);

    // Function to capitalize the first letter of each category
    function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }

    // Add the div to the page
    countDisplay.id = 'category-count-display';
    document.body.appendChild(countDisplay);
})();