☰

GitHub Code Language Icons

Replaces GitHub's boring round code language icons with Material Design Icons.

目前為 2025-03-17 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         GitHub Code Language Icons
  3. // @description  Replaces GitHub's boring round code language icons with Material Design Icons.
  4. // @icon         https://github.githubassets.com/favicons/favicon-dark.svg
  5. // @version      1.9
  6. // @author       afkarxyz
  7. // @namespace    https://github.com/afkarxyz/misc-scripts/
  8. // @supportURL   https://github.com/afkarxyz/misc-scripts/issues
  9. // @license      MIT
  10. // @match        https://github.com/*
  11. // @grant        GM_setValue
  12. // @grant        GM_getValue
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.   'use strict';
  17.  
  18.   const CONFIG = {
  19.     case_01: true, // The average of all icons
  20.     case_02: true, // Organization's Repositories (https://github.com/orgs/yt-dlp/repositories)
  21.     case_03: true, // Languages
  22.     case_04: true, // Other Languages
  23.     case_05: true, // Filter by (https://github.com/search?q=spotify&type=code)
  24.     case_06: true, // More languages... (https://github.com/search?q=spotify&type=repositories)
  25.     case_07: true  // Search's Languages (https://github.com/search?q=spotify&type=repositories)
  26.   };
  27.  
  28.   const BASE_URL = 'https://raw.githubusercontent.com/afkarxyz/misc-scripts/refs/heads/main/';
  29.   const ICON_BASE_URL = `${BASE_URL}icons/`;
  30.  
  31.   let languageMappings = {};
  32.  
  33.   async function fetchLanguageMappings() {
  34.     const cacheKey = 'githubLanguageRemapCache';
  35.     const currentTime = Date.now();
  36.     const cachedData = JSON.parse(GM_getValue(cacheKey, '{}'));
  37.     
  38.     if (cachedData.timestamp && (currentTime - cachedData.timestamp < 7 * 24 * 60 * 60 * 1000)) {
  39.       return cachedData.mappings;
  40.     }
  41.     
  42.     try {
  43.       const response = await fetch(`${BASE_URL}remap.json`);
  44.       const data = await response.json();
  45.       
  46.       GM_setValue(cacheKey, JSON.stringify({
  47.         mappings: data.iconRemap,
  48.         timestamp: currentTime
  49.       }));
  50.       
  51.       return data.iconRemap;
  52.     } catch (error) {
  53.       console.error('Failed to fetch language mappings:', error);
  54.       return cachedData.mappings || {};
  55.     }
  56.   }
  57.  
  58.   function normalizeLanguageName(language) {
  59.     const normalizedLanguage = language.toLowerCase();
  60.  
  61.     for (const [iconName, languageList] of Object.entries(languageMappings)) {
  62.       if (languageList.includes(normalizedLanguage)) {
  63.         return iconName;
  64.       }
  65.     }
  66.  
  67.     return normalizedLanguage;
  68.   }
  69.  
  70.   async function fetchAvailableIcons() {
  71.     const cacheKey = 'githubLanguageIconsCache';
  72.     const currentTime = Date.now();
  73.     const cachedData = JSON.parse(GM_getValue(cacheKey, '{}'));
  74.  
  75.     if (cachedData.timestamp && (currentTime - cachedData.timestamp < 7 * 24 * 60 * 60 * 1000)) {
  76.       return cachedData.fileTypes;
  77.     }
  78.  
  79.     try {
  80.       const response = await fetch(`${BASE_URL}icons.json`);
  81.       const data = await response.json();
  82.  
  83.       GM_setValue(cacheKey, JSON.stringify({
  84.         fileTypes: data.fileTypes,
  85.         timestamp: currentTime
  86.       }));
  87.  
  88.       return data.fileTypes;
  89.     } catch (error) {
  90.       console.error('Failed to fetch icon list:', error);
  91.       return cachedData.fileTypes || [];
  92.     }
  93.   }
  94.  
  95.   async function replaceLanguageIcons() {
  96.     let availableIcons;
  97.     try {
  98.       availableIcons = await fetchAvailableIcons();
  99.     } catch (error) {
  100.       console.error('Error getting available icons:', error);
  101.       return;
  102.     }
  103.  
  104.     const processedElements = new Set();
  105.  
  106.     async function replaceOtherIcon(targetSvg) {
  107.       if (!CONFIG.case_04) return;
  108.  
  109.       try {
  110.         const response = await fetch(`${ICON_BASE_URL}other.svg`);
  111.         const svgText = await response.text();
  112.  
  113.         const parser = new DOMParser();
  114.         const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
  115.         const newSvg = svgDoc.querySelector('svg');
  116.  
  117.         const attributes = targetSvg.attributes;
  118.         for (let i = 0; i < attributes.length; i++) {
  119.           const attr = attributes[i];
  120.           if (attr.name !== 'class') {
  121.             newSvg.setAttribute(attr.name, attr.value);
  122.           }
  123.         }
  124.  
  125.         newSvg.setAttribute('width', '16');
  126.         newSvg.setAttribute('height', '16');
  127.         newSvg.setAttribute('viewBox', '0 0 24 24');
  128.  
  129.         const innerGroup = newSvg.querySelector('g') || newSvg.querySelector('path');
  130.         if (innerGroup) {
  131.           innerGroup.setAttribute('transform', 'scale(0.67)');
  132.         }
  133.  
  134.         const targetClasses = Array.from(targetSvg.classList);
  135.         targetClasses.forEach(className => {
  136.           newSvg.classList.add(className);
  137.         });
  138.  
  139.         newSvg.style.width = '16px';
  140.         newSvg.style.height = '16px';
  141.         newSvg.style.minWidth = '16px';
  142.         newSvg.style.minHeight = '16px';
  143.  
  144.         targetSvg.parentNode.replaceChild(newSvg, targetSvg);
  145.       } catch (error) {
  146.         console.error('Failed to replace Other icon:', error);
  147.       }
  148.     }
  149.  
  150.     function processElement(element) {
  151.       if (processedElements.has(element)) return;
  152.       processedElements.add(element);
  153.  
  154.       let langElement, language;
  155.  
  156.       // Case 1: The average of all icons
  157.       if (CONFIG.case_01 && element.matches('.repo-language-color')) {
  158.         const languageSpan = element.parentElement.querySelector('[itemprop="programmingLanguage"]');
  159.  
  160.         if (languageSpan && !languageSpan.dataset.iconProcessed) {
  161.           language = normalizeLanguageName(languageSpan.textContent);
  162.  
  163.           if (availableIcons.includes(language)) {
  164.             const iconImg = document.createElement('img');
  165.             iconImg.src = `${ICON_BASE_URL}${language}.svg`;
  166.             iconImg.alt = `${language} icon`;
  167.             iconImg.width = 16;
  168.             iconImg.height = 16;
  169.             iconImg.style.marginRight = '2px';
  170.             iconImg.style.verticalAlign = 'sub';
  171.  
  172.             element.parentElement.insertBefore(iconImg, element);
  173.             element.remove();
  174.             languageSpan.dataset.iconProcessed = 'true';
  175.           }
  176.         }
  177.       }
  178.       // Case 2: Organization's Repositories 
  179.       else if (CONFIG.case_02 && element.matches('.Box-sc-g0xbh4-0.fCvgBf')) {
  180.         const languageSpan = element.querySelector('.prc-Text-Text-0ima0');
  181.         
  182.         if (languageSpan && !languageSpan.dataset.iconProcessed) {
  183.           const languageText = languageSpan.textContent.trim();
  184.           language = normalizeLanguageName(languageText);
  185.           
  186.           element.innerHTML = '';
  187.           
  188.           const newLanguageSpan = document.createElement('span');
  189.           newLanguageSpan.className = 'Box-sc-g0xbh4-0 fVplbS prc-Text-Text-0ima0';
  190.           newLanguageSpan.textContent = languageText;
  191.           
  192.           if (availableIcons.includes(language)) {
  193.             const iconImg = document.createElement('img');
  194.             iconImg.src = `${ICON_BASE_URL}${language}.svg`;
  195.             iconImg.alt = `${language} icon`;
  196.             iconImg.width = 16;
  197.             iconImg.height = 16;
  198.             iconImg.style.verticalAlign = 'middle';
  199.             
  200.             element.appendChild(iconImg);
  201.           }
  202.           
  203.           element.appendChild(newLanguageSpan);
  204.           newLanguageSpan.dataset.iconProcessed = 'true';
  205.         }
  206.       }
  207.       // Case 3: Languages
  208.       else if (CONFIG.case_03 && element.matches('.d-inline')) {
  209.         langElement = element.querySelector('.text-bold');
  210.  
  211.         if (!langElement || langElement.textContent.toLowerCase() === 'other' || element.dataset.iconChecked) return;
  212.  
  213.         language = normalizeLanguageName(langElement.textContent);
  214.         element.dataset.iconChecked = 'true';
  215.  
  216.         const svg = element.querySelector('svg');
  217.  
  218.         if (!svg || !availableIcons.includes(language)) return;
  219.  
  220.         const img = document.createElement('img');
  221.         img.src = `${ICON_BASE_URL}${language}.svg`;
  222.         img.width = 16;
  223.         img.height = 16;
  224.         img.className = 'mr-2';
  225.         img.style.verticalAlign = 'middle';
  226.  
  227.         svg.parentNode.replaceChild(img, svg);
  228.       }
  229.       // Case 4: Other Languages
  230.       else if (CONFIG.case_04 && element.matches('.octicon-dot-fill')) {
  231.         const parentElement = element.closest('.d-inline');
  232.         if (parentElement) {
  233.           const languageElement = parentElement.querySelector('.text-bold');
  234.           if (languageElement && languageElement.textContent.toLowerCase() === 'other' && !element.dataset.iconProcessed) {
  235.             element.dataset.iconProcessed = 'true';
  236.             replaceOtherIcon(element);
  237.           }
  238.         }
  239.       }
  240.       // Case 5: Filter by
  241.       else if (CONFIG.case_05 && element.matches('.Box-sc-g0xbh4-0.hjDqIa')) {
  242.         const languageSpan = element.nextElementSibling;
  243.         if (languageSpan && languageSpan.getAttribute('aria-label') && !languageSpan.dataset.iconProcessed) {
  244.           language = normalizeLanguageName(languageSpan.getAttribute('aria-label').replace(' language', ''));
  245.  
  246.           if (availableIcons.includes(language)) {
  247.             const iconImg = document.createElement('img');
  248.             iconImg.src = `${ICON_BASE_URL}${language}.svg`;
  249.             iconImg.alt = `${language} icon`;
  250.             iconImg.width = 16;
  251.             iconImg.height = 16;
  252.             iconImg.style.marginRight = '4px';
  253.             iconImg.style.verticalAlign = 'middle';
  254.  
  255.             element.style.display = 'none';
  256.             languageSpan.parentNode.insertBefore(iconImg, languageSpan);
  257.             languageSpan.dataset.iconProcessed = 'true';
  258.           }
  259.         }
  260.       }
  261.       // Case 6: More languages...
  262.       else if (CONFIG.case_06 && element.matches('.ActionListItem-visual.ActionListItem-visual--leading')) {
  263.         const languageLabel = element.closest('.ActionListContent')?.querySelector('.ActionListItem-label.text-normal');
  264.         if (!languageLabel || !languageLabel.textContent || element.dataset.iconChecked) return;
  265.  
  266.         language = normalizeLanguageName(languageLabel.textContent);
  267.         element.dataset.iconChecked = 'true';
  268.  
  269.         const colorDiv = element.querySelector('div');
  270.         if (!colorDiv || !availableIcons.includes(language)) return;
  271.  
  272.         const img = document.createElement('img');
  273.         img.src = `${ICON_BASE_URL}${language}.svg`;
  274.         img.width = 16;
  275.         img.height = 16;
  276.         img.style.verticalAlign = 'middle';
  277.  
  278.         colorDiv.replaceWith(img);
  279.       }
  280.       // Case 7: Search's Languages
  281.       else if (CONFIG.case_07 && element.matches('.prc-ActionList-LeadingVisual-dxXxW, .prc-ActionList-VisualWrap-rfjV-')) {
  282.         if (element.dataset.iconChecked) return;
  283.         element.dataset.iconChecked = 'true';
  284.         
  285.         const listItem = element.closest('.prc-ActionList-ActionListItem-uq6I7');
  286.         if (!listItem) return;
  287.         
  288.         const languageDiv = listItem.querySelector('.Truncate__StyledTruncate-sc-23o1d2-0');
  289.         if (!languageDiv || !languageDiv.title) return;
  290.         
  291.         language = normalizeLanguageName(languageDiv.title);
  292.         
  293.         const colorDiv = element.querySelector('.Box-sc-g0xbh4-0');
  294.         if (!colorDiv || !availableIcons.includes(language)) return;
  295.         
  296.         const img = document.createElement('img');
  297.         img.src = `${ICON_BASE_URL}${language}.svg`;
  298.         img.alt = `${language} icon`;
  299.         img.width = 16;
  300.         img.height = 16;
  301.         img.style.verticalAlign = 'middle';
  302.         
  303.         colorDiv.replaceWith(img);
  304.       }
  305.     }
  306.  
  307.     const observer = new MutationObserver((mutations) => {
  308.       for (const mutation of mutations) {
  309.         for (const node of mutation.addedNodes) {
  310.           if (node.nodeType === Node.ELEMENT_NODE) {
  311.             if (node.matches('.d-inline, .Box-sc-g0xbh4-0.fCvgBf, .repo-language-color, .Box-sc-g0xbh4-0.hjDqIa, .ActionListItem-visual.ActionListItem-visual--leading, .octicon-dot-fill, .prc-ActionList-LeadingVisual-dxXxW, .prc-ActionList-VisualWrap-rfjV-')) {
  312.               processElement(node);
  313.             } else {
  314.               node.querySelectorAll('.d-inline, .Box-sc-g0xbh4-0.fCvgBf, .repo-language-color, .Box-sc-g0xbh4-0.hjDqIa, .ActionListItem-visual.ActionListItem-visual--leading, .octicon-dot-fill, .prc-ActionList-LeadingVisual-dxXxW, .prc-ActionList-VisualWrap-rfjV-').forEach(processElement);
  315.             }
  316.           }
  317.         }
  318.       }
  319.     });
  320.  
  321.     observer.observe(document.body, {
  322.       childList: true,
  323.       subtree: true
  324.     });
  325.  
  326.     document.querySelectorAll('.d-inline, .Box-sc-g0xbh4-0.fCvgBf, .repo-language-color, .Box-sc-g0xbh4-0.hjDqIa, .ActionListItem-visual.ActionListItem-visual--leading, .octicon-dot-fill, .prc-ActionList-LeadingVisual-dxXxW, .prc-ActionList-VisualWrap-rfjV-').forEach(processElement);
  327.   }
  328.  
  329.   async function init() {
  330.     languageMappings = await fetchLanguageMappings();
  331.     replaceLanguageIcons();
  332.   }
  333.  
  334.   if (document.readyState === 'loading') {
  335.     document.addEventListener('DOMContentLoaded', init);
  336.   } else {
  337.     init();
  338.   }
  339. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址