☰

GitHub Gist Copier

Add copy button to Gist files for easy code copying.

  1. // ==UserScript==
  2. // @name         GitHub Gist Copier
  3. // @description  Add copy button to Gist files for easy code copying.
  4. // @icon         https://github.githubassets.com/favicons/favicon-dark.svg
  5. // @version      1.3
  6. // @author       afkarxyz
  7. // @namespace    https://github.com/afkarxyz/userscripts/
  8. // @supportURL   https://github.com/afkarxyz/userscripts/issues
  9. // @license      MIT
  10. // @run-at       document-end
  11. // @match        https://gist.github.com/*
  12. // @grant        GM_xmlhttpRequest
  13. // @grant        GM_setClipboard
  14. // @grant        GM_addStyle
  15. // @connect      api.codetabs.com
  16. // @connect      api.cors.lol
  17. // @connect      api.allorigins.win
  18. // @connect      everyorigin.jwvbremen.nl
  19. // @connect      gist.githubusercontent.com
  20. // ==/UserScript==
  21.  
  22. ;(() => {
  23.     let isRequestInProgress = false
  24.   
  25.     GM_addStyle(`
  26.           @keyframes spin {
  27.               0% { transform: rotate(0deg); }
  28.               100% { transform: rotate(360deg); }
  29.           }
  30.           
  31.           .gist-copy-spinner {
  32.               animation: spin 0.75s linear infinite;
  33.               transform-origin: center;
  34.           }
  35.       `)
  36.   
  37.     const proxyServices = [
  38.       {
  39.         name: "CodeTabs Proxy",
  40.         url: "https://api.codetabs.com/v1/proxy/?quest=",
  41.       },
  42.       {
  43.         name: "CORS.lol Proxy",
  44.         url: "https://api.cors.lol/?url=",
  45.       },
  46.       {
  47.         name: "AllOrigins Proxy",
  48.         url: "https://api.allorigins.win/get?url=",
  49.         parseResponse: (response) => {
  50.           const parsed = JSON.parse(response)
  51.           return parsed.contents
  52.         },
  53.       },
  54.       {
  55.         name: "EveryOrigin Proxy",
  56.         url: "https://everyorigin.jwvbremen.nl/api/get?url=",
  57.         parseResponse: (response) => {
  58.           const parsed = JSON.parse(response)
  59.           return parsed.html
  60.         },
  61.       },
  62.     ]
  63.   
  64.     function noop() {}
  65.   
  66.     function debounce(f, delay) {
  67.       let timeoutId = null
  68.       return function (...args) {
  69.         if (timeoutId) {
  70.           clearTimeout(timeoutId)
  71.         }
  72.         timeoutId = setTimeout(() => {
  73.           f.apply(this, args)
  74.         }, delay)
  75.       }
  76.     }
  77.   
  78.     async function fetchWithProxy(rawUrl, proxyIndex = 0) {
  79.       if (proxyIndex >= proxyServices.length) {
  80.         throw new Error("All proxies failed")
  81.       }
  82.   
  83.       const proxyService = proxyServices[proxyIndex]
  84.       const proxiedUrl = `${proxyService.url}${encodeURIComponent(rawUrl)}`
  85.   
  86.       return new Promise((resolve, reject) => {
  87.         GM_xmlhttpRequest({
  88.           method: "GET",
  89.           url: proxiedUrl,
  90.           headers: {
  91.             Accept: "text/plain, application/json, */*",
  92.           },
  93.           followRedirect: true,
  94.           onload: (response) => {
  95.             if (response.responseText.includes("limit") && response.responseText.includes("API")) {
  96.               fetchWithProxy(rawUrl, proxyIndex + 1)
  97.                 .then(resolve)
  98.                 .catch(reject)
  99.               return
  100.             }
  101.   
  102.             if (response.status === 200) {
  103.               try {
  104.                 let responseText = response.responseText
  105.   
  106.                 if (proxyService.parseResponse) {
  107.                   responseText = proxyService.parseResponse(responseText)
  108.                 }
  109.   
  110.                 if (responseText.includes("<a href=") && responseText.includes("Moved Permanently")) {
  111.                   const match = responseText.match(/href="([^"]+)"/)
  112.                   if (match && match[1]) {
  113.                     const redirectUrl = match[1].startsWith("/") ? `${new URL(proxiedUrl).origin}${match[1]}` : match[1]
  114.   
  115.                     GM_xmlhttpRequest({
  116.                       method: "GET",
  117.                       url: redirectUrl,
  118.                       headers: {
  119.                         Accept: "text/plain, application/json, */*",
  120.                       },
  121.                       onload: (redirectResponse) => {
  122.                         if (redirectResponse.status === 200) {
  123.                           resolve(redirectResponse.responseText)
  124.                         } else {
  125.                           fetchWithProxy(rawUrl, proxyIndex + 1)
  126.                             .then(resolve)
  127.                             .catch(reject)
  128.                         }
  129.                       },
  130.                       onerror: () => {
  131.                         fetchWithProxy(rawUrl, proxyIndex + 1)
  132.                           .then(resolve)
  133.                           .catch(reject)
  134.                       },
  135.                     })
  136.                   } else {
  137.                     fetchWithProxy(rawUrl, proxyIndex + 1)
  138.                       .then(resolve)
  139.                       .catch(reject)
  140.                   }
  141.                 } else {
  142.                   resolve(responseText)
  143.                 }
  144.               } catch (e) {
  145.                 fetchWithProxy(rawUrl, proxyIndex + 1)
  146.                   .then(resolve)
  147.                   .catch(reject)
  148.               }
  149.             } else {
  150.               fetchWithProxy(rawUrl, proxyIndex + 1)
  151.                 .then(resolve)
  152.                 .catch(reject)
  153.             }
  154.           },
  155.           onerror: () => {
  156.             fetchWithProxy(rawUrl, proxyIndex + 1)
  157.               .then(resolve)
  158.               .catch(reject)
  159.           },
  160.         })
  161.       })
  162.     }
  163.   
  164.     function createCopyButton(fileElement) {
  165.       const fileActionElement = fileElement.querySelector(".file-actions")
  166.       if (!fileActionElement) {
  167.         return noop
  168.       }
  169.   
  170.       const rawButton = fileActionElement.querySelector('a[href*="/raw/"]')
  171.       if (!rawButton) {
  172.         return noop
  173.       }
  174.   
  175.       const button = document.createElement("button")
  176.       button.className = "btn-octicon gist-copy-button"
  177.       button.style.marginRight = "5px"
  178.   
  179.       button.innerHTML = `
  180.           <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy">
  181.               <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
  182.           </svg>
  183.   
  184.           <svg style="display: none;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="gist-spinner">
  185.               <path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity="0.25"/>
  186.               <path fill="currentColor" d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" class="gist-copy-spinner"/>
  187.           </svg>
  188.   
  189.           <svg style="display: none;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check color-fg-success">
  190.               <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path>
  191.           </svg>
  192.           `
  193.   
  194.       const copyIcon = button.querySelector(".octicon-copy")
  195.       const spinnerIcon = button.querySelector(".gist-spinner")
  196.       const checkIcon = button.querySelector(".octicon-check")
  197.   
  198.       let timeoutId = null
  199.       const copyHandler = async (e) => {
  200.         if (timeoutId || isRequestInProgress) {
  201.           return
  202.         }
  203.         e.preventDefault()
  204.   
  205.         isRequestInProgress = true
  206.         copyIcon.style.display = "none"
  207.         spinnerIcon.style.display = "inline-block"
  208.   
  209.         try {
  210.           const rawUrl = rawButton.href
  211.           const content = await fetchWithProxy(rawUrl)
  212.   
  213.           GM_setClipboard(content, { type: "text", mimetype: "text/plain" })
  214.   
  215.           spinnerIcon.style.display = "none"
  216.           checkIcon.style.display = "inline-block"
  217.   
  218.           timeoutId = setTimeout(() => {
  219.             checkIcon.style.display = "none"
  220.             copyIcon.style.display = "inline-block"
  221.             timeoutId = null
  222.           }, 500)
  223.         } catch (error) {
  224.           spinnerIcon.style.display = "none"
  225.           copyIcon.style.display = "inline-block"
  226.         } finally {
  227.           isRequestInProgress = false
  228.         }
  229.       }
  230.   
  231.       button.addEventListener("click", copyHandler)
  232.       fileActionElement.insertBefore(button, fileActionElement.firstChild)
  233.   
  234.       return () => {
  235.         button.removeEventListener("click", copyHandler)
  236.         if (timeoutId) {
  237.           clearTimeout(timeoutId)
  238.         }
  239.         button.remove()
  240.       }
  241.     }
  242.   
  243.     function runGistCopy() {
  244.       let removeAllListeners = noop
  245.   
  246.       function tryCreateCopyButtons() {
  247.         removeAllListeners()
  248.         const fileElements = [...document.querySelectorAll(".file")]
  249.         const removeListeners = fileElements.map(createCopyButton)
  250.         removeAllListeners = () => {
  251.           removeListeners.map((f) => f())
  252.           ;[...document.querySelectorAll(".gist-copy-button")].forEach((el) => {
  253.             el.remove()
  254.           })
  255.         }
  256.       }
  257.   
  258.       setTimeout(tryCreateCopyButtons, 300)
  259.   
  260.       const observer = new MutationObserver(
  261.         debounce(() => {
  262.           if (
  263.             document.querySelectorAll(".file").length > 0 &&
  264.             document.querySelectorAll(".gist-copy-button").length === 0
  265.           ) {
  266.             tryCreateCopyButtons()
  267.           }
  268.         }, 100),
  269.       )
  270.   
  271.       observer.observe(document.body, {
  272.         childList: true,
  273.         subtree: true,
  274.       })
  275.   
  276.       if (window.onurlchange === null) {
  277.         window.addEventListener("urlchange", debounce(tryCreateCopyButtons, 16))
  278.       }
  279.     }
  280.   
  281.     runGistCopy()
  282.   })()