☰

GitHub Code Language Icons

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

当前为 2025-01-10 提交的版本，查看 最新版本。

  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.6
  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.     const cachedData = JSON.parse(GM_getValue(cacheKey, '{}'));
  25.     
  26.     if (cachedData.timestamp && (currentTime - cachedData.timestamp < 7 * 24 * 60 * 60 * 1000)) {
  27.       return cachedData.mappings;
  28.     }
  29.     
  30.     try {
  31.       const response = await fetch(`${BASE_URL}remap.json`);
  32.       const data = await response.json();
  33.       
  34.       GM_setValue(cacheKey, JSON.stringify({
  35.         mappings: data.iconRemap,
  36.         timestamp: currentTime
  37.       }));
  38.       
  39.       return data.iconRemap;
  40.     } catch (error) {
  41.       console.error('Failed to fetch language mappings:', error);
  42.       return cachedData.mappings || {};
  43.     }
  44.   }
  45.  
  46.   let languageMappings = {};
  47.  
  48.   function normalizeLanguageName(language) {
  49.     const normalizedLanguage = language.toLowerCase();
  50.     
  51.     for (const [iconName, languageList] of Object.entries(languageMappings)) {
  52.       if (languageList.includes(normalizedLanguage)) {
  53.         return iconName;
  54.       }
  55.     }
  56.     
  57.     return normalizedLanguage;
  58.   }
  59.  
  60.   async function fetchAvailableIcons() {
  61.     const cacheKey = 'githubLanguageIconsCache';
  62.     const currentTime = Date.now();
  63.     const cachedData = JSON.parse(GM_getValue(cacheKey, '{}'));
  64.  
  65.     if (cachedData.timestamp && (currentTime - cachedData.timestamp < 7 * 24 * 60 * 60 * 1000)) {
  66.       return cachedData.fileTypes;
  67.     }
  68.  
  69.     try {
  70.       const response = await fetch(`${BASE_URL}icons.json`);
  71.       const data = await response.json();
  72.  
  73.       GM_setValue(cacheKey, JSON.stringify({
  74.         fileTypes: data.fileTypes,
  75.         timestamp: currentTime
  76.       }));
  77.  
  78.       return data.fileTypes;
  79.     } catch (error) {
  80.       console.error('Failed to fetch icon list:', error);
  81.       return cachedData.fileTypes || [];
  82.     }
  83.   }
  84.  
  85.   async function replaceLanguageIcons() {
  86.     let availableIcons;
  87.     try {
  88.       availableIcons = await fetchAvailableIcons();
  89.     } catch (error) {
  90.       console.error('Error getting available icons:', error);
  91.       return;
  92.     }
  93.     
  94.     const processedElements = new Set();
  95.  
  96.     async function replaceOtherIcon(targetSvg) {
  97.       try {
  98.         const response = await fetch(`${ICON_BASE_URL}other.svg`);
  99.         const svgText = await response.text();
  100.         
  101.         const parser = new DOMParser();
  102.         const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
  103.         const newSvg = svgDoc.querySelector('svg');
  104.         
  105.         const attributes = targetSvg.attributes;
  106.         for (let i = 0; i < attributes.length; i++) {
  107.           const attr = attributes[i];
  108.           if (attr.name !== 'class') {
  109.             newSvg.setAttribute(attr.name, attr.value);
  110.           }
  111.         }
  112.         
  113.         newSvg.setAttribute('width', '16');
  114.         newSvg.setAttribute('height', '16');
  115.         newSvg.setAttribute('viewBox', '0 0 24 24');
  116.         
  117.         const innerGroup = newSvg.querySelector('g') || newSvg.querySelector('path');
  118.         if (innerGroup) {
  119.           innerGroup.setAttribute('transform', 'scale(0.67)');
  120.         }
  121.         
  122.         const targetClasses = Array.from(targetSvg.classList);
  123.         targetClasses.forEach(className => {
  124.           if (className !== 'mr-2') {
  125.             newSvg.classList.add(className);
  126.           }
  127.         });
  128.         newSvg.classList.add('mr-1');
  129.         
  130.         newSvg.style.width = '16px';
  131.         newSvg.style.height = '16px';
  132.         newSvg.style.minWidth = '16px';
  133.         newSvg.style.minHeight = '16px';
  134.         
  135.         targetSvg.parentNode.replaceChild(newSvg, targetSvg);
  136.       } catch (error) {
  137.         console.error('Failed to replace Other icon:', error);
  138.       }
  139.     }
  140.  
  141.     function processElement(element) {
  142.       if (processedElements.has(element)) return;
  143.       processedElements.add(element);
  144.  
  145.       let langElement, language;
  146.       
  147.       // Case 1: Action List Items
  148.       if (element.matches('.ActionListItem-visual.ActionListItem-visual--leading')) {
  149.         const languageLabel = element.closest('.ActionListContent')?.querySelector('.ActionListItem-label.text-normal');
  150.         if (!languageLabel || !languageLabel.textContent || element.dataset.iconChecked) return;
  151.         
  152.         language = normalizeLanguageName(languageLabel.textContent);
  153.         element.dataset.iconChecked = 'true';
  154.         
  155.         const colorDiv = element.querySelector('div');
  156.         if (!colorDiv || !availableIcons.includes(language)) return;
  157.         
  158.         const img = document.createElement('img');
  159.         img.src = `${ICON_BASE_URL}${language}.svg`;
  160.         img.width = 16;
  161.         img.height = 16;
  162.         img.style.verticalAlign = 'middle';
  163.         
  164.         colorDiv.replaceWith(img);
  165.       } 
  166.       // Case 2: Inline Displays
  167.       else if (element.matches('.d-inline')) {
  168.         langElement = element.querySelector('.text-bold');
  169.         
  170.         if (!langElement || langElement.textContent.toLowerCase() === 'other' || element.dataset.iconChecked) return;
  171.         
  172.         language = normalizeLanguageName(langElement.textContent);
  173.         element.dataset.iconChecked = 'true';
  174.         
  175.         const svg = element.querySelector('svg');
  176.  
  177.         if (!svg || !availableIcons.includes(language)) return;
  178.         
  179.         const img = document.createElement('img');
  180.         img.src = `${ICON_BASE_URL}${language}.svg`;
  181.         img.width = 16;
  182.         img.height = 16;
  183.         img.className = 'mr-2';
  184.         img.style.verticalAlign = 'middle';
  185.         
  186.         svg.parentNode.replaceChild(img, svg);
  187.       } 
  188.       // Case 3: Repository Language Indicators
  189.       else if (element.matches('.f6.color-fg-muted .repo-language-color + span[itemprop="programmingLanguage"]')) {
  190.         language = normalizeLanguageName(element.textContent);
  191.         
  192.         if (!availableIcons.includes(language)) return;
  193.         
  194.         const parentSpan = element.parentElement;
  195.         const colorSpan = parentSpan.querySelector('.repo-language-color');
  196.         
  197.         const img = document.createElement('img');
  198.         img.src = `${ICON_BASE_URL}${language}.svg`;
  199.         img.width = 16;
  200.         img.height = 16;
  201.         img.style.marginRight = '2px';
  202.         img.style.verticalAlign = 'sub';
  203.         
  204.         if (colorSpan) {
  205.           colorSpan.parentNode.insertBefore(img, colorSpan);
  206.           colorSpan.remove();
  207.         }
  208.       } 
  209.       // Case 4: No Wrap Language Spans
  210.       else if (element.matches('.mb-3 .no-wrap span[itemprop="programmingLanguage"]')) {
  211.         language = normalizeLanguageName(element.textContent);
  212.         
  213.         if (!availableIcons.includes(language)) return;
  214.         
  215.         const parentSpan = element.parentElement;
  216.         const colorSpan = parentSpan.querySelector('.repo-language-color');
  217.         
  218.         const img = document.createElement('img');
  219.         img.src = `${ICON_BASE_URL}${language}.svg`;
  220.         img.width = 16;
  221.         img.height = 16;
  222.         img.style.marginRight = '4px';
  223.         
  224.         const flexContainer = document.createElement('span');
  225.         flexContainer.style.display = 'inline-flex';
  226.         flexContainer.style.alignItems = 'center';
  227.         
  228.         if (colorSpan) {
  229.           colorSpan.remove();
  230.           flexContainer.appendChild(img);
  231.           flexContainer.appendChild(element.cloneNode(true));
  232.           parentSpan.replaceWith(flexContainer);
  233.         }
  234.       } 
  235.       // Case 5: File Type Boxes
  236.       else if (element.matches('.Box-sc-g0xbh4-0.fCvgBf')) {
  237.         const preElements = element.querySelectorAll('.Box-sc-g0xbh4-0');
  238.         preElements.forEach(preElement => {
  239.           preElement.style.display = 'none';
  240.         });
  241.  
  242.         const languageSpan = element.querySelector('.Text__StyledText-sc-17v1xeu-0');
  243.         if (languageSpan && !languageSpan.dataset.iconProcessed) {
  244.           language = normalizeLanguageName(languageSpan.textContent.trim());
  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 = '2px';
  253.             iconImg.style.verticalAlign = 'middle';
  254.  
  255.             languageSpan.insertAdjacentElement('beforebegin', iconImg);
  256.             languageSpan.dataset.iconProcessed = 'true';
  257.           }
  258.         }
  259.       } 
  260.       // Case 6: Repository Language Colors
  261.       else if (element.matches('.repo-language-color')) {
  262.         const languageSpan = element.parentElement.querySelector('[itemprop="programmingLanguage"]');
  263.         
  264.         if (languageSpan && !languageSpan.dataset.iconProcessed) {
  265.           language = normalizeLanguageName(languageSpan.textContent);
  266.           
  267.           if (availableIcons.includes(language)) {
  268.             const iconImg = document.createElement('img');
  269.             iconImg.src = `${ICON_BASE_URL}${language}.svg`;
  270.             iconImg.alt = `${language} icon`;
  271.             iconImg.width = 16;
  272.             iconImg.height = 16;
  273.             iconImg.style.marginRight = '2px';
  274.             iconImg.style.verticalAlign = 'sub';
  275.  
  276.             element.parentElement.insertBefore(iconImg, element);
  277.             element.remove();
  278.             languageSpan.dataset.iconProcessed = 'true';
  279.           }
  280.         }
  281.       } 
  282.       // Case 7: Special File Type Boxes
  283.       else if (element.matches('.Box-sc-g0xbh4-0.hjDqIa')) {
  284.         const languageSpan = element.nextElementSibling;
  285.         if (languageSpan && languageSpan.getAttribute('aria-label') && !languageSpan.dataset.iconProcessed) {
  286.           language = normalizeLanguageName(languageSpan.getAttribute('aria-label').replace(' language', ''));
  287.           
  288.           if (availableIcons.includes(language)) {
  289.             const iconImg = document.createElement('img');
  290.             iconImg.src = `${ICON_BASE_URL}${language}.svg`;
  291.             iconImg.alt = `${language} icon`;
  292.             iconImg.width = 16;
  293.             iconImg.height = 16;
  294.             iconImg.style.marginRight = '4px';
  295.             iconImg.style.verticalAlign = 'middle';
  296.  
  297.             element.style.display = 'none';
  298.             languageSpan.parentNode.insertBefore(iconImg, languageSpan);
  299.             languageSpan.dataset.iconProcessed = 'true';
  300.           }
  301.         }
  302.       }
  303.       // Case 8: Other Language Icons
  304.       else if (element.matches('.octicon-dot-fill')) {
  305.         const parentElement = element.closest('.d-inline');
  306.         if (parentElement) {
  307.           const languageElement = parentElement.querySelector('.text-bold');
  308.           if (languageElement && languageElement.textContent.toLowerCase() === 'other' && !element.dataset.iconProcessed) {
  309.             element.dataset.iconProcessed = 'true';
  310.             replaceOtherIcon(element);
  311.           }
  312.         }
  313.       }
  314.     }
  315.  
  316.     const observer = new MutationObserver((mutations) => {
  317.       for (const mutation of mutations) {
  318.         for (const node of mutation.addedNodes) {
  319.           if (node.nodeType === Node.ELEMENT_NODE) {
  320.             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, .ActionListItem-visual.ActionListItem-visual--leading, .octicon-dot-fill')) {
  321.               processElement(node);
  322.             } else {
  323.               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, .ActionListItem-visual.ActionListItem-visual--leading, .octicon-dot-fill').forEach(processElement);
  324.             }
  325.           }
  326.         }
  327.       }
  328.     });
  329.  
  330.     observer.observe(document.body, {
  331.       childList: true,
  332.       subtree: true
  333.     });
  334.  
  335.     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, .ActionListItem-visual.ActionListItem-visual--leading, .octicon-dot-fill').forEach(processElement);
  336.   }
  337.  
  338.   // Case 9: File Browser Language Boxes
  339.   function hideAndReplaceDivs() {
  340.     document.querySelectorAll('span.Box-sc-g0xbh4-0.lnwIhU').forEach(spanElement => {
  341.       if (!spanElement) return;
  342.  
  343.       const divToHide = spanElement.querySelector('div[class^="Box-sc-g0xbh4-0"]');
  344.       const titleElement = spanElement.closest('a')?.querySelector('div[title]');
  345.       const title = titleElement?.getAttribute('title');
  346.       
  347.       if (divToHide && title && !divToHide.dataset.processed) {
  348.         const normalizedTitle = normalizeLanguageName(title);
  349.         
  350.         divToHide.style.display = 'none';
  351.         divToHide.dataset.processed = 'true';
  352.         
  353.         const svgElement = document.createElement('img');
  354.         svgElement.src = `${ICON_BASE_URL}${normalizedTitle}.svg`;
  355.         svgElement.alt = title;
  356.         svgElement.width = svgElement.height = 16;
  357.         
  358.         divToHide.parentNode.insertBefore(svgElement, divToHide);
  359.       }
  360.     });
  361.   }
  362.  
  363.   function observeDOMChanges() {
  364.     const observer = new MutationObserver((mutations) => {
  365.       mutations.forEach((mutation) => {
  366.         if (mutation.type === 'childList') {
  367.           hideAndReplaceDivs();
  368.         }
  369.       });
  370.     });
  371.  
  372.     const config = { childList: true, subtree: true };
  373.     observer.observe(document.body, config);
  374.     hideAndReplaceDivs();
  375.   }
  376.  
  377.   async function init() {
  378.     languageMappings = await fetchLanguageMappings();
  379.     replaceLanguageIcons();
  380.     observeDOMChanges();
  381.   }
  382.  
  383.   if (document.readyState === 'loading') {
  384.     document.addEventListener('DOMContentLoaded', init);
  385.   } else {
  386.     init();
  387.   }
  388. })();