☰

GitHub Code Language Icons

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

当前为 2024-12-17 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         GitHub Code Language Icons
  3. // @description  Replaces GitHub's code language icons with Material Design Icons.
  4. // @icon         https://github.githubassets.com/favicons/favicon-dark.svg
  5. // @version      1.2
  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 BASE_URL = 'https://raw.githubusercontent.com/afkarxyz/misc-scripts/refs/heads/main/';
  19.   const ICON_BASE_URL = `${BASE_URL}icons/`;
  20.  
  21.   async function fetchLanguageMappings() {
  22.     const cacheKey = 'githubLanguageRemapCache';
  23.     const currentTime = Date.now();
  24.     
  25.     const cachedData = JSON.parse(GM_getValue(cacheKey, '{}'));
  26.     
  27.     if (cachedData.timestamp && (currentTime - cachedData.timestamp < 7 * 24 * 60 * 60 * 1000)) {
  28.       return cachedData.mappings;
  29.     }
  30.     
  31.     try {
  32.       const response = await fetch(`${BASE_URL}remap.json`);
  33.       const data = await response.json();
  34.       
  35.       GM_setValue(cacheKey, JSON.stringify({
  36.         mappings: data.iconRemap,
  37.         timestamp: currentTime
  38.       }));
  39.       
  40.       return data.iconRemap;
  41.     } catch (error) {
  42.       console.error('Failed to fetch language mappings:', error);
  43.       return cachedData.mappings || {};
  44.     }
  45.   }
  46.  
  47.   let languageMappings = {};
  48.  
  49.   function normalizeLanguageName(language) {
  50.     const normalizedLanguage = language.toLowerCase();
  51.     
  52.     for (const [iconName, languageList] of Object.entries(languageMappings)) {
  53.       if (languageList.includes(normalizedLanguage)) {
  54.         return iconName;
  55.       }
  56.     }
  57.     
  58.     return normalizedLanguage;
  59.   }
  60.  
  61.   async function fetchAvailableIcons() {
  62.     const cacheKey = 'githubLanguageIconsCache';
  63.     const currentTime = Date.now();
  64.  
  65.     const cachedData = JSON.parse(GM_getValue(cacheKey, '{}'));
  66.  
  67.     if (cachedData.timestamp && (currentTime - cachedData.timestamp < 7 * 24 * 60 * 60 * 1000)) {
  68.       return cachedData.fileTypes;
  69.     }
  70.  
  71.     try {
  72.       const response = await fetch(`${BASE_URL}icons.json`);
  73.       const data = await response.json();
  74.  
  75.       GM_setValue(cacheKey, JSON.stringify({
  76.         fileTypes: data.fileTypes,
  77.         timestamp: currentTime
  78.       }));
  79.  
  80.       return data.fileTypes;
  81.     } catch (error) {
  82.       console.error('Failed to fetch icon list:', error);
  83.       
  84.       return cachedData.fileTypes || [];
  85.     }
  86.   }
  87.  
  88.   async function replaceLanguageIcons() {
  89.     let availableIcons;
  90.     try {
  91.       availableIcons = await fetchAvailableIcons();
  92.     } catch (error) {
  93.       console.error('Error getting available icons:', error);
  94.       return;
  95.     }
  96.     
  97.     const processedElements = new Set();
  98.  
  99.     function processElement(element) {
  100.       if (processedElements.has(element)) return;
  101.       processedElements.add(element);
  102.  
  103.       let langElement, language;
  104.       
  105.       if (element.matches('.d-inline')) {
  106.         langElement = element.querySelector('.text-bold');
  107.         
  108.         if (!langElement || langElement.textContent.toLowerCase() === 'other' || element.dataset.iconChecked) return;
  109.         
  110.         language = normalizeLanguageName(langElement.textContent);
  111.         element.dataset.iconChecked = 'true';
  112.         
  113.         const svg = element.querySelector('svg');
  114.  
  115.         if (!svg || !availableIcons.includes(language)) return;
  116.         
  117.         const img = document.createElement('img');
  118.         img.src = `${ICON_BASE_URL}${language}.svg`;
  119.         img.width = 16;
  120.         img.height = 16;
  121.         img.className = 'mr-2';
  122.         img.style.verticalAlign = 'middle';
  123.         
  124.         svg.parentNode.replaceChild(img, svg);
  125.       }
  126.       else if (element.matches('.f6.color-fg-muted .repo-language-color + span[itemprop="programmingLanguage"]')) {
  127.         language = normalizeLanguageName(element.textContent);
  128.         
  129.         if (!availableIcons.includes(language)) return;
  130.         
  131.         const parentSpan = element.parentElement;
  132.         const colorSpan = parentSpan.querySelector('.repo-language-color');
  133.         
  134.         const img = document.createElement('img');
  135.         img.src = `${ICON_BASE_URL}${language}.svg`;
  136.         img.width = 16;
  137.         img.height = 16;
  138.         img.style.marginRight = '2px';
  139.         img.style.verticalAlign = 'sub';
  140.         
  141.         if (colorSpan) {
  142.           colorSpan.parentNode.insertBefore(img, colorSpan);
  143.           colorSpan.remove();
  144.         }
  145.       }
  146.       else if (element.matches('.mb-3 .no-wrap span[itemprop="programmingLanguage"]')) {
  147.         language = normalizeLanguageName(element.textContent);
  148.         
  149.         if (!availableIcons.includes(language)) return;
  150.         
  151.         const parentSpan = element.parentElement;
  152.         const colorSpan = parentSpan.querySelector('.repo-language-color');
  153.         
  154.         const img = document.createElement('img');
  155.         img.src = `${ICON_BASE_URL}${language}.svg`;
  156.         img.width = 16;
  157.         img.height = 16;
  158.         img.style.marginRight = '4px';
  159.         
  160.         const flexContainer = document.createElement('span');
  161.         flexContainer.style.display = 'inline-flex';
  162.         flexContainer.style.alignItems = 'center';
  163.         
  164.         if (colorSpan) {
  165.           colorSpan.remove();
  166.           
  167.           flexContainer.appendChild(img);
  168.           flexContainer.appendChild(element.cloneNode(true));
  169.           
  170.           parentSpan.replaceWith(flexContainer);
  171.         }
  172.       }
  173.       else if (element.matches('.Box-sc-g0xbh4-0.fCvgBf')) {
  174.         const preLanguageElement = element.querySelector('.Box-sc-g0xbh4-0:not(.fVplbS)');
  175.         if (preLanguageElement) {
  176.           preLanguageElement.style.display = 'none';
  177.         }
  178.  
  179.         const languageSpan = element.querySelector('.Box-sc-g0xbh4-0.fVplbS');
  180.         if (languageSpan && !languageSpan.dataset.iconProcessed) {
  181.           language = normalizeLanguageName(languageSpan.textContent.trim());
  182.           
  183.           if (availableIcons.includes(language)) {
  184.             const iconImg = document.createElement('img');
  185.             iconImg.src = `${ICON_BASE_URL}${language}.svg`;
  186.             iconImg.alt = `${language} icon`;
  187.             iconImg.width = 16;
  188.             iconImg.height = 16;
  189.             iconImg.style.marginRight = '2px';
  190.             iconImg.style.verticalAlign = 'middle';
  191.  
  192.             languageSpan.insertAdjacentElement('beforebegin', iconImg);
  193.             languageSpan.dataset.iconProcessed = 'true';
  194.           }
  195.         }
  196.       }
  197.       else if (element.matches('.repo-language-color')) {
  198.         const languageSpan = element.parentElement.querySelector('[itemprop="programmingLanguage"]');
  199.         
  200.         if (languageSpan && !languageSpan.dataset.iconProcessed) {
  201.           language = normalizeLanguageName(languageSpan.textContent);
  202.           
  203.           if (availableIcons.includes(language)) {
  204.             const iconImg = document.createElement('img');
  205.             iconImg.src = `${ICON_BASE_URL}${language}.svg`;
  206.             iconImg.alt = `${language} icon`;
  207.             iconImg.width = 16;
  208.             iconImg.height = 16;
  209.             iconImg.style.marginRight = '2px';
  210.             iconImg.style.verticalAlign = 'sub';
  211.  
  212.             element.parentElement.insertBefore(iconImg, element);
  213.             element.remove();
  214.             languageSpan.dataset.iconProcessed = 'true';
  215.           }
  216.         }
  217.       }
  218.       else if (element.matches('.Box-sc-g0xbh4-0.hjDqIa')) {
  219.         const languageSpan = element.nextElementSibling;
  220.         if (languageSpan && languageSpan.getAttribute('aria-label') && !languageSpan.dataset.iconProcessed) {
  221.           language = normalizeLanguageName(languageSpan.getAttribute('aria-label').replace(' language', ''));
  222.           
  223.           if (availableIcons.includes(language)) {
  224.             const iconImg = document.createElement('img');
  225.             iconImg.src = `${ICON_BASE_URL}${language}.svg`;
  226.             iconImg.alt = `${language} icon`;
  227.             iconImg.width = 16;
  228.             iconImg.height = 16;
  229.             iconImg.style.marginRight = '4px';
  230.             iconImg.style.verticalAlign = 'middle';
  231.  
  232.             element.style.display = 'none';
  233.  
  234.             languageSpan.parentNode.insertBefore(iconImg, languageSpan);
  235.             languageSpan.dataset.iconProcessed = 'true';
  236.           }
  237.         }
  238.       }
  239.     }
  240.  
  241.     const observer = new MutationObserver((mutations) => {
  242.       for (const mutation of mutations) {
  243.         for (const node of mutation.addedNodes) {
  244.           if (node.nodeType === Node.ELEMENT_NODE) {
  245.             if (node.matches('.d-inline, .f6.color-fg-muted .repo-language-color + span[itemprop="programmingLanguage"], .mb-3 .no-wrap span[itemprop="programmingLanguage"], .Box-sc-g0xbh4-0.fCvgBf, .repo-language-color, .Box-sc-g0xbh4-0.hjDqIa')) {
  246.               processElement(node);
  247.             } else {
  248.               node.querySelectorAll('.d-inline, .f6.color-fg-muted .repo-language-color + span[itemprop="programmingLanguage"], .mb-3 .no-wrap span[itemprop="programmingLanguage"], .Box-sc-g0xbh4-0.fCvgBf, .repo-language-color, .Box-sc-g0xbh4-0.hjDqIa').forEach(processElement);
  249.             }
  250.           }
  251.         }
  252.       }
  253.     });
  254.  
  255.     observer.observe(document.body, {
  256.       childList: true,
  257.       subtree: true
  258.     });
  259.  
  260.     document.querySelectorAll('.d-inline, .f6.color-fg-muted .repo-language-color + span[itemprop="programmingLanguage"], .mb-3 .no-wrap span[itemprop="programmingLanguage"], .Box-sc-g0xbh4-0.fCvgBf, .repo-language-color, .Box-sc-g0xbh4-0.hjDqIa').forEach(processElement);
  261.   }
  262.  
  263.   function hideAndReplaceDivs() {
  264.     document.querySelectorAll('span.Box-sc-g0xbh4-0.fCBLcl').forEach(spanElement => {
  265.         if (!spanElement) return;
  266.  
  267.         const divToHide = spanElement.querySelector('div[class^="Box-sc-g0xbh4-0"]');
  268.         const titleElement = spanElement.closest('a')?.querySelector('div[title]');
  269.         const title = titleElement?.getAttribute('title');
  270.         
  271.         if (divToHide && title && !divToHide.dataset.processed) {
  272.             const normalizedTitle = normalizeLanguageName(title);
  273.             
  274.             divToHide.style.display = 'none';
  275.             divToHide.dataset.processed = 'true';
  276.             
  277.             const svgElement = document.createElement('img');
  278.             svgElement.src = `${ICON_BASE_URL}${normalizedTitle}.svg`;
  279.             svgElement.alt = title;
  280.             svgElement.width = svgElement.height = 16;
  281.             
  282.             divToHide.parentNode.insertBefore(svgElement, divToHide);
  283.         }
  284.     });
  285.   }
  286.  
  287.   function observeDOMChanges() {
  288.     const observer = new MutationObserver((mutations) => {
  289.         mutations.forEach((mutation) => {
  290.             if (mutation.type === 'childList') {
  291.                 hideAndReplaceDivs();
  292.             }
  293.         });
  294.     });
  295.  
  296.     const config = { childList: true, subtree: true };
  297.     observer.observe(document.body, config);
  298.  
  299.     hideAndReplaceDivs();
  300.   }
  301.  
  302.   async function init() {
  303.     languageMappings = await fetchLanguageMappings();
  304.     replaceLanguageIcons();
  305.     observeDOMChanges();
  306.   }
  307.  
  308.   if (document.readyState === 'loading') {
  309.     document.addEventListener('DOMContentLoaded', init);
  310.   } else {
  311.     init();
  312.   }
  313. })();