☰

GitHub 仓库备注工具

为 GitHub 仓库添加本地备注

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

  1. // ==UserScript==
  2. // @name         GitHub Repo Notes
  3. // @name:zh-CN   GitHub 仓库备注工具
  4. // @namespace    http://tampermonkey.net/
  5. // @version      1.1
  6. // @description  Add local notes to GitHub repository
  7. // @description:zh-CN  为 GitHub 仓库添加本地备注
  8. // @author       Ivans
  9. // @match        https://github.com/*
  10. // @grant        none
  11. // @icon         https://cdn.simpleicons.org/github/808080
  12. // @license      MIT
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.     'use strict';
  17.  
  18.     const NOTE_KEY_PREFIX = 'gh_repo_note_';
  19.  
  20.     // Get the full name of the repository
  21.     function getRepoFullName(card) {
  22.         const link = card.querySelector('h3 a[itemprop="name codeRepository"]') || 
  23.                     card.querySelector('h3 a') || 
  24.                     card.querySelector('.search-title a') ||
  25.                     card.querySelector('a.Link--primary.Link.text-bold[data-hovercard-type="repository"]');
  26.         if (!link) return null;
  27.         const href = link.getAttribute('href');
  28.         if (!href) return null;
  29.         return href.substring(1);
  30.     }
  31.  
  32.     // Get the note from local storage
  33.     function getNote(repoFullName) {
  34.         // Convert to lowercase
  35.         return localStorage.getItem(NOTE_KEY_PREFIX + repoFullName.toLowerCase()) || '';
  36.     }
  37.     // Set the note to local storage
  38.     function setNote(repoFullName, note) {
  39.         if (note) {
  40.             localStorage.setItem(NOTE_KEY_PREFIX + repoFullName.toLowerCase(), note);
  41.         } else {
  42.             localStorage.removeItem(NOTE_KEY_PREFIX + repoFullName.toLowerCase());
  43.         }
  44.     }
  45.  
  46.     // Create the note button
  47.     function createNoteButton(repoFullName, note, onClick) {
  48.         const btn = document.createElement('button');
  49.         const icon = document.createElement('span');
  50.         icon.innerHTML = `<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" style="vertical-align: text-bottom; margin-right: 8px; fill: var(--fgColor-muted,var(--color-fg-muted));">
  51.             <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Z"></path>
  52.         </svg>`;
  53.         btn.appendChild(icon);
  54.         btn.appendChild(document.createTextNode(note ? 'Edit' : 'Add'));
  55.         
  56.         btn.style.margin = '4px';
  57.         btn.style.borderRadius = '6px';
  58.         btn.style.padding = '2px 8px';
  59.         btn.style.fontSize = '12px';
  60.         btn.style.cursor = 'pointer';
  61.         btn.style.fontFamily = 'var(--fontStack-sansSerif)';
  62.         btn.style.lineHeight = '20px';
  63.         btn.style.fontWeight = '600';
  64.         btn.style.color = 'var(--button-default-fgColor-rest, var(--color-btn-text))';
  65.         btn.style.backgroundColor = 'var(--button-default-bgColor-rest, var(--color-btn-bg))';
  66.         btn.style.border = '1px solid var(--button-default-borderColor-rest,var(--color-btn-border))';
  67.         btn.style.display = 'flex';
  68.         btn.style.alignItems = 'center';
  69.         btn.style.height = 'var(--control-small-size,1.75rem)';
  70.         btn.addEventListener('click', onClick);
  71.         return btn;
  72.     }
  73.  
  74.     // Create the note display
  75.     function createNoteDisplay(note) {
  76.         const div = document.createElement('div');
  77.         const icon = document.createElement('span');
  78.         icon.innerHTML = `<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" style="vertical-align: text-bottom; margin-right: 8px; fill: var(--fgColor-muted,var(--color-fg-muted));">
  79.             <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Z"></path>
  80.         </svg>`;
  81.         div.appendChild(icon);
  82.         div.appendChild(document.createTextNode(note));
  83.         
  84.         div.style.borderRadius = '6px';
  85.         div.style.padding = '4px 8px';
  86.         div.style.marginTop = '2px';
  87.         div.style.marginBottom = '6px';
  88.         div.style.fontSize = '13px';
  89.         div.style.fontFamily = 'var(--fontStack-sansSerif)';
  90.         div.style.lineHeight = '20px';
  91.         div.style.display = 'flex';
  92.         div.style.alignItems = 'center';
  93.         return div;
  94.     }
  95.  
  96.     // Prompt the user to input the note
  97.     function promptNote(oldNote) {
  98.         let note = prompt('Please input your notes (leave blank to be deleted):', oldNote || '');
  99.         if (note === null) return undefined;
  100.         note = note.trim();
  101.         return note;
  102.     }
  103.  
  104.     // Insert the button and note on the card
  105.     function enhanceCard(card) {
  106.         if (card.dataset.noteEnhanced) return; // Avoid duplicate
  107.         const repoFullName = getRepoFullName(card);
  108.         if (!repoFullName) return;
  109.         card.dataset.noteEnhanced = '1';
  110.         // Find the star button
  111.         let starBtn = card.querySelector('.js-toggler-container.js-social-container.starring-container, .Box-sc-g0xbh4-0.fvaNTI');
  112.         if (!starBtn) return;
  113.         // Create the button
  114.         let note = getNote(repoFullName);
  115.         let btn = createNoteButton(repoFullName, note, function() {
  116.             let newNote = promptNote(note);
  117.             if (typeof newNote === 'undefined') return;
  118.             setNote(repoFullName, newNote);
  119.             // Re-render
  120.             card.dataset.noteEnhanced = '';
  121.             enhanceCard(card);
  122.         });
  123.         // Insert the button
  124.         if (starBtn.parentElement) {
  125.             // Avoid duplicate insertion
  126.             let oldBtn = starBtn.parentElement.querySelector('.gh-note-btn');
  127.             if (oldBtn) oldBtn.remove();
  128.             btn.classList.add('gh-note-btn');
  129.             starBtn.parentElement.appendChild(btn);
  130.         }
  131.         // Note display
  132.         let oldNoteDiv = card.querySelector('.gh-note-display');
  133.         if (oldNoteDiv) oldNoteDiv.remove();
  134.         if (note) {
  135.             let noteDiv = createNoteDisplay(note);
  136.             noteDiv.classList.add('gh-note-display');
  137.             // Put it before the data bar
  138.             let dataInfo = card.querySelector('.f6.color-fg-muted.mt-0.mb-0.width-full, .f6.color-fg-muted.mt-2, .Box-sc-g0xbh4-0.bZkODq');
  139.             if (dataInfo && dataInfo.parentElement) {
  140.                 dataInfo.parentElement.insertBefore(noteDiv, dataInfo);
  141.             }
  142.         }
  143.     }
  144.  
  145.     // Select all repository cards
  146.     function findAllRepoCards() {
  147.         // Adapt to multiple card structures
  148.         let cards = Array.from(document.querySelectorAll(`
  149.             .col-12.d-block.width-full.py-4.border-bottom.color-border-muted,
  150.             li.col-12.d-flex.flex-justify-between.width-full.py-4.border-bottom.color-border-muted,
  151.             .Box-sc-g0xbh4-0.iwUbcA,
  152.             .Box-sc-g0xbh4-0.flszRz,
  153.             .Box-sc-g0xbh4-0.jbaXRR,
  154.             .Box-sc-g0xbh4-0.bmHqGc,
  155.             .Box-sc-g0xbh4-0.hFxojJ,
  156.             section[aria-label="card content"]
  157.         `));
  158.         // Filter out cards without a repository full name
  159.         return cards.filter(card => getRepoFullName(card));
  160.     }
  161.  
  162.     // Determine if it is a repository page
  163.     function isRepoPage() {
  164.         const path = window.location.pathname;
  165.         const parts = path.split('/').filter(Boolean);
  166.         return (parts.length === 2 || (parts.length === 4 && parts[2] === 'tree')) && 
  167.                !path.includes('/blob/') && 
  168.                !path.includes('/issues/') && 
  169.                !path.includes('/pulls/');
  170.     }
  171.  
  172.     // Repository page processing function
  173.     function enhanceRepoPage() {
  174.         if (document.body.dataset.noteEnhanced) return; // Avoid duplicate
  175.         // Get the repository name from the link
  176.         const path = window.location.pathname;
  177.         const parts = path.split('/').filter(Boolean);
  178.         const repoFullName = parts.slice(0, 2).join('/');
  179.         if (!repoFullName) return;
  180.         document.body.dataset.noteEnhanced = '1';
  181.  
  182.         // Create the first button
  183.         let note = getNote(repoFullName);
  184.         let btn = createNoteButton(repoFullName, note, function() {
  185.             let newNote = promptNote(note);
  186.             if (typeof newNote === 'undefined') return;
  187.             setNote(repoFullName, newNote);
  188.             // Re-render
  189.             document.body.dataset.noteEnhanced = '';
  190.             enhanceRepoPage();
  191.         });
  192.  
  193.         // Find the button bar
  194.         let actionsList = document.querySelector('.pagehead-actions');
  195.         if (actionsList) {
  196.             // Create a new li element
  197.             let li = document.createElement('li');
  198.             li.appendChild(btn);
  199.  
  200.             // Avoid duplicate insertion
  201.             let oldLi = actionsList.querySelector('.gh-note-li');
  202.             if (oldLi) oldLi.remove();
  203.             li.classList.add('gh-note-li');
  204.  
  205.             // Add to the button bar
  206.             actionsList.appendChild(li);
  207.         }
  208.  
  209.         // Create the second button
  210.         let btn2 = createNoteButton(repoFullName, note, function() {
  211.             let newNote = promptNote(note);
  212.             if (typeof newNote === 'undefined') return;
  213.             setNote(repoFullName, newNote);
  214.             // Re-render
  215.             document.body.dataset.noteEnhanced = '';
  216.             enhanceRepoPage();
  217.         });
  218.  
  219.         // Find the container
  220.         let container = document.querySelector('.container-xl:not(.d-flex):not(.clearfix)');
  221.         if (container) {
  222.             // Find the star button
  223.             let starBtn = container.querySelector('div[data-view-component="true"].js-toggler-container.starring-container');
  224.             if (starBtn && starBtn.parentElement) {
  225.                 // Avoid duplicate insertion
  226.                 let oldBtn = starBtn.parentElement.querySelector('.gh-note-btn');
  227.                 if (oldBtn) oldBtn.remove();
  228.                 let newBtn = btn2;
  229.                 newBtn.classList.add('gh-note-btn');
  230.                 starBtn.parentElement.appendChild(newBtn);
  231.             }
  232.         }
  233.  
  234.         // Remove the old note display
  235.         let oldNoteDiv = document.querySelector('.gh-note-display');
  236.         if (oldNoteDiv) oldNoteDiv.remove();
  237.         let oldNoteDiv2 = document.querySelector('.gh-note-display2');
  238.         if (oldNoteDiv2) oldNoteDiv2.remove();
  239.     
  240.         if (note) {
  241.             // Create the first note display
  242.             let noteDiv = createNoteDisplay(note);
  243.             noteDiv.classList.add('gh-note-display');
  244.             
  245.             // Find the description
  246.             let description = document.querySelector('.f4.my-3, .f4.my-3.color-fg-muted.text-italic');
  247.             if (description && description.parentElement) {
  248.                 description.parentElement.insertBefore(noteDiv, description.nextSibling);
  249.             }
  250.  
  251.             // Create the second note display
  252.             let noteDiv2 = createNoteDisplay(note);
  253.             noteDiv2.classList.add('gh-note-display2');            
  254.  
  255.             if (container) {
  256.                 // Try finding the description
  257.                 let newDescription = container.querySelector('p.f4.mb-3.color-fg-muted');
  258.                 if (newDescription && newDescription.parentElement) {
  259.                     newDescription.parentElement.insertBefore(noteDiv2, newDescription.nextSibling);
  260.                 } else {
  261.                     // If there is no description, find the flex container
  262.                     let flexContainer = container.querySelector('div.d-flex.gap-2.mt-n3.mb-3.flex-wrap');
  263.                     if (flexContainer && flexContainer.parentElement) {
  264.                         flexContainer.parentElement.insertBefore(noteDiv2, flexContainer.nextSibling);
  265.                     }
  266.                 }
  267.             }
  268.         }
  269.     }
  270.  
  271.     // Initial processing
  272.     function enhanceAll() {
  273.         if (isRepoPage()) {
  274.             enhanceRepoPage();
  275.         } else {
  276.             findAllRepoCards().forEach(enhanceCard);
  277.         }
  278.     }
  279.  
  280.     // Listen for DOM changes to adapt to dynamic loading
  281.     const observer = new MutationObserver(() => {
  282.         enhanceAll();
  283.     });
  284.     observer.observe(document.body, {childList: true, subtree: true});
  285.  
  286.     // First load
  287.     enhanceAll();
  288. })();