☰

ChatGPT - Copy Button

Adds a copy button that copies all text-based content from the chat.

  1. // ==UserScript==
  2. // @name ChatGPT - Copy Button
  3. // @description Adds a copy button that copies all text-based content from the chat.
  4. // @match https://chat.openai.com/chat
  5. // @require https://code.jquery.com/jquery-3.6.2.min.js
  6. // @version 0.0.1
  7. // @license MIT
  8. // @namespace https://greatest.deepsurf.us/users/994237
  9. // ==/UserScript==
  10.  
  11. // Globals
  12. /* globals jQuery, $, waitForKeyElements */
  13.  
  14. // Add the stylesheet to the page
  15. let materialSymbolsOutlinedCSS = document.createElement('link');
  16. materialSymbolsOutlinedCSS.rel = 'stylesheet';
  17. materialSymbolsOutlinedCSS.href = 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0';
  18. document.head.appendChild(materialSymbolsOutlinedCSS);
  19.  
  20. // Add copy button to top right corner
  21. $('body').prepend('<button type="button" class="copy-button" title="Copy content">' +
  22.     '<span class="material-symbols-outlined">content_copy</span>' +
  23.     '</button>');
  24.  
  25. // Add CSS styling to the button
  26. $('.copy-button').css({
  27.     'background-color': '#2f9c2f',
  28.     'border-radius': '20%',
  29.     'color': 'white',
  30.     'padding': '4px',
  31.     'position': 'absolute',
  32.     'margin-right': '10px',
  33.     'margin-top': '10px',
  34.     'right': '0',
  35.     'top': '0',
  36.     'cursor': 'pointer',
  37.     'display': 'block',
  38.     'pointer-events': 'all',
  39.     'z-index': '10000',
  40. });
  41. $('.copy-button > span').css({
  42.     'vertical-align': 'top',
  43. });
  44.  
  45. // Add event handler to the button
  46. $('.copy-button').on('click', function () {
  47.     // Get all the divs with class 'text-base' that are several children down inside divs with class 'w-full'
  48.     let text = $('div.w-full').find('div.text-base').map(function(index,element) {
  49.         // Get the text of each div, stripping out html tags, removing buttons all together
  50.         let prompt = 'You: ';
  51.         (index % 2 == 0) ? prompt : prompt = 'ChatGPT: '
  52.  
  53.         let innerText = $(element).html();
  54.         return prompt + innerText
  55.             .replace(/<button[^>]*>.*?<\/button>/g, '')
  56.             .replace("<pre>", "\n```\n")
  57.             .replace("</pre>", "\n```\n")
  58.             .replace(/<[^>]*>/g, '');
  59.     }).get();
  60.  
  61.     // Copy the text to clipboard
  62.     navigator.clipboard.writeText(text.join('\n\n'));
  63.  
  64.     // Show the 'copied' message
  65.     $('.copy-button').html('<span class="material-symbols-outlined">done</span>');
  66.     setTimeout(function() {
  67.         $('.copy-button').html('<span class="material-symbols-outlined">content_copy</span>');
  68.     }, 1000);
  69. });