☰

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