☰

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

目前为 2024-12-22 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         GreasyFork Count Script Items by Dynamic Categories
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Count how many items belong to dynamic categories based on script names, display it vertically with total count and smooth design
  6. // @author       Mahmudul Hasan Shawon
  7. // @license      MIT
  8. // @match        https://greasyfork.org/en/users/1392874-mahmudul-hasan-shawon
  9. // @grant        GM_addStyle
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Initialize an empty dictionary to store categories and their counts
  16.     const categories = {};
  17.  
  18.     // Select all <li> items in the list
  19.     const listItems = document.querySelectorAll('#user-script-list li');
  20.  
  21.     // Loop through each <li> item and extract the script name
  22.     listItems.forEach(item => {
  23.         const scriptName = item.querySelector('.script-link').textContent.toLowerCase();
  24.  
  25.         // Extract the category from the script name (for simplicity, we use the first word)
  26.         const category = scriptName.split(' ')[0]; // This uses the first word of the script name as the category
  27.  
  28.         // If the category doesn't exist in the dictionary, initialize it with 0
  29.         if (!categories[category]) {
  30.             categories[category] = 0;
  31.         }
  32.  
  33.         // Increment the count for this category
  34.         categories[category]++;
  35.     });
  36.  
  37.     // Calculate the total number of items
  38.     const totalItems = listItems.length;
  39.  
  40.     // Create a div to display the results visually
  41.     const countDisplay = document.createElement('div');
  42.     countDisplay.innerHTML = `
  43.         <div class="count-header"><strong>Total Scripts: ${totalItems}</strong></div>
  44.         <div class="category-list">
  45.             ${Object.keys(categories)
  46.                 .map(category => `${capitalizeFirstLetter(category)}: ${categories[category]} items`)
  47.                 .join('<br>')}
  48.         </div>
  49.     `;
  50.  
  51.     // Style the count display
  52.     GM_addStyle(`
  53.         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
  54.  
  55.         #category-count-display {
  56.             position: fixed;
  57.             top: 120px;
  58.             right: 10px;
  59.             background-color: #69247C;
  60.             color: white;
  61.             padding: 15px;
  62.             border-radius: 10px;
  63.             font-size: 16px;
  64.             font-family: 'Inter', sans-serif;
  65.             z-index: 9999;
  66.             max-width: 250px;
  67.             width: auto;
  68.  
  69.             transition: all 0.3s ease;
  70.             animation: slideIn 0.5s ease-out;
  71.         }
  72.  
  73.         .count-header {
  74.             font-size: 18px;
  75.             font-weight: bold;
  76.             margin-bottom: 10px;
  77.         }
  78.  
  79.         .category-list {
  80.             font-size: 14px;
  81.             line-height: 1.6;
  82.         }
  83.  
  84.         .category-list br {
  85.             margin-bottom: 5px;
  86.         }
  87.  
  88.         #category-count-display:hover {
  89.             background-color: rgba(0, 0, 0, 0.9);
  90.             transform: scale(1.05);
  91.         }
  92.  
  93.         /* Slide-in effect */
  94.         @keyframes slideIn {
  95.             from {
  96.                 opacity: 0;
  97.                 transform: translateX(20px);
  98.             }
  99.             to {
  100.                 opacity: 1;
  101.                 transform: translateX(0);
  102.             }
  103.         }
  104.     `);
  105.  
  106.     // Function to capitalize the first letter of each category
  107.     function capitalizeFirstLetter(string) {
  108.         return string.charAt(0).toUpperCase() + string.slice(1);
  109.     }
  110.  
  111.     // Add the div to the page
  112.     countDisplay.id = 'category-count-display';
  113.     document.body.appendChild(countDisplay);
  114. })();