☰

GitHub Code Language Icons

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

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

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