☰

GitHub Profile Icon

Adds a clickable profile icon to identify personal or organizational accounts.

  1. // ==UserScript==
  2. // @name         GitHub Profile Icon
  3. // @description  Adds a clickable profile icon to identify personal or organizational accounts.
  4. // @icon         https://github.githubassets.com/favicons/favicon-dark.svg
  5. // @version      1.5
  6. // @author       afkarxyz
  7. // @namespace    https://github.com/afkarxyz/userscripts/
  8. // @supportURL   https://github.com/afkarxyz/userscripts/issues
  9. // @license      MIT
  10. // @match        https://github.com/*
  11. // @grant        GM_getValue
  12. // @grant        GM_setValue
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.     'use strict';
  17.     
  18.     const style = document.createElement('style');
  19.     style.textContent = `
  20.         .icon-wrapper {
  21.             position: relative !important;
  22.             display: inline-block !important;
  23.             margin-left: 4px !important;
  24.         }
  25.         .profile-icon-tooltip {
  26.             visibility: hidden;
  27.             position: fixed !important;
  28.             background: #212830 !important;
  29.             color: white !important;
  30.             padding: 4px 8px !important;
  31.             border-radius: 6px !important;
  32.             font-size: 12px !important;
  33.             white-space: nowrap !important;
  34.             z-index: 9999 !important;
  35.             pointer-events: none !important;
  36.             transform: translateX(-50%) !important;
  37.         }
  38.         .profile-icon-tooltip::after {
  39.             content: '';
  40.             position: absolute !important;
  41.             top: 100% !important;
  42.             left: 50% !important;
  43.             transform: translateX(-50%) !important;
  44.             border: 5px solid transparent !important;
  45.             border-top-color: #212830 !important;
  46.         }
  47.         .icon-wrapper:hover .profile-icon-tooltip {
  48.             visibility: visible !important;
  49.         }
  50.         .fork-icon {
  51.             width: 10px !important;
  52.             height: 10px !important;
  53.             opacity: 1 !important;
  54.         }
  55.         .non-fork-icon {
  56.             opacity: 0.575 !important;
  57.         }
  58.         .fork-wrapper {
  59.             margin-left: 8px !important;
  60.         }
  61.         .search-title {
  62.             display: flex !important;
  63.             align-items: flex-start !important;
  64.         }
  65.         .search-title .icon-wrapper {
  66.             margin-left: 8px !important;
  67.             display: inline-flex !important;
  68.             align-items: center !important;
  69.             margin-top: 3px !important;
  70.         }
  71.     `;
  72.     document.head.appendChild(style);
  73.  
  74.     const ICONS = {
  75.         user: "M11.1,8.7c2.5,1.2,4.1,3.6,4.2,6.3c0,0.5-0.3,0.9-0.9,1c-0.5,0-0.9-0.3-1-0.9c0,0,0,0,0,0c-0.1-3.1-2.7-5.4-5.8-5.3c-2.9,0.1-5.1,2.4-5.3,5.3c0,0.5-0.5,0.9-1,0.9c-0.5,0-0.9-0.4-0.9-0.9c0.1-2.7,1.8-5.2,4.2-6.3C2.8,7,2.5,3.9,4.2,1.8s4.8-2.4,6.9-0.6s2.4,4.8,0.6,6.9C11.6,8.3,11.4,8.5,11.1,8.7z M11.1,4.9c0-1.7-1.4-3.1-3.1-3.1S4.9,3.2,4.9,4.9S6.3,8,8,8S11.1,6.6,11.1,4.9z",
  76.         organization: "M1.75 16A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 0 0 .25-.25V8.285a.25.25 0 0 0-.111-.208l-1.055-.703a.749.749 0 1 1 .832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0 1 14.25 16h-3.5a.766.766 0 0 1-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 0 1-.75-.75V14h-1v1.25a.75.75 0 0 1-.75.75Zm-.25-1.75c0 .138.112.25.25.25H4v-1.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v1.25h2.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM3.75 6h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 3.75A.75.75 0 0 1 3.75 3h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 3.75Zm4 3A.75.75 0 0 1 7.75 6h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 7 6.75ZM7.75 3h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 9.75A.75.75 0 0 1 3.75 9h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 9.75ZM7.75 9h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"
  77.     };
  78.  
  79.     function getCachedUserType(username) {
  80.         const cache = GM_getValue('userTypeCache', {});
  81.         const cachedData = cache[username];
  82.         if (cachedData) {
  83.             const now = Date.now();
  84.             if (now - cachedData.timestamp < 24 * 60 * 60 * 1000) {
  85.                 return cachedData.type;
  86.             }
  87.             delete cache[username];
  88.             GM_setValue('userTypeCache', cache);
  89.         }
  90.         return null;
  91.     }
  92.  
  93.     function cacheUserType(username, type) {
  94.         const cache = GM_getValue('userTypeCache', {});
  95.         cache[username] = {
  96.             type: type,
  97.             timestamp: Date.now()
  98.         };
  99.         GM_setValue('userTypeCache', cache);
  100.     }
  101.  
  102.     async function checkUserType(username) {
  103.         const cachedType = getCachedUserType(username);
  104.         if (cachedType) {
  105.             return cachedType;
  106.         }
  107.  
  108.         try {
  109.             const response = await fetch(`https://api.github.com/users/${username}`);
  110.             if (!response.ok) {
  111.                 throw new Error(`HTTP error! status: ${response.status}`);
  112.             }
  113.             const data = await response.json();
  114.             const type = data.type?.toLowerCase() === 'organization' ? 'organization' : 'user';
  115.             cacheUserType(username, type);
  116.             return type;
  117.         } catch (error) {
  118.             cacheUserType(username, 'user');
  119.             return 'user';
  120.         }
  121.     }
  122.  
  123.     async function createIcon(username, wrapper, isFork = false) {
  124.         const type = await checkUserType(username);
  125.         
  126.         const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  127.         svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  128.         svg.setAttribute("viewBox", "0 0 16 16");
  129.         svg.style.cssText = `width:${isFork ? '10px' : '14px'};height:${isFork ? '10px' : '14px'};cursor:pointer;fill:currentColor;transition:transform .1s`;
  130.         
  131.         if (isFork) {
  132.             svg.classList.add('fork-icon');
  133.             wrapper.classList.add('fork-wrapper');
  134.         } else {
  135.             svg.classList.add('non-fork-icon');
  136.         }
  137.  
  138.         const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  139.         path.setAttribute("d", ICONS[type]);
  140.         
  141.         const tooltip = document.createElement('div');
  142.         tooltip.className = 'profile-icon-tooltip';
  143.         tooltip.textContent = username;
  144.  
  145.         wrapper.addEventListener('mouseenter', (e) => {
  146.             svg.style.transform = 'scale(1.1)';
  147.             const rect = wrapper.getBoundingClientRect();
  148.             tooltip.style.left = `${rect.left + (rect.width / 2)}px`;
  149.             tooltip.style.top = `${rect.top - 35}px`;
  150.         });
  151.         
  152.         wrapper.addEventListener('mouseleave', () => {
  153.             svg.style.transform = 'scale(1)';
  154.         });
  155.         
  156.         wrapper.addEventListener('mousemove', (e) => {
  157.             const rect = wrapper.getBoundingClientRect();
  158.             tooltip.style.left = `${rect.left + (rect.width / 2)}px`;
  159.             tooltip.style.top = `${rect.top - 35}px`;
  160.         });
  161.  
  162.         wrapper.addEventListener('click', () => window.open(`https://github.com/${username}`, '_blank'));
  163.  
  164.         svg.appendChild(path);
  165.         wrapper.appendChild(svg);
  166.         wrapper.appendChild(tooltip);
  167.     }
  168.  
  169.     async function addGitHubIcons() {
  170.         const tasks = [];
  171.         
  172.         const isSearchPage = window.location.pathname === '/search' || window.location.pathname.startsWith('/search/');
  173.         
  174.         if (isSearchPage) {
  175.             document.querySelectorAll('.search-title').forEach(titleDiv => {
  176.                 if (titleDiv.querySelector('.icon-wrapper')) return;
  177.                 const link = titleDiv.querySelector('a');
  178.                 if (!link) return;
  179.                 const href = link.getAttribute('href');
  180.                 if (!href) return;
  181.                 const username = href.split('/').filter(Boolean)[0];
  182.                 const wrapper = document.createElement('div');
  183.                 wrapper.className = 'icon-wrapper';
  184.                 titleDiv.appendChild(wrapper);
  185.                 tasks.push(createIcon(username, wrapper, false));
  186.             });
  187.         } else {
  188.             const repoNav = document.querySelector('#repository-container-header');
  189.             
  190.             document.querySelectorAll('h3:not(.search-title)').forEach(h3 => {
  191.                 if (h3.closest('#readme') || h3.closest('article')) return;
  192.                 
  193.                 if (repoNav && !h3.closest('#repository-container-header')) return;
  194.                 
  195.                 if (h3.querySelector('.icon-wrapper')) return;
  196.                 const link = h3.querySelector('a');
  197.                 if (!link) return;
  198.                 const href = link.getAttribute('href');
  199.                 if (!href || !href.startsWith('/')) return;
  200.                 const username = href.split('/').filter(Boolean)[0];
  201.                 const wrapper = document.createElement('div');
  202.                 wrapper.className = 'icon-wrapper';
  203.                 h3.appendChild(wrapper);
  204.                 tasks.push(createIcon(username, wrapper, false));
  205.             });
  206.  
  207.             document.querySelectorAll('.f6.color-fg-muted.mb-1').forEach(forkInfo => {
  208.                 if (forkInfo.querySelector('.icon-wrapper')) return;
  209.                 const link = forkInfo.querySelector('a.Link--muted');
  210.                 if (!link || !link.href.includes('/')) return;
  211.                 const username = link.getAttribute('href').split('/').filter(Boolean)[0];
  212.                 const wrapper = document.createElement('div');
  213.                 wrapper.className = 'icon-wrapper';
  214.                 link.insertAdjacentElement('afterend', wrapper);
  215.                 tasks.push(createIcon(username, wrapper, true));
  216.             });
  217.         }
  218.  
  219.         await Promise.all(tasks);
  220.     }
  221.  
  222.     addGitHubIcons();
  223.  
  224.     const observer = new MutationObserver(mutations => {
  225.         if (mutations.some(m => m.addedNodes.length)) addGitHubIcons();
  226.     });
  227.  
  228.     observer.observe(document.body, { childList: true, subtree: true });
  229.  
  230.     const pushState = history.pushState;
  231.     const replaceState = history.replaceState;
  232.     
  233.     history.pushState = function() {
  234.         pushState.apply(history, arguments);
  235.         addGitHubIcons();
  236.     };
  237.  
  238.     history.replaceState = function() {
  239.         replaceState.apply(history, arguments);
  240.         addGitHubIcons();
  241.     };
  242.  
  243.     window.addEventListener('popstate', addGitHubIcons);
  244. })();