☰

GitHub Files Icon Replacement

Replace GitHub file icons with Material icons

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

  1. // ==UserScript==
  2. // @name         GitHub Files Icon Replacement
  3. // @name:vi      Thay thế biểu tượng tệp GitHub
  4. // @name:zh-cn   GitHub 文件图标替换
  5. // @name:zh-tw   GitHub 文件圖標替換
  6. // @name:ru      Замена иконок файлов GitHub
  7. // @namespace    http://tampermonkey.net/
  8. // @version      2024.12.25.1
  9. // @description  Replace GitHub file icons with Material icons
  10. // @description:vi  Thay thế icon file trên GitHub bằng icon Material
  11. // @description:zh-cn  用更漂亮的图标替换 GitHub 文件图标
  12. // @description:zh-tw  用更漂亮的圖標替換 GitHub 文件圖標
  13. // @description:ru  Замена иконок файлов GitHub на более красивые
  14. // @author       Yuusei
  15. // @match        https://github.com/*
  16. // @icon         https://github.githubassets.com/favicon.ico
  17. // @grant        GM_addStyle
  18. // @require      https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
  19. // @run-at       document-start
  20. // @license      GPL-3.0-only
  21. // @compatible   chrome
  22. // @compatible   firefox
  23. // @compatible   edge
  24. // @compatible   safari
  25. // ==/UserScript==
  26.  
  27. (function($) {
  28.     'use strict';
  29.  
  30.     // Add custom styles
  31.     GM_addStyle(`
  32.         .material-icon {
  33.             width: 20px;
  34.             height: 20px;
  35.             vertical-align: text-bottom;
  36.             margin-right: 4px;
  37.             transition: transform 0.2s ease;
  38.         }
  39.         .material-icon:hover {
  40.             transform: scale(1.2);
  41.         }
  42.     `);
  43.  
  44.     const iconMap = {
  45.         // Development
  46.         '.ts': 'typescript',
  47.         '.tsx': 'react_ts', 
  48.         '.js': 'javascript',
  49.         '.jsx': 'react',
  50.         '.py': 'python',
  51.         '.java': 'java',
  52.         '.cpp': 'cpp',
  53.         '.c': 'c',
  54.         '.cs': 'csharp',
  55.         '.go': 'go',
  56.         '.rb': 'ruby',
  57.         '.php': 'php',
  58.         '.rs': 'rust',
  59.         '.swift': 'swift',
  60.         '.kt': 'kotlin',
  61.         '.kts': 'kotlin',
  62.         '.scala': 'scala',
  63.         '.dart': 'dart',
  64.         '.lua': 'lua',
  65.         '.r': 'r',
  66.         '.pl': 'perl',
  67.         '.sh': 'shell',
  68.         '.ps1': 'powershell',
  69.         '.bat': 'console',
  70.         '.cmd': 'console',
  71.         '.asm': 'assembly',
  72.         '.s': 'assembly',
  73.         '.wasm': 'assembly',
  74.         '.code-workspace': 'vscode',
  75.         '.sln': 'visualstudio',
  76.         '.csproj': 'visualstudio',
  77.         '.vbproj': 'visualstudio',
  78.         '.vcxproj': 'visualstudio',
  79.         '.fsproj': 'visualstudio',
  80.  
  81.         // Web
  82.         '.html': 'html',
  83.         '.htm': 'html',
  84.         '.css': 'css',
  85.         '.scss': 'sass',
  86.         '.sass': 'sass',
  87.         '.less': 'less',
  88.         '.styl': 'stylus',
  89.         '.vue': 'vue',
  90.         '.svelte': 'svelte',
  91.         '.angular': 'angular',
  92.         '.ember': 'ember',
  93.  
  94.         // Data & Config
  95.         '.json': 'json',
  96.         '.yml': 'yaml', 
  97.         '.yaml': 'yaml',
  98.         '.xml': 'xml',
  99.         '.toml': 'settings',
  100.         '.ini': 'settings',
  101.         '.env': 'tune',
  102.         '.conf': 'settings',
  103.         '.sql': 'database',
  104.         '.db': 'database',
  105.         '.sqlite': 'database',
  106.         '.graphql': 'graphql',
  107.         '.proto': 'protobuf',
  108.  
  109.         // Documentation
  110.         '.md': 'markdown',
  111.         '.mdx': 'markdown',
  112.         '.txt': 'document',
  113.         '.pdf': 'pdf',
  114.         '.doc': 'word',
  115.         '.docx': 'word',
  116.         '.odt': 'document',
  117.         '.rtf': 'document',
  118.  
  119.         // Images
  120.         '.svg': 'svg',
  121.         '.png': 'image',
  122.         '.jpg': 'image',
  123.         '.jpeg': 'image',
  124.         '.gif': 'image',
  125.         '.ico': 'image',
  126.         '.webp': 'image',
  127.         '.bmp': 'image',
  128.         '.tiff': 'image',
  129.  
  130.         // Media
  131.         '.mp3': 'audio',
  132.         '.wav': 'audio',
  133.         '.ogg': 'audio',
  134.         '.mp4': 'video',
  135.         '.webm': 'video',
  136.         '.avi': 'video',
  137.         '.mov': 'video',
  138.         '.wmv': 'video',
  139.  
  140.         // Archives
  141.         '.zip': 'zip',
  142.         '.rar': 'zip',
  143.         '.7z': 'zip',
  144.         '.tar': 'zip',
  145.         '.gz': 'zip',
  146.         '.bz2': 'zip',
  147.  
  148.         // System
  149.         '.exe': 'exe',
  150.         '.dll': 'dll',
  151.         '.so': 'lib',
  152.         '.dylib': 'lib',
  153.         '.sys': 'windows',
  154.         '.reg': 'windows',
  155.  
  156.         // Design
  157.         '.fig': 'figma',
  158.         '.sketch': 'sketch',
  159.         '.ai': 'illustrator',
  160.         '.psd': 'photoshop',
  161.         '.xd': 'xd',
  162.  
  163.         // 3D & Game
  164.         '.unity': 'unity',
  165.         '.blend': 'blender',
  166.         '.fbx': '3d',
  167.         '.obj': '3d',
  168.         '.gltf': '3d',
  169.         '.uasset': 'unreal',
  170.         '.upk': 'unreal',
  171.  
  172.         // Mobile
  173.         '.apk': 'android',
  174.         '.ipa': 'apple',
  175.         '.xcodeproj': 'xcode',
  176.         '.pbxproj': 'xcode',
  177.         
  178.         // Container & Cloud
  179.         '.dockerfile': 'docker',
  180.         '.dockerignore': 'docker',
  181.         '.tf': 'terraform',
  182.         '.tfvars': 'terraform',
  183.         '.vagrant': 'vagrant',
  184.         '.helm': 'kubernetes',
  185.         
  186.         // Other
  187.         '.vim': 'vim',
  188.         '.emacs': 'emacs',
  189.         '.gradle': 'gradle',
  190.         '.maven': 'maven',
  191.         '.cargo': 'rust'
  192.     };
  193.  
  194.     const specialFiles = {
  195.         // Package managers
  196.         'package.json': 'nodejs',
  197.         'package-lock.json': 'nodejs',
  198.         'yarn.lock': 'yarn',
  199.         'pnpm-lock.yaml': 'pnpm',
  200.         'bun.lockb': 'bun',
  201.         'composer.json': 'composer',
  202.         'composer.lock': 'composer',
  203.         'Gemfile': 'ruby',
  204.         'Gemfile.lock': 'ruby',
  205.         'requirements.txt': 'python',
  206.         'poetry.lock': 'python',
  207.         'Cargo.toml': 'rust',
  208.         'Cargo.lock': 'rust',
  209.  
  210.         // Config files
  211.         'tsconfig.json': 'typescript',
  212.         '.eslintrc': 'eslint',
  213.         '.prettierrc': 'prettier',
  214.         '.editorconfig': 'editorconfig',
  215.         'webpack.config.js': 'webpack',
  216.         'vite.config.js': 'vite',
  217.         'rollup.config.js': 'rollup',
  218.         'babel.config.js': 'babel',
  219.         'jest.config.js': 'jest',
  220.         'karma.conf.js': 'karma',
  221.         'cypress.config.js': 'cypress',
  222.         'playwright.config.js': 'playwright',
  223.  
  224.         // Documentation
  225.         'README.md': 'markdown',
  226.         'LICENSE': 'certificate',
  227.         'CHANGELOG.md': 'markdown',
  228.         'CONTRIBUTING.md': 'markdown',
  229.  
  230.         // Git
  231.         '.gitignore': 'git',
  232.         '.gitattributes': 'git',
  233.         '.gitmodules': 'git',
  234.         '.gitmessage': 'git',
  235.         '.gitkeep': 'git',
  236.  
  237.         // CI/CD
  238.         '.travis.yml': 'travis',
  239.         '.gitlab-ci.yml': 'gitlab',
  240.         'Jenkinsfile': 'jenkins',
  241.         'azure-pipelines.yml': 'azure',
  242.         'bitbucket-pipelines.yml': 'bitbucket',
  243.  
  244.         // Docker
  245.         'Dockerfile': 'docker',
  246.         'docker-compose.yml': 'docker',
  247.         'docker-compose.yaml': 'docker',
  248.         'docker-compose.override.yml': 'docker',
  249.  
  250.         // Framework configs
  251.         'angular.json': 'angular',
  252.         'next.config.js': 'next',
  253.         'nuxt.config.js': 'nuxt',
  254.         'svelte.config.js': 'svelte',
  255.         'capacitor.config.json': 'capacitor',
  256.         'ionic.config.json': 'ionic',
  257.  
  258.         // Build tools
  259.         'Makefile': 'makefile',
  260.         'CMakeLists.txt': 'cmake',
  261.         'build.gradle': 'gradle',
  262.         'pom.xml': 'maven',
  263.         'build.sbt': 'sbt',
  264.  
  265.         // Environment
  266.         '.env': 'tune',
  267.         '.env.local': 'tune',
  268.         '.env.development': 'tune',
  269.         '.env.production': 'tune',
  270.         '.env.test': 'tune',
  271.  
  272.         // Version managers
  273.         '.nvmrc': 'nodejs',
  274.         '.node-version': 'nodejs',
  275.         '.ruby-version': 'ruby',
  276.         '.python-version': 'python',
  277.         '.java-version': 'java'
  278.     };
  279.  
  280.     function replaceIcons() {
  281.         $('.react-directory-row-name-cell-large-screen').each(function() {
  282.             const $filenameElement = $(this).find('.react-directory-filename-cell');
  283.             
  284.             if ($filenameElement.length) {
  285.                 const filename = $filenameElement.text();
  286.                 let iconName = specialFiles[filename];
  287.  
  288.                 if (!iconName) {
  289.                     const extension = Object.keys(iconMap).find(ext => 
  290.                         filename.toLowerCase().endsWith(ext)
  291.                     );
  292.                     iconName = extension ? iconMap[extension] : null;
  293.                 }
  294.  
  295.                 if (iconName) {
  296.                     const $oldSvg = $(this).find('svg');
  297.                     if ($oldSvg.length) {
  298.                         const $newIcon = $('<img>', {
  299.                             src: `https://raw.githubusercontent.com/material-extensions/vscode-material-icon-theme/refs/heads/main/icons/${iconName}.svg`,
  300.                             class: 'material-icon',
  301.                             alt: iconName
  302.                         });
  303.                         $oldSvg.replaceWith($newIcon);
  304.                     }
  305.                 }
  306.             }
  307.         });
  308.     }
  309.  
  310.     // Initial replacement
  311.     $(document).ready(replaceIcons);
  312.  
  313.     // Watch for DOM changes
  314.     const observer = new MutationObserver(replaceIcons);
  315.     observer.observe(document.body, {
  316.         childList: true,
  317.         subtree: true
  318.     });
  319.  
  320. })(jQuery);