OpenAI Chat Copy Code Button

Add a 'Copy Code' button to the bottom right hand of code blocks on chatgpt.com with animation

< Feedback on OpenAI Chat Copy Code Button

Review: Good - script works

bonelifer
§
Posted: 2023/11/06
Report comment

Liked script, just what I was looking for. Used ChatGPT to make it better blend with the UI. Use it if you like.

// ==UserScript==
// @name         OpenAI Chat Copy Code Button
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Add a 'Copy Code' button with a clipboard icon to the bottom right-hand of code blocks on chat.openai.com
// @author       Your Name
// @match        https://chat.openai.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';

    const copyToClipboard = (text) => {
        navigator.clipboard.writeText(text).then(() => {
            console.log('Copied code to clipboard');
        }, (err) => {
            console.error('Failed to copy code: ', err);
        });
    };

    const addButton = (elem) => {
        const button = document.createElement('button');
        button.style.position = 'absolute';
        button.style.bottom = '8px';
        button.style.right = '8px';
        button.style.fontSize = '14px';
        button.style.padding = '4px 6px'; // Smaller padding
        button.style.backgroundColor = 'rgba(255,255,255,0.2)'; // Light gray background for contrast
        button.style.color = '#fff';
        button.style.borderRadius = '2px'; // Smaller border radius
        button.style.cursor = 'pointer';
        button.style.zIndex = '10';
        button.style.border = '1px solid #333'; // Increase border width
        button.innerHTML = '<span style="margin-right: 3px;">📋</span> Copy Code';

        // Add a hover effect to change the background color
        button.addEventListener('mouseenter', () => {
            button.style.backgroundColor = 'rgba(255,255,255,0.5)'; // Light gray background on hover
        });

        // Reset the background color on mouse leave
        button.addEventListener('mouseleave', () => {
            button.style.backgroundColor = 'rgba(255,255,255,0.2)'; // Reset background color on mouse leave
        });

        button.addEventListener('click', (e) => {
            e.stopPropagation();
            copyToClipboard(elem.querySelector('code').textContent);

            // Add a temporary visual effect when the button is clicked
            button.style.backgroundColor = 'rgba(255,255,255,0.5)';
            setTimeout(() => {
                button.style.backgroundColor = 'rgba(255,255,255,0.2)';
            }, 300);
        });

        elem.style.position = 'relative';
        elem.appendChild(button);
    };

    const observeCodeBlocks = () => {
        const codeBlocks = document.querySelectorAll('pre:not(.copy-code-processed)');
        if (codeBlocks.length) {
            codeBlocks.forEach(block => {
                addButton(block);
                block.classList.add('copy-code-processed');
            });
        }
    };

    const observer = new MutationObserver(observeCodeBlocks);
    observer.observe(document.body, { childList: true, subtree: true });

    observeCodeBlocks();
})();
SpragginsDesigns
§
Posted: 2024/05/23
Edited: 2024/05/23
Report comment

Here is an updated script with the original SVG icon for the copy code button and animation included:

// ==UserScript==
// @name OpenAI Chat Copy Code Button
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Add a 'Copy Code' button to the bottom right hand of code blocks on chatgpt.com with animation
// @author Your Name
// @match https://chatgpt.com/*
// @grant none
// @license MIT
// @downloadURL https://update.greasyfork.org/scripts/463493/OpenAI%20Chat%20Copy%20Code%20Button.user.js
// @updateURL https://update.greasyfork.org/scripts/463493/OpenAI%20Chat%20Copy%20Code%20Button.meta.js
// ==/UserScript==

(function () {
'use strict';

const copyToClipboard = (text, button) => {
navigator.clipboard.writeText(text).then(() => {
console.log('Copied code to clipboard');
button.innerHTML = 'Copied!';
setTimeout(() => {
button.innerHTML = ''; // Clear the text
const svgIcon = getSVGIcon(); // Re-add the SVG icon
button.appendChild(svgIcon);
}, 2000);
}, (err) => {
console.error('Failed to copy code: ', err);
});
};

const getSVGIcon = () => {
const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgIcon.setAttribute('width', '24');
svgIcon.setAttribute('height', '24');
svgIcon.setAttribute('fill', 'none');
svgIcon.setAttribute('viewBox', '0 0 24 24');
svgIcon.classList.add('icon-sm');

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('fill', 'currentColor');
path.setAttribute('fill-rule', 'evenodd');
path.setAttribute('d', 'M7 5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-2v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h2zm2 2h5a3 3 0 0 1 3 3v5h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1zM5 9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1z');
path.setAttribute('clip-rule', 'evenodd');

svgIcon.appendChild(path);
return svgIcon;
};

const addButton = (elem) => {
const button = document.createElement('button');
const svgIcon = getSVGIcon();
button.appendChild(svgIcon);

button.style.position = 'absolute';
button.style.bottom = '8px';
button.style.right = '8px';
button.style.fontSize = '12px';
button.style.padding = '4px 8px';
button.style.border = '1px solid #ccc';
button.style.borderRadius = '3px';
button.style.background = 'rgba(0,0,0,0.1)';
button.style.color = 'white';
button.style.cursor = 'pointer';
button.style.zIndex = '10';
button.style.transition = 'background-color 0.3s ease';

button.addEventListener('click', (e) => {
e.stopPropagation();
copyToClipboard(elem.querySelector('code').textContent, button);
});

button.addEventListener('mouseover', () => {
button.style.backgroundColor = 'rgba(0,0,0,0.2)';
});

button.addEventListener('mouseout', () => {
button.style.backgroundColor = 'rgba(0,0,0,0.1)';
});

elem.style.position = 'relative';
elem.appendChild(button);
};

const observeCodeBlocks = () => {
const codeBlocks = document.querySelectorAll('pre:not(.copy-code-processed)');
if (codeBlocks.length) {
codeBlocks.forEach(block => {
addButton(block);
block.classList.add('copy-code-processed');
});
}
};

const observer = new MutationObserver(observeCodeBlocks);
observer.observe(document.body, { childList: true, subtree: true });

observeCodeBlocks();
})();

YodaBetsAuthor
§
Posted: 2024/05/28
Report comment

Here is an updated script with the original SVG icon for the copy code button and animation included:

// ==UserScript==
// @name OpenAI Chat Copy Code Button
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Add a 'Copy Code' button to the bottom right hand of code blocks on chatgpt.com with animation
// @author Your Name
// @match https://chatgpt.com/*
// @grant none
// @license MIT
// @downloadURL https://update.greasyfork.org/scripts/463493/OpenAI%20Chat%20Copy%20Code%20Button.user.js
// @updateURL https://update.greasyfork.org/scripts/463493/OpenAI%20Chat%20Copy%20Code%20Button.meta.js
// ==/UserScript==

(function () {
'use strict';

const copyToClipboard = (text, button) => {
navigator.clipboard.writeText(text).then(() => {
console.log('Copied code to clipboard');
button.innerHTML = 'Copied!';
setTimeout(() => {
button.innerHTML = ''; // Clear the text
const svgIcon = getSVGIcon(); // Re-add the SVG icon
button.appendChild(svgIcon);
}, 2000);
}, (err) => {
console.error('Failed to copy code: ', err);
});
};

const getSVGIcon = () => {
const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgIcon.setAttribute('width', '24');
svgIcon.setAttribute('height', '24');
svgIcon.setAttribute('fill', 'none');
svgIcon.setAttribute('viewBox', '0 0 24 24');
svgIcon.classList.add('icon-sm');

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('fill', 'currentColor');
path.setAttribute('fill-rule', 'evenodd');
path.setAttribute('d', 'M7 5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-2v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h2zm2 2h5a3 3 0 0 1 3 3v5h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1zM5 9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1z');
path.setAttribute('clip-rule', 'evenodd');

svgIcon.appendChild(path);
return svgIcon;
};

const addButton = (elem) => {
const button = document.createElement('button');
const svgIcon = getSVGIcon();
button.appendChild(svgIcon);

button.style.position = 'absolute';
button.style.bottom = '8px';
button.style.right = '8px';
button.style.fontSize = '12px';
button.style.padding = '4px 8px';
button.style.border = '1px solid #ccc';
button.style.borderRadius = '3px';
button.style.background = 'rgba(0,0,0,0.1)';
button.style.color = 'white';
button.style.cursor = 'pointer';
button.style.zIndex = '10';
button.style.transition = 'background-color 0.3s ease';

button.addEventListener('click', (e) => {
e.stopPropagation();
copyToClipboard(elem.querySelector('code').textContent, button);
});

button.addEventListener('mouseover', () => {
button.style.backgroundColor = 'rgba(0,0,0,0.2)';
});

button.addEventListener('mouseout', () => {
button.style.backgroundColor = 'rgba(0,0,0,0.1)';
});

elem.style.position = 'relative';
elem.appendChild(button);
};

const observeCodeBlocks = () => {
const codeBlocks = document.querySelectorAll('pre:not(.copy-code-processed)');
if (codeBlocks.length) {
codeBlocks.forEach(block => {
addButton(block);
block.classList.add('copy-code-processed');
});
}
};

const observer = new MutationObserver(observeCodeBlocks);
observer.observe(document.body, { childList: true, subtree: true });

observeCodeBlocks();
})();

thanks I updated with this and gave you credit.

Post reply

Sign in to post a reply.