☰

Perplexity AI Enhanced Floating Copy Button

Adds a beautiful floating copy button for code blocks on perplexity.ai, positioned further to the right

  1. // ==UserScript==
  2. // @name         Perplexity AI Enhanced Floating Copy Button
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.7
  5. // @description  Adds a beautiful floating copy button for code blocks on perplexity.ai, positioned further to the right
  6. // @match        https://www.perplexity.ai/*
  7. // @icon         https://play-lh.googleusercontent.com/6STp0lYx2ctvQ-JZpXA1LeAAZIlq6qN9gpy7swLPlRhmp-hfvZePcBxqwVkqN2BH1g
  8. // @author       Chirooon (https://github.com/Chirooon)
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     const floatingButton = document.createElement('button');
  16.     floatingButton.setAttribute('aria-label', 'Copy Code');
  17.     floatingButton.setAttribute('type', 'button');
  18.     floatingButton.innerHTML = `
  19.         <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  20.             <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
  21.             <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
  22.         </svg>
  23.     `;
  24.     floatingButton.style.cssText = `
  25.         position: fixed;
  26.         bottom: 70px;
  27.         right: 21px;
  28.         z-index: 9998;
  29.         display: none;
  30.         align-items: center;
  31.         justify-content: center;
  32.         width: 40px;
  33.         height: 40px;
  34.         background-color: #4a4a4a;
  35.         color: #ffffff;
  36.         border: none;
  37.         border-radius: 50%;
  38.         cursor: pointer;
  39.         transition: all 0.3s ease;
  40.         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  41.     `;
  42.  
  43.     document.body.appendChild(floatingButton);
  44.  
  45.     let currentCodeBlock = null;
  46.  
  47.     function updateButtonVisibility() {
  48.         const codeBlocks = document.querySelectorAll('pre');
  49.         let visible = false;
  50.  
  51.         for (const codeBlock of codeBlocks) {
  52.             const rect = codeBlock.getBoundingClientRect();
  53.             if (rect.top < window.innerHeight && rect.bottom > 0) {
  54.                 visible = true;
  55.                 currentCodeBlock = codeBlock;
  56.                 break;
  57.             }
  58.         }
  59.  
  60.         floatingButton.style.display = visible ? 'flex' : 'none';
  61.     }
  62.  
  63.     floatingButton.addEventListener('click', () => {
  64.         if (currentCodeBlock) {
  65.             const codeText = currentCodeBlock.textContent;
  66.             navigator.clipboard.writeText(codeText).then(() => {
  67.                 floatingButton.style.backgroundColor = '#2ecc71';
  68.                 floatingButton.innerHTML = `
  69.                     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  70.                         <polyline points="20 6 9 17 4 12"></polyline>
  71.                     </svg>
  72.                 `;
  73.                 setTimeout(() => {
  74.                     floatingButton.style.backgroundColor = '#4a4a4a';
  75.                     floatingButton.innerHTML = `
  76.                         <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  77.                             <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
  78.                             <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
  79.                         </svg>
  80.                     `;
  81.                 }, 2000);
  82.             });
  83.         }
  84.     });
  85.  
  86.     floatingButton.addEventListener('mouseover', () => {
  87.         floatingButton.style.transform = 'scale(1.1)';
  88.         floatingButton.style.backgroundColor = '#5a5a5a';
  89.     });
  90.  
  91.     floatingButton.addEventListener('mouseout', () => {
  92.         floatingButton.style.transform = 'scale(1)';
  93.         floatingButton.style.backgroundColor = '#4a4a4a';
  94.     });
  95.  
  96.     window.addEventListener('scroll', updateButtonVisibility);
  97.     window.addEventListener('resize', updateButtonVisibility);
  98.  
  99.     updateButtonVisibility();
  100. })();