☰

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.3
  6. // @description  Add local notes to GitHub repository
  7. // @description:zh-CN  为 GitHub 仓库添加本地备注
  8. // @author       Ivans
  9. // @match        https://github.com/*
  10. // @grant        GM_setValue
  11. // @grant        GM_getValue
  12. // @grant        GM_deleteValue
  13. // @grant        GM_listValues
  14. // @icon         https://cdn.simpleicons.org/github/808080
  15. // @license      MIT
  16. // @supportURL   https://github.com/Ivans-11/github-repo-notes/issues
  17. // ==/UserScript==
  18.  
  19. (function() {
  20.     'use strict';
  21.  
  22.     const NOTE_KEY_PREFIX = 'gh_repo_note_';
  23.  
  24.     // Get the full name of the repository
  25.     function getRepoFullName(card) {
  26.         const link = card.querySelector('h3 a[itemprop="name codeRepository"]') || 
  27.                     card.querySelector('h3 a') || 
  28.                     card.querySelector('.search-title a') ||
  29.                     card.querySelector('a.Link--primary.Link.text-bold[data-hovercard-type="repository"]');
  30.         if (!link) return null;
  31.         const href = link.getAttribute('href');
  32.         if (!href) return null;
  33.         return href.substring(1);
  34.     }
  35.  
  36.     // Get the note from local storage
  37.     function getNote(repoFullName) {
  38.         // Convert to lowercase
  39.         return GM_getValue(NOTE_KEY_PREFIX + repoFullName.toLowerCase(), '');
  40.     }
  41.     // Set the note to local storage
  42.     function setNote(repoFullName, note) {
  43.         if (note) {
  44.             GM_setValue(NOTE_KEY_PREFIX + repoFullName.toLowerCase(), note);
  45.         } else {
  46.             GM_deleteValue(NOTE_KEY_PREFIX + repoFullName.toLowerCase());
  47.         }
  48.     }
  49.  
  50.     // Create the note button
  51.     function createNoteButton(repoFullName, note, onClick) {
  52.         const btn = document.createElement('button');
  53.         const icon = document.createElement('span');
  54.         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));">
  55.             <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>
  56.         </svg>`;
  57.         btn.appendChild(icon);
  58.         btn.appendChild(document.createTextNode(note ? 'Edit' : 'Add'));
  59.         
  60.         btn.style.margin = '4px';
  61.         btn.style.borderRadius = '6px';
  62.         btn.style.padding = '2px 8px';
  63.         btn.style.fontSize = '12px';
  64.         btn.style.cursor = 'pointer';
  65.         btn.style.fontFamily = 'var(--fontStack-sansSerif)';
  66.         btn.style.lineHeight = '20px';
  67.         btn.style.fontWeight = '600';
  68.         btn.style.color = 'var(--button-default-fgColor-rest, var(--color-btn-text))';
  69.         btn.style.backgroundColor = 'var(--button-default-bgColor-rest, var(--color-btn-bg))';
  70.         btn.style.border = '1px solid var(--button-default-borderColor-rest,var(--color-btn-border))';
  71.         btn.style.display = 'flex';
  72.         btn.style.alignItems = 'center';
  73.         btn.style.height = 'var(--control-small-size,1.75rem)';
  74.         btn.addEventListener('click', onClick);
  75.         return btn;
  76.     }
  77.  
  78.     // Create the note display
  79.     function createNoteDisplay(note) {
  80.         const div = document.createElement('div');
  81.         const icon = document.createElement('span');
  82.         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));">
  83.             <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>
  84.         </svg>`;
  85.         div.appendChild(icon);
  86.         div.appendChild(document.createTextNode(note));
  87.         
  88.         div.style.borderRadius = '6px';
  89.         div.style.padding = '4px 8px';
  90.         div.style.marginTop = '2px';
  91.         div.style.marginBottom = '6px';
  92.         div.style.fontSize = '13px';
  93.         div.style.fontFamily = 'var(--fontStack-sansSerif)';
  94.         div.style.lineHeight = '20px';
  95.         div.style.display = 'flex';
  96.         div.style.alignItems = 'center';
  97.         return div;
  98.     }
  99.  
  100.     // Prompt the user to input the note
  101.     function promptNote(oldNote) {
  102.         let note = prompt('Please input your notes (leave blank to be deleted):', oldNote || '');
  103.         if (note === null) return undefined;
  104.         note = note.trim();
  105.         return note;
  106.     }
  107.  
  108.     // Insert the button and note on the card
  109.     function enhanceCard(card) {
  110.         if (card.dataset.noteEnhanced) return; // Avoid duplicate
  111.         const repoFullName = getRepoFullName(card);
  112.         if (!repoFullName) return;
  113.         card.dataset.noteEnhanced = '1';
  114.         // Find the star button
  115.         let starBtn = card.querySelector('.js-toggler-container.js-social-container.starring-container, .Box-sc-g0xbh4-0.fvaNTI');
  116.         if (!starBtn) return;
  117.         // Create the button
  118.         let note = getNote(repoFullName);
  119.         let btn = createNoteButton(repoFullName, note, function() {
  120.             let newNote = promptNote(note);
  121.             if (typeof newNote === 'undefined') return;
  122.             setNote(repoFullName, newNote);
  123.             // Re-render
  124.             card.dataset.noteEnhanced = '';
  125.             enhanceCard(card);
  126.         });
  127.         // Insert the button
  128.         if (starBtn.parentElement) {
  129.             // Avoid duplicate insertion
  130.             let oldBtn = starBtn.parentElement.querySelector('.gh-note-btn');
  131.             if (oldBtn) oldBtn.remove();
  132.             btn.classList.add('gh-note-btn');
  133.             starBtn.parentElement.appendChild(btn);
  134.         }
  135.         // Note display
  136.         let oldNoteDiv = card.querySelector('.gh-note-display');
  137.         if (oldNoteDiv) oldNoteDiv.remove();
  138.         if (note) {
  139.             let noteDiv = createNoteDisplay(note);
  140.             noteDiv.classList.add('gh-note-display');
  141.             // Put it before the data bar
  142.             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');
  143.             if (dataInfo && dataInfo.parentElement) {
  144.                 dataInfo.parentElement.insertBefore(noteDiv, dataInfo);
  145.             }
  146.         }
  147.     }
  148.  
  149.     // Select all repository cards
  150.     function findAllRepoCards() {
  151.         // Adapt to multiple card structures
  152.         let cards = Array.from(document.querySelectorAll(`
  153.             .col-12.d-block.width-full.py-4.border-bottom.color-border-muted,
  154.             li.col-12.d-flex.flex-justify-between.width-full.py-4.border-bottom.color-border-muted,
  155.             .Box-sc-g0xbh4-0.iwUbcA,
  156.             .Box-sc-g0xbh4-0.flszRz,
  157.             .Box-sc-g0xbh4-0.jbaXRR,
  158.             .Box-sc-g0xbh4-0.bmHqGc,
  159.             .Box-sc-g0xbh4-0.hFxojJ,
  160.             section[aria-label="card content"]
  161.         `));
  162.         // Filter out cards without a repository full name
  163.         return cards.filter(card => getRepoFullName(card));
  164.     }
  165.  
  166.     // Determine if it is a repository page
  167.     function isRepoPage() {
  168.         const path = window.location.pathname;
  169.         const parts = path.split('/').filter(Boolean);
  170.         return (parts.length === 2 || (parts.length === 4 && parts[2] === 'tree')) && 
  171.                !path.includes('/blob/') && 
  172.                !path.includes('/issues/') && 
  173.                !path.includes('/pulls/');
  174.     }
  175.  
  176.     // Repository page processing function
  177.     function enhanceRepoPage() {
  178.         if (document.body.dataset.noteEnhanced) return; // Avoid duplicate
  179.         // Get the repository name from the link
  180.         const path = window.location.pathname;
  181.         const parts = path.split('/').filter(Boolean);
  182.         const repoFullName = parts.slice(0, 2).join('/');
  183.         if (!repoFullName) return;
  184.         document.body.dataset.noteEnhanced = '1';
  185.  
  186.         // Create the first button
  187.         let note = getNote(repoFullName);
  188.         let btn = createNoteButton(repoFullName, note, function() {
  189.             let newNote = promptNote(note);
  190.             if (typeof newNote === 'undefined') return;
  191.             setNote(repoFullName, newNote);
  192.             // Re-render
  193.             document.body.dataset.noteEnhanced = '';
  194.             enhanceRepoPage();
  195.         });
  196.  
  197.         // Find the button bar
  198.         let actionsList = document.querySelector('.pagehead-actions');
  199.         if (actionsList) {
  200.             // Create a new li element
  201.             let li = document.createElement('li');
  202.             li.appendChild(btn);
  203.  
  204.             // Avoid duplicate insertion
  205.             let oldLi = actionsList.querySelector('.gh-note-li');
  206.             if (oldLi) oldLi.remove();
  207.             li.classList.add('gh-note-li');
  208.  
  209.             // Add to the button bar
  210.             actionsList.appendChild(li);
  211.         }
  212.  
  213.         // Create the second button
  214.         let btn2 = createNoteButton(repoFullName, note, function() {
  215.             let newNote = promptNote(note);
  216.             if (typeof newNote === 'undefined') return;
  217.             setNote(repoFullName, newNote);
  218.             // Re-render
  219.             document.body.dataset.noteEnhanced = '';
  220.             enhanceRepoPage();
  221.         });
  222.  
  223.         // Find the container
  224.         let container = document.querySelector('.container-xl:not(.d-flex):not(.clearfix)');
  225.         if (container) {
  226.             // Find the star button
  227.             let starBtn = container.querySelector('div[data-view-component="true"].js-toggler-container.starring-container');
  228.             if (starBtn && starBtn.parentElement) {
  229.                 // Avoid duplicate insertion
  230.                 let oldBtn = starBtn.parentElement.querySelector('.gh-note-btn');
  231.                 if (oldBtn) oldBtn.remove();
  232.                 let newBtn = btn2;
  233.                 newBtn.classList.add('gh-note-btn');
  234.                 starBtn.parentElement.appendChild(newBtn);
  235.             }
  236.         }
  237.  
  238.         // Remove the old note display
  239.         let oldNoteDiv = document.querySelector('.gh-note-display');
  240.         if (oldNoteDiv) oldNoteDiv.remove();
  241.         let oldNoteDiv2 = document.querySelector('.gh-note-display2');
  242.         if (oldNoteDiv2) oldNoteDiv2.remove();
  243.     
  244.         if (note) {
  245.             // Create the first note display
  246.             let noteDiv = createNoteDisplay(note);
  247.             noteDiv.classList.add('gh-note-display');
  248.             
  249.             // Find the description
  250.             let description = document.querySelector('.f4.my-3, .f4.my-3.color-fg-muted.text-italic');
  251.             if (description && description.parentElement) {
  252.                 description.parentElement.insertBefore(noteDiv, description.nextSibling);
  253.             }
  254.  
  255.             // Create the second note display
  256.             let noteDiv2 = createNoteDisplay(note);
  257.             noteDiv2.classList.add('gh-note-display2');            
  258.  
  259.             if (container) {
  260.                 // Try finding the description
  261.                 let newDescription = container.querySelector('p.f4.mb-3.color-fg-muted');
  262.                 if (newDescription && newDescription.parentElement) {
  263.                     newDescription.parentElement.insertBefore(noteDiv2, newDescription.nextSibling);
  264.                 } else {
  265.                     // If there is no description, find the flex container
  266.                     let flexContainer = container.querySelector('div.d-flex.gap-2.mt-n3.mb-3.flex-wrap');
  267.                     if (flexContainer && flexContainer.parentElement) {
  268.                         flexContainer.parentElement.insertBefore(noteDiv2, flexContainer.nextSibling);
  269.                     }
  270.                 }
  271.             }
  272.         }
  273.     }
  274.  
  275.     // Export notes data
  276.     function exportNotes() {
  277.         const notes = {};
  278.         const keys = GM_listValues();
  279.         for (let i = 0; i < keys.length; i++) {
  280.             const key = keys[i];
  281.             if (key.startsWith(NOTE_KEY_PREFIX)) {
  282.                 notes[key] = GM_getValue(key);
  283.             }
  284.         }
  285.         const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(notes));
  286.         const downloadAnchorNode = document.createElement('a');
  287.         downloadAnchorNode.setAttribute("href", dataStr);
  288.         downloadAnchorNode.setAttribute("download", "github_repo_notes.json");
  289.         document.body.appendChild(downloadAnchorNode);
  290.         downloadAnchorNode.click();
  291.         downloadAnchorNode.remove();
  292.     }
  293.  
  294.     // Import notes data
  295.     function importNotes() {
  296.         const input = document.createElement('input');
  297.         input.type = 'file';
  298.         input.accept = '.json';
  299.         input.onchange = (e) => {
  300.             const file = e.target.files[0];
  301.             if (file) {
  302.                 const reader = new FileReader();
  303.                 reader.onload = (event) => {
  304.                     try {
  305.                         const notes = JSON.parse(event.target.result);
  306.                         for (const key in notes) {
  307.                             if (notes.hasOwnProperty(key) && key.startsWith(NOTE_KEY_PREFIX)) {
  308.                                 GM_setValue(key, notes[key]);
  309.                             }
  310.                         }
  311.                         alert('Import successfully!');
  312.                         enhanceAll();
  313.                     } catch (error) {
  314.                         alert('Error:' + error.message);
  315.                     }
  316.                 };
  317.                 reader.readAsText(file);
  318.             }
  319.         };
  320.         input.click();
  321.     }
  322.  
  323.     // Clear all notes data
  324.     function clearNotes() {
  325.         const keys = GM_listValues();
  326.         for (let i = 0; i < keys.length; i++) {
  327.             const key = keys[i];
  328.             if (key.startsWith(NOTE_KEY_PREFIX)) {
  329.                 GM_deleteValue(key);
  330.             }
  331.         }
  332.     }
  333.  
  334.     // Create the floating button
  335.     function createFloatingButton(text, onClick) {
  336.         const btn = document.createElement('button');
  337.         btn.textContent = text;
  338.         btn.style.margin = '5px';
  339.         btn.style.borderRadius = '6px';
  340.         btn.style.backgroundColor = 'var(--button-default-bgColor-rest, var(--color-btn-bg))';
  341.         btn.style.color = 'var(--button-default-fgColor-rest, var(--color-btn-text))';
  342.         btn.style.border = '1px solid var(--button-default-borderColor-rest,var(--color-btn-border))';
  343.         btn.addEventListener('click', onClick);
  344.         return btn;
  345.     }
  346.  
  347.     // Create the bottom floating button
  348.     function createBottomButton() {
  349.         if (document.querySelector('.gh-import-export-btn')) return; // Avoid duplicate
  350.         const bottomBtn = document.createElement('button');
  351.         bottomBtn.textContent = '☰';
  352.         bottomBtn.classList.add('gh-import-export-btn');
  353.         bottomBtn.style.position = 'fixed';
  354.         bottomBtn.style.bottom = '20px';
  355.         bottomBtn.style.right = '20px';
  356.         bottomBtn.style.zIndex = '1000';
  357.         bottomBtn.style.padding = '10px 20px';
  358.         bottomBtn.style.backgroundColor = 'var(--button-default-bgColor-rest, var(--color-btn-bg))';
  359.         bottomBtn.style.color = 'var(--button-default-fgColor-rest, var(--color-btn-text))';
  360.         bottomBtn.style.border = '1px solid var(--button-default-borderColor-rest,var(--color-btn-border))';
  361.         bottomBtn.style.borderRadius = '50%';
  362.         bottomBtn.style.fontSize = '14px';
  363.         bottomBtn.style.cursor = 'pointer';
  364.         bottomBtn.addEventListener('click', () => {
  365.             if (document.querySelector('.gh-import-export-dialog')) {
  366.                 document.querySelector('.gh-import-export-dialog').remove();
  367.                 bottomBtn.textContent = '☰';
  368.                 bottomBtn.style.borderRadius = '50%';
  369.                 return;
  370.             }
  371.  
  372.             // Expand the button
  373.             bottomBtn.textContent = 'Import/Export notes data';
  374.             bottomBtn.style.borderRadius = '8px';
  375.  
  376.             // Create the dialog
  377.             const dialog = document.createElement('div');
  378.             dialog.classList.add('gh-import-export-dialog');
  379.             dialog.style.position = 'fixed';
  380.             dialog.style.bottom = '60px';
  381.             dialog.style.right = '20px';
  382.             dialog.style.backgroundColor = 'rgba(255, 255, 255, 0)';
  383.             dialog.style.border = 'none';
  384.             dialog.style.padding = '10px';
  385.             dialog.style.zIndex = '1001';
  386.  
  387.             const exportBtn = createFloatingButton('Export', () => {
  388.                 exportNotes();
  389.                 dialog.remove();
  390.             });
  391.  
  392.             const importBtn = createFloatingButton('Import', () => {
  393.                 importNotes();
  394.                 dialog.remove();
  395.             });
  396.  
  397.             const clearBtn = createFloatingButton('Clear', () => {
  398.                 if (!confirm('Are you sure you want to clear all notes?')) return;
  399.                 clearNotes();
  400.                 dialog.remove();
  401.             });
  402.  
  403.             dialog.appendChild(exportBtn);
  404.             dialog.appendChild(importBtn);
  405.             dialog.appendChild(clearBtn);
  406.             document.body.appendChild(dialog);
  407.         });
  408.         document.body.appendChild(bottomBtn);
  409.     }
  410.  
  411.     // Initial processing
  412.     function enhanceAll() {
  413.         if (isRepoPage()) {
  414.             enhanceRepoPage();
  415.         } else {
  416.             findAllRepoCards().forEach(enhanceCard);
  417.         }
  418.         createBottomButton();
  419.     }
  420.  
  421.     // Listen for DOM changes to adapt to dynamic loading
  422.     const observer = new MutationObserver(() => {
  423.         enhanceAll();
  424.     });
  425.     observer.observe(document.body, {childList: true, subtree: true});
  426.  
  427.     // First load
  428.     enhanceAll();
  429. })();