☰

Greasy Fork 支持简体中文。

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