☰

Stack Overflow Copy Code

Add copy button to copy code inside Stack Overflow answers

2023-09-14 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

  1. // ==UserScript==
  2. // @name         Stack Overflow Copy Code
  3. // @namespace    https://t.me/OneFinalHug
  4. // @version      0.2
  5. // @license      MIT
  6. // @description  Add copy button to copy code inside Stack Overflow answers
  7. // @author       OFH
  8. // @match        https://stackoverflow.com/questions/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     function createCopyCodeButton() {
  16.         const codeBlocks = document.querySelectorAll('pre code');
  17.  
  18.         codeBlocks.forEach(codeBlock => {
  19.             const codeContainer = codeBlock.parentNode;
  20.             
  21.             const copyButton = document.createElement('button');
  22.             copyButton.textContent = 'Copy Code';
  23.             copyButton.classList.add('copy-code-button');
  24.  
  25.             copyButton.addEventListener('click', () => {
  26.                 const codeText = codeBlock.textContent;
  27.                 navigator.clipboard.writeText(codeText)
  28.                     .then(() => {
  29.                         copyButton.textContent = 'Copied!';
  30.                         setTimeout(() => {
  31.                             copyButton.textContent = 'Copy Code';
  32.                         }, 2000);
  33.                     })
  34.                     .catch(err => {
  35.                         console.error('Failed to copy code: ', err);
  36.                     });
  37.             });
  38.  
  39.             codeContainer.style.position = 'relative';
  40.             copyButton.style.position = 'absolute';
  41.             copyButton.style.top = '5px';
  42.             copyButton.style.right = '5px';
  43.  
  44.             codeContainer.appendChild(copyButton);
  45.         });
  46.     }
  47.  
  48.     const customStyles = `
  49.         .copy-code-button {
  50.             background-color: #f2f2f2;
  51.             border: none;
  52.             border-color:red;
  53.             border-radius: 3px;
  54.             padding: 5px 10px;
  55.             cursor: pointer;
  56.             font-size: 12px;
  57.         }
  58.         .copy-code-button:hover {
  59.             background-color: #ddd;
  60.         }
  61.     `;
  62.  
  63.     const styleElement = document.createElement('style');
  64.     styleElement.type = 'text/css';
  65.     styleElement.appendChild(document.createTextNode(customStyles));
  66.     document.head.appendChild(styleElement);
  67.  
  68.     window.addEventListener('load', createCopyCodeButton);
  69. })();