ChatGPT 代码导出按钮

为 ChatGPT 响应中的代码块添加导出按钮，提示用户根据代码块的类名检测到的编程语言将代码保存为文件。
Wrap lines
// ==UserScript==
// @name              ChatGPT Code Export Button
// @name:en           ChatGPT Code Export Button
// @name:zh-CN        ChatGPT 代码导出按钮
// @name:es           Botón de Exportación de Código de ChatGPT
// @name:hi           चैटजीपीटी कोड निर्यात बटन
// @name:fr           Bouton d'Exportation de Code ChatGPT
// @name:ar           زر تصدير الكود في ChatGPT
// @name:bn           চ্যাটজিপিটি কোড রপ্তানি বাটন
// @name:ru           Кнопка экспорта кода ChatGPT
// @name:pt           Botão de Exportação de Código do ChatGPT
// @name:ur           چیٹ جی پی ٹی کوڈ برآمد بٹن
// @namespace         http://tampermonkey.net/
// @version           2024/10/05
// @license           MIT
// @description       Adds Export button to code blocks in ChatGPT responses, prompts user to save code as file with predefined filename based on coding language detected from the code block's class name.
// @description:en    Adds Export button to code blocks in ChatGPT responses, prompts user to save code as file with predefined filename based on coding language detected from the code block's class name.
// @description:zh-CN 为 ChatGPT 响应中的代码块添加导出按钮，提示用户根据代码块的类名检测到的编程语言将代码保存为文件。
// @description:es    Agrega un botón de exportación a los bloques de código en las respuestas de ChatGPT, solicitando al usuario que guarde el código como archivo con un nombre predefinido según el lenguaje de programación detectado del nombre de la clase del bloque de código.
// @description:hi    चैटजीपीटी प्रतिक्रियाओं में कोड ब्लॉक्स में निर्यात बटन जोड़ता है, उपयोगकर्ता को कोड को फ़ाइल के रूप में सहेजने के लिए प्रीडिफ़ाइन्ड फ़ाइलनाम पर प्रोम्प्ट करता है जोड़ता है। कोड ब्लॉक के क्लास नाम से डिटेक्ट किया गया।
// @description:fr    Ajoute un bouton d'exportation aux blocs de code dans les réponses de ChatGPT, invite l'utilisateur à enregistrer le code sous forme de fichier avec un nom prédéfini basé sur le langage de programmation détecté à partir du nom de classe du bloc de code.
// @description:ar    يضيف زر التصدير إلى كتل الكود في ردود ChatGPT ، ويطلب من المستخدم حفظ الكود كملف باسم محدد مسبقًا بناءً على لغة البرمجة المكتشفة من اسم الفئة لكتلة الكود.
// @description:bn    ChatGPT রেসপন্সে কোড ব্লকের জন্য রপ্তানি বাটন যোগ করে, ব্যবহারকারীকে কোডটি ক্লাস নাম থেকে ডিটেক্ট করে পূর্বনির্ধারিত ফাইলনেমের মধ্যে সংরক্ষণ করতে বলে।
// @description:ru    Добавляет кнопку экспорта в блоки кода в ответах ChatGPT, предлагает пользователю сохранить код в файл с предопределенным именем на основе обнаруженного языка программирования из имени класса блока кода.
// @description:pt    Adiciona um botão de exportação aos blocos de código nas respostas do ChatGPT, solicitando ao usuário que salve o código como arquivo com um nome predefinido com base na linguagem de programação detectada a partir do nome da classe do bloco de código.
// @description:ur    چیٹ جی پی ٹی ردعملات میں کوڈ بلاکس میں برآمد بٹن شامل کرتا ہے، صارف کو کوڈ کو فائل کے طور پر محفوظ کرنے کے لیے پہلے سے تعین شدہ فائل نام پر پرومپٹ کرتا ہے جو کوڈ بلاک کے کلاس کے نام سے دریافت کیا گیا ہے
// @author       Muffin & Arcadie
// @match        https://chatgpt.com/*
// @grant        none
// ==/UserScript==
 
(function() {
    'use strict';
 
    // Function to add "Export" button to existing code headers
    function addExportButtonToHeaders() {
        const codeHeaders = document.querySelectorAll('.flex.items-center.text-token-text-secondary.bg-token-main-surface-secondary.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md.h-9');
 
        codeHeaders.forEach(header => {
            // Check if "Export" button is already added
            if (header.querySelector('.export-button')) {
                return; // Skip if already added
            }
 
            const textNode = Array.from(header.childNodes).find(node => node.nodeType === Node.TEXT_NODE);
            const language = textNode ? textNode.textContent.trim() : '';
 
            // Create the "Export" button
            const exportButton = document.createElement('button');
            exportButton.classList.add('export-button', 'flex', 'items-center', 'gap-1', 'text-xs', 'p-1', 'rounded');
            exportButton.setAttribute('title', 'Export Code');
 
            // Create the SVG icon
            const exportIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            exportIcon.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
            exportIcon.setAttribute('viewBox', '0 0 1000 1000'); // Adjust viewBox as needed
            exportIcon.classList.add('h-4', 'w-4');
 
            // Adding <defs> and <style> block
            const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
            const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
            style.textContent = `.cls-1`;
            defs.appendChild(style);
            exportIcon.appendChild(defs);
 
            // Adding your actual SVG paths
            const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            path1.setAttribute('d', 'm423.2,668.89l9.44-5.45c-7.66-2.87-15.26-5.91-22.81-9.15,4.38,5.04,8.84,9.89,13.37,14.61Z');
            path1.setAttribute('class', 'cls-1');
            exportIcon.appendChild(path1);
 
            const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            path2.setAttribute('d', 'm233.24,672.15c-1.31-.31-2.62-.6-3.92-.95-37.87-10.15-70.17-34.9-89.82-68.84-17.33-29.94-23.57-65.02-17.64-99.1,1.17.7,3.2,1.95,4.67,2.79l57.28,33.08c-4.17-20.96-6.91-42.43-8.22-64.38l-23.3-13.46c-33.92-19.64-58.66-51.93-68.81-89.79-10.15-37.86-4.87-78.19,14.68-112.16,17.25-29.98,44.5-52.93,76.98-64.85,0,1.35-.08,3.75-.08,5.41v181.53c-.03,4.53,1.15,8.99,3.42,12.92,2.27,3.93,5.54,7.18,9.48,9.42l1.47.85c7.69-10.62,18.1-19.33,30.52-24.99,2.2-1,4.44-1.88,6.71-2.67v-177.06c.02-28.1,8.04-55.61,23.12-79.32,15.09-23.71,36.61-42.62,62.06-54.54,25.45-11.92,53.76-16.34,81.63-12.75,27.87,3.59,54.14,15.05,75.73,33.03-1.2.65-3.28,1.8-4.67,2.64l-157.13,90.76c-3.94,2.24-7.22,5.49-9.49,9.42-2.27,3.92-3.45,8.39-3.42,12.92l-.09,183.24c3.17,2.08,6.2,4.38,9.07,6.94,6.16,5.49,12.16,10.9,18.02,16.19l.14.12c2.98,2.69,5.92,5.34,8.83,7.96v-70.78l85.44-49.35,85.44,49.32v98.67l-76.55,44.18c12.49,7.4,25.07,14.01,37.79,19.84l38.73-22.36v37.58c11.85,3.9,23.84,7.18,35.99,9.84v-166.9l66.42,38.35c.35.17.65.43.87.75.23.32.37.69.42,1.07v38.04c3.9-2.91,8.08-5.5,12.55-7.65,10.38-4.99,21.96-7.63,33.49-7.63,1.88,0,3.75.08,5.61.22v-21.06c.04-4.53-1.13-8.98-3.38-12.91s-5.51-7.18-9.44-9.44l-191.84-110.77,66.42-38.34c.33-.22.7-.35,1.09-.38.39-.04.78.03,1.15.18l158.86,91.71c24.34,14.06,44.17,34.76,57.17,59.68,13,24.92,18.63,53.02,16.23,81.03-.51,5.98-1.41,11.91-2.63,17.74l43.84,35.07c9.59-27.52,13.09-56.95,10-86.23-4.4-41.89-22-81.29-50.24-112.54,8.85-26.57,11.92-54.72,9-82.56-2.92-27.85-11.74-54.75-25.9-78.91-20.98-36.54-53.03-65.47-91.52-82.62-38.49-17.15-81.43-21.62-122.63-12.78-18.58-20.94-41.42-37.67-66.99-49.08C430.26,6.13,402.55.33,374.55.5c-42.12-.1-83.19,13.18-117.28,37.92-34.09,24.74-59.44,59.67-72.4,99.75-27.44,5.62-53.36,17.03-76.04,33.48-22.67,16.45-41.57,37.55-55.43,61.89-21.15,36.44-30.17,78.66-25.78,120.56,4.4,41.9,21.99,81.33,50.24,112.59-8.85,26.57-11.92,54.71-9,82.56,2.92,27.85,11.74,54.75,25.9,78.91,20.98,36.54,53.03,65.47,91.52,82.62,26.61,11.86,55.35,17.64,84.16,17.17-2.63-3.43-5.24-6.9-7.82-10.42-10.78-14.71-20.58-29.85-29.39-45.38ZM570.51,114.04c28.07,1.21,55.21,10.38,78.25,26.44,23.04,16.07,41.03,38.36,51.87,64.28,10.83,25.92,14.07,54.38,9.31,82.07-1.16-.72-3.2-1.94-4.67-2.78l-157.14-90.76c-3.92-2.29-8.37-3.49-12.9-3.49s-8.99,1.21-12.91,3.49l-191.84,110.77v-76.7c-.02-.39.05-.78.22-1.14.17-.35.42-.66.73-.9l158.85-91.64c24.33-14.03,52.16-20.84,80.23-19.64Z');
            path2.setAttribute('class', 'cls-1');
            exportIcon.appendChild(path2);
 
            const path3 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            path3.setAttribute('d', 'm502.87,730.73c19.95,11.06,41.04,19.95,63.33,26.7,2.81-1.83,5.6-3.71,8.33-5.69,20.27-14.71,37.41-33.04,50.73-53.9-21.31-.2-42.35-1.47-62.99-3.79-.2.2-.38.41-.58.61-16.64,16.65-36.85,28.9-58.81,36.07Z');
            path3.setAttribute('class', 'cls-1');
            exportIcon.appendChild(path3);
 
            const path4 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            path4.setAttribute('d', 'm959.11,704.34l-284.19-227.36c-6.75-5.4-15.23-8.38-23.88-8.38-5.7,0-11.42,1.3-16.55,3.77-13.16,6.32-21.66,19.85-21.66,34.45v75.19c-28.92-1.03-57.02-4.48-83.72-10.3-69.87-15.24-134.55-48.71-197.73-102.3-11.95-10.13-23.61-20.66-35.95-31.8l-.14-.12c-5.77-5.21-11.75-10.6-17.83-16.02-7.01-6.24-16.04-9.68-25.43-9.68-5.5,0-10.84,1.16-15.85,3.45-13.77,6.28-22.55,20.12-22.36,35.26,1.14,90.66,28.18,172.74,80.36,243.95,80.72,110.16,188,174.2,319.04,190.48v76.37c0,14.6,8.5,28.12,21.66,34.45,5.14,2.47,10.86,3.77,16.55,3.77,8.65,0,17.13-2.98,23.88-8.38l283.8-227.1c9.11-7.29,14.34-18.17,14.34-29.84s-5.23-22.55-14.34-29.84Zm-269.46,177.41v-31.76c0-20.26-15.84-37.02-36.06-38.16-125.38-7.08-222.78-60.26-297.76-162.59-23.24-31.72-40.44-66.31-51.37-103.25,65.99,51.32,134.41,84.25,208.36,100.38,37.68,8.22,77.51,12.39,118.38,12.39,5.52,0,11.13-.08,16.69-.23,3.4-.09,6.1-.54,7.72-.81l.23-.04c.19-.03.39-.07.62-.1,18.7-2.68,32.8-18.94,32.8-37.83v-33.42l184.8,147.85-184.41,147.57Z');
            path4.setAttribute('class', 'cls-1');
            exportIcon.appendChild(path4);
 
            // Append the SVG icon to the button
            exportButton.appendChild(exportIcon);
 
            // Add the button text
            const buttonText = document.createElement('span');
            buttonText.textContent = 'Export';
            exportButton.appendChild(buttonText);
 
            // Create the tooltip
            const tooltip = document.createElement('div');
            tooltip.classList.add('tooltip', 'flex', 'items-center', 'gap-1', 'text-xs', 'p-1', 'rounded', 'absolute', 'bg-black', 'text-white', 'hidden');
            tooltip.style.top = '110%';
            tooltip.style.left = '50%';
            tooltip.style.transform = 'translateX(-50%)';
            tooltip.style.whiteSpace = 'nowrap';
 
            // Create the tooltip text
            const tooltipText = document.createElement('span');
            tooltipText.textContent = 'Export Code';
            tooltip.appendChild(tooltipText);
 
            // Append the tooltip to the button
            exportButton.appendChild(tooltip);
 
            // Find the element containing "Copy code"
            let copyCodeDiv = null;
            const elements = header.querySelectorAll('.flex.items-center.relative.text-token-text-secondary.bg-token-main-surface-secondary.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md div');
            elements.forEach(element => {
                if (element.innerHTML.includes('Copy code')) {
                    copyCodeDiv = element;
                }
            });
 
            // Insert "Export" button before the found element or append to header if not found
            if (copyCodeDiv) {
                copyCodeDiv.parentNode.insertBefore(exportButton, copyCodeDiv);
            } else {
                header.appendChild(exportButton);
            }
 
            // Add hover event listener for the "Export" button to show tooltip
            exportButton.addEventListener('mouseenter', () => {
                tooltip.classList.remove('hidden');
            });
 
            // Add hover event listener for the "Export" button to hide tooltip
            exportButton.addEventListener('mouseleave', () => {
                tooltip.classList.add('hidden');
            });
 
            // Add click event listener for the "Export" button
            exportButton.addEventListener('click', () => {
            // Get the grandparent element (pre > div > header)
            const preElement = header.parentElement.parentElement; // This navigates to the 'pre' element
            // Now find the <code> block inside the <pre> tag
            const codeBlock = preElement.querySelector('code');
            // Now you have the code content inside the 'codeBlock' element as text
            console.log(codeBlock.textContent); // This will log the code content to the console
            // Call export function with the updated code block and language
            exportCode(codeBlock, language);
            });
        });
    }
 
    // Function to open File Explorer for saving the code as file
    async function exportCode(codeBlock, language) {
        let fileName;
        let fileExtension;
        let mimeType;
 
        // Determine filename, extension, and MIME type based on language
        switch (language) {
            case 'javascript':
            case 'js':
                fileName = 'script';
                fileExtension = '.js';
                mimeType = 'application/javascript';
                break;
            case 'html':
                fileName = 'index';
                fileExtension = '.html';
                mimeType = 'text/html';
                break;
            case 'css':
                fileName = 'styles';
                fileExtension = '.css';
                mimeType = 'text/css';
                break;
            case 'python':
            case 'py':
                fileName = 'main';
                fileExtension = '.py';
                mimeType = 'text/x-python';
                break;
            case 'json':
                fileName = 'manifest';
                fileExtension = '.json';
                mimeType = 'application/json';
                break;
            case 'java':
                fileName = 'Main'; // Entry point for Java programs
                fileExtension = '.java';
                mimeType = 'text/x-java-source';
                break;
            case 'c':
                fileName = 'program';
                fileExtension = '.c';
                mimeType = 'text/x-c';
                break;
            case 'cpp':
            case 'c++':
                fileName = 'program';
                fileExtension = '.cpp';
                mimeType = 'text/x-c++';
                break;
            case 'csharp':
            case 'cs':
                fileName = 'Program';
                fileExtension = '.cs';
                mimeType = 'text/x-csharp';
                break;
            case 'ruby':
                fileName = 'script';
                fileExtension = '.rb';
                mimeType = 'text/x-ruby';
                break;
            case 'php':
                fileName = 'script';
                fileExtension = '.php';
                mimeType = 'application/php';
                break;
            case 'swift':
                fileName = 'main';
                fileExtension = '.swift';
                mimeType = 'text/x-swift';
                break;
            case 'go':
                fileName = 'main';
                fileExtension = '.go';
                mimeType = 'text/x-go';
                break;
            default:
                fileName = 'code';
                fileExtension = '.txt';
                mimeType = 'text/plain';
                break;
        }
 
        // Create a Blob object with the code content
        const blob = new Blob([codeBlock.innerText], { type: mimeType });
 
        try {
            if (window.showSaveFilePicker) {
                // Use File System Access API if available
                const fileHandle = await window.showSaveFilePicker({
                    suggestedName: fileName + fileExtension,
                    types: [
                        {
                            description: language,
                            accept: {
                                [mimeType]: [fileExtension],
                            },
                        },
                    ],
                });
 
                const writable = await fileHandle.createWritable();
                await writable.write(blob);
                await writable.close();
            } else {
                // Fallback for browsers that do not support showSaveFilePicker
                const downloadLink = document.createElement('a');
                downloadLink.href = URL.createObjectURL(blob);
                downloadLink.download = fileName + fileExtension;
                downloadLink.style.display = 'none';
                document.body.appendChild(downloadLink);
                downloadLink.click();
                URL.revokeObjectURL(downloadLink.href);
                document.body.removeChild(downloadLink);
            }
        } catch (error) {
            console.error('Save file dialog was canceled or failed', error);
        }
    }
 
    // Observe the document for changes and add "Export" button to new code headers
    const observer = new MutationObserver(addExportButtonToHeaders);
    observer.observe(document.body, { childList: true, subtree: true });
 
    // Initial processing of existing code headers
    addExportButtonToHeaders();
 
    // Add custom CSS styles if needed
    const style = document.createElement('style');
    style.textContent = `
        .export-button:hover .tooltip {
  display: block;
  opacity: 1;
}
.export-button:hover svg {
  fill: #333;
}
.export-button:hover {
  background-color: #c7c7c7;
  color: #333;
}
.export-button {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 4px;
    color: rgb(180, 180, 180);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.export-button svg {
    width: 16px;
    height: 16px;
    fill: rgb(180, 180, 180);
    transition: fill 0.3s ease;
}
.export-button span {
    margin-left: 0px;
    font-size: 12px;
    font-weight: 420;
    color: inherit;
}
.export-button .tooltip {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}
/* Style for the container with specific padding and spacing */
.flex.items-center.text-token-text-secondary.bg-token-main-surface-secondary.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md.h-9 {
    padding-right: 7rem; /* Adjusted padding */
}
    `;
    document.head.appendChild(style);
})();
欢迎访问Greasy Fork镜像
