☰

ChatGPT - Copy Button

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

// ==UserScript==
// @name ChatGPT - Copy Button
// @description Adds a copy button that copies all text-based content from the chat.
// @match https://chat.openai.com/chat
// @require https://code.jquery.com/jquery-3.6.2.min.js
// @version 0.0.1
// @license MIT
// @namespace https://greasyfork.org/users/994237
// ==/UserScript==

// Globals
/* globals jQuery, $, waitForKeyElements */

// Add the stylesheet to the page
let materialSymbolsOutlinedCSS = document.createElement('link');
materialSymbolsOutlinedCSS.rel = 'stylesheet';
materialSymbolsOutlinedCSS.href = 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0';
document.head.appendChild(materialSymbolsOutlinedCSS);

// Add copy button to top right corner
$('body').prepend('<button type="button" class="copy-button" title="Copy content">' +
    '<span class="material-symbols-outlined">content_copy</span>' +
    '</button>');

// Add CSS styling to the button
$('.copy-button').css({
    'background-color': '#2f9c2f',
    'border-radius': '20%',
    'color': 'white',
    'padding': '4px',
    'position': 'absolute',
    'margin-right': '10px',
    'margin-top': '10px',
    'right': '0',
    'top': '0',
    'cursor': 'pointer',
    'display': 'block',
    'pointer-events': 'all',
    'z-index': '10000',
});
$('.copy-button > span').css({
    'vertical-align': 'top',
});

// Add event handler to the button
$('.copy-button').on('click', function () {
    // Get all the divs with class 'text-base' that are several children down inside divs with class 'w-full'
    let text = $('div.w-full').find('div.text-base').map(function(index,element) {
        // Get the text of each div, stripping out html tags, removing buttons all together
        let prompt = 'You: ';
        (index % 2 == 0) ? prompt : prompt = 'ChatGPT: '

        let innerText = $(element).html();
        return prompt + innerText
            .replace(/<button[^>]*>.*?<\/button>/g, '')
            .replace("<pre>", "\n```\n")
            .replace("</pre>", "\n```\n")
            .replace(/<[^>]*>/g, '');
    }).get();

    // Copy the text to clipboard
    navigator.clipboard.writeText(text.join('\n\n'));

    // Show the 'copied' message
    $('.copy-button').html('<span class="material-symbols-outlined">done</span>');
    setTimeout(function() {
        $('.copy-button').html('<span class="material-symbols-outlined">content_copy</span>');
    }, 1000);
});