☰

GitHub Folder Downloader

To add a download button for a GitHub folder, which allows easy downloading of a specific folder, you can follow these steps

ของเมื่อวันที่ 28-08-2024 ดู เวอร์ชันล่าสุด

  1. // ==UserScript==
  2. // @name        GitHub Folder Downloader
  3. // @name:en        GitHub Folder Downloader
  4. // @name:zh-CN    GitHub 文件夹下载器
  5. // @name:zh-TW    GitHub 文件夾下載器
  6. // @name:ja      GitHub フォルダー ダウンローダー
  7. // @name:vi      Trình tải xuống thư mục GitHub
  8. // @name:ko      GitHub 폴더 다운로더
  9. // @description  To add a download button for a GitHub folder, which allows easy downloading of a specific folder, you can follow these steps
  10. // @description:en  To add a download button for a GitHub folder, which allows easy downloading of a specific folder, you can follow these steps
  11. // @description:zh-CN  添加一个下载按钮，允许轻松下载特定的 GitHub 文件夹。
  12. // @description:zh-TW  添加一個下載按鈕，允許輕鬆下載特定的 GitHub 文件夾。
  13. // @description:ja      特定の GitHub フォルダーを簡単にダウンロードできるダウンロードボタンを追加します。
  14. // @description:vi      Thêm một nút tải xuống cho phép tải xuống thư mục GitHub cụ thể một cách dễ dàng.
  15. // @description:ko      특정 GitHub 폴더를 쉽게 다운로드할 수 있는 다운로드 버튼을 추가합니다.
  16. // @namespace               https://github.com/ChinaGodMan/UserScripts
  17. // @version 0.7.0.2
  18. // @author       EricKwok,人民的勤务员 <toniaiwanowskiskr47@gmail.com>
  19. // @supportURL              https://github.com/ChinaGodMan/UserScripts/issues
  20. // @homepageURL   https://github.com/ChinaGodMan/UserScripts
  21. // @match        *://github.com/*
  22. // @icon         https://i.loli.net/2021/03/30/ULV9XunaHesqGIR.png
  23. // @run-at       document-idle
  24. // @grant        none
  25. // @license      MIT
  26. // ==/UserScript==
  27. // 记录页面宽度是否允许 GitHub 展开完整页面的变量
  28. var isFold = false
  29. var isRun = false
  30. function observeAndAddLinks() {
  31.     const parentElement = document.querySelector('#__primerPortalRoot__')
  32.     if (!parentElement) return
  33.     const observer = new MutationObserver((mutationsList) => {
  34.         for (const mutation of mutationsList) {
  35.             if (mutation.addedNodes.length > 0) {
  36.                 for (const node of mutation.addedNodes) {
  37.                     const ulElement = parentElement.querySelector('ul[role="menu"]')
  38.                     if (document.querySelector('.github-folder-download')) return
  39.                     console.log(node)
  40.                     if (ulElement) {
  41.                         const _html = `
  42.                             <li class="github-folder-download">
  43.                                 <p style="padding:0px 8px 2px 10px; color:grey; margin:0; font-size:10px;">Download folder with..</p>
  44.                             </li>
  45.                             <a class="dropdown-item" target="_blank" href="https://download-directory.github.io?url=${window.location.href}">
  46.                                 download-directory
  47.                             </a>
  48.                             <a class="dropdown-item" target="_blank" href="https://downgit.github.io/#/home?url=${window.location.href}">
  49.                                 DownGit
  50.                             </a>
  51.                             <li class="d-block d-md-none dropdown-divider github-folder-download" role="none"></li>`
  52.                         ulElement.insertAdjacentHTML("beforeend", _html)
  53.                     }
  54.                     return
  55.                 }
  56.             }
  57.         }
  58.     })
  59.     const config = { childList: true, subtree: true }
  60.     if (!isRun) {
  61.         isRun = true
  62.         observer.observe(parentElement, config)
  63.     }
  64.     return true
  65. }
  66. observeAndAddLinks()
  67. // 注入下载文件夹按钮
  68. function injectDownloadFolderBtn() {
  69.     if (document.querySelector('.github-folder-download')) return
  70.     if (!isFold) {
  71.         // 展开状态（PC端）
  72.         let html = document.querySelector('[data-testid="tree-overflow-menu-anchor"]')//.types__StyledButton-sc-ws60qy-0.feqCqy
  73.         let _html = `
  74.             <details data-view-component="true" class="details-overlay details-reset position-relative mr-2 github-folder-download">
  75.                 <summary role="button" data-view-component="true">
  76.                     <span class="btn d-none d-md-flex flex-items-center">
  77.                         Download folder
  78.                         <span class="dropdown-caret ml-1"></span>
  79.                     </span>
  80.                     <span class="btn d-inline-block d-md-none">
  81.                         <svg aria-label="More options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal">
  82.                             <path d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
  83.                         </svg>
  84.                     </span>
  85.                 </summary>
  86.                 <div class="dropdown-menu dropdown-menu-sw" style="top:32px;width:220px;">
  87.                     <ul class="list-style-none">
  88.                         <li class="Box-row Box-row--hover-gray p-3 mt-0">
  89.                             <a class="d-flex flex-items-center color-text-primary text-bold no-underline" rel="noopener" target="_blank" href="https://download-directory.github.io?url=${window.location.href}">
  90.                             With download - directory
  91.                             </a >
  92.                         </li >
  93.                         <li class="Box-row Box-row--hover-gray p-3 mt-0">
  94.                             <a class="d-flex flex-items-center color-text-primary text-bold no-underline" rel="noopener" target="_blank" href="https://downgit.github.io/#/home?url=${window.location.href}">
  95.                                 With DownGit
  96.                             </a>
  97.                         </li>
  98.                     </ul >
  99.                 </div >
  100.             </detials>`
  101.         html.insertAdjacentHTML("beforebegin", _html)
  102.     } else {
  103.         observeAndAddLinks()
  104.     }
  105. }
  106. function removeAllInjectedElem() {
  107.     document.querySelectorAll(".github-folder-download").forEach(elem => elem.remove())
  108. }
  109. function detectFoldUnfold() {
  110.     if (document.body.clientWidth <= 1200 && !isFold) {
  111.         console.log("收起" + document.body.clientWidth)
  112.         isFold = true
  113.     } else if (document.body.clientWidth > 1200 && isFold) {
  114.         console.log("展开" + document.body.clientWidth)
  115.         isFold = false
  116.     }
  117. }
  118. function reinject() {
  119.     if (document.querySelector(".octicon.octicon-copy")) {//复制路径的元素
  120.         // 仅当处于文件夹内时注入按钮
  121.         removeAllInjectedElem()
  122.         injectDownloadFolderBtn()
  123.     }
  124. }
  125. function main() {
  126.     detectFoldUnfold()
  127.     reinject()
  128. }
  129. (function () {
  130.     'use strict'
  131.     /**
  132.      * 在浏览器窗口大小改变时自动重新定位设置菜单
  133.      */
  134.     window.onresize = function () {
  135.         // 监听窗口大小改变
  136.         main()
  137.     }
  138.     function observeUrlChanges(callback, delay = 1000) {
  139.         let lastUrl = location.href
  140.         const observer = new MutationObserver(() => {
  141.             const url = location.href
  142.             if (url !== lastUrl) {
  143.                 lastUrl = url
  144.                 setTimeout(() => {
  145.                     console.log("页面发生变动,")
  146.                     callback()
  147.                 }, delay)
  148.             }
  149.         })
  150.         observer.observe(document, { subtree: true, childList: true })
  151.         return observer
  152.     }
  153.     observeUrlChanges(main)
  154.     main()
  155. })()