ChatGPT 代码导出按钮

为 ChatGPT 响应中的代码块添加导出按钮,提示用户根据代码块的类名检测到的编程语言将代码保存为文件。

当前为 2024-07-04 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name ChatGPT Code Export Button
  3. // @name:en ChatGPT Code Export Button
  4. // @name:zh-CN ChatGPT 代码导出按钮
  5. // @name:es Botón de Exportación de Código de ChatGPT
  6. // @name:hi चैटजीपीटी कोड निर्यात बटन
  7. // @name:fr Bouton d'Exportation de Code ChatGPT
  8. // @name:ar زر تصدير الكود في ChatGPT
  9. // @name:bn চ্যাটজিপিটি কোড রপ্তানি বাটন
  10. // @name:ru Кнопка экспорта кода ChatGPT
  11. // @name:pt Botão de Exportação de Código do ChatGPT
  12. // @name:ur چیٹ جی پی ٹی کوڈ برآمد بٹن
  13. // @namespace http://tampermonkey.net/
  14. // @version 2024/07/04
  15. // @license MIT
  16. // @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.
  17. // @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.
  18. // @description:zh-CN 为 ChatGPT 响应中的代码块添加导出按钮,提示用户根据代码块的类名检测到的编程语言将代码保存为文件。
  19. // @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.
  20. // @description:hi चैटजीपीटी प्रतिक्रियाओं में कोड ब्लॉक्स में निर्यात बटन जोड़ता है, उपयोगकर्ता को कोड को फ़ाइल के रूप में सहेजने के लिए प्रीडिफ़ाइन्ड फ़ाइलनाम पर प्रोम्प्ट करता है जोड़ता है। कोड ब्लॉक के क्लास नाम से डिटेक्ट किया गया।
  21. // @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.
  22. // @description:ar يضيف زر التصدير إلى كتل الكود في ردود ChatGPT ، ويطلب من المستخدم حفظ الكود كملف باسم محدد مسبقًا بناءً على لغة البرمجة المكتشفة من اسم الفئة لكتلة الكود.
  23. // @description:bn ChatGPT রেসপন্সে কোড ব্লকের জন্য রপ্তানি বাটন যোগ করে, ব্যবহারকারীকে কোডটি ক্লাস নাম থেকে ডিটেক্ট করে পূর্বনির্ধারিত ফাইলনেমের মধ্যে সংরক্ষণ করতে বলে।
  24. // @description:ru Добавляет кнопку экспорта в блоки кода в ответах ChatGPT, предлагает пользователю сохранить код в файл с предопределенным именем на основе обнаруженного языка программирования из имени класса блока кода.
  25. // @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.
  26. // @description:ur چیٹ جی پی ٹی ردعملات میں کوڈ بلاکس میں برآمد بٹن شامل کرتا ہے، صارف کو کوڈ کو فائل کے طور پر محفوظ کرنے کے لیے پہلے سے تعین شدہ فائل نام پر پرومپٹ کرتا ہے جو کوڈ بلاک کے کلاس کے نام سے دریافت کیا گیا ہے
  27. // @author Muffin & Arcadie
  28. // @match https://chatgpt.com/*
  29. // @grant none
  30. // ==/UserScript==
  31.  
  32. (function() {
  33. 'use strict';
  34.  
  35. // Function to add "Export" button to existing code headers
  36. function addExportButtonToHeaders() {
  37. const codeHeaders = document.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');
  38.  
  39. codeHeaders.forEach(header => {
  40. // Check if "Export" button is already added
  41. if (header.querySelector('.export-button')) {
  42. return; // Skip if already added
  43. }
  44.  
  45. // Find the language label
  46. const languageLabel = header.querySelector('span');
  47.  
  48. // Create the "Export" button
  49. const exportButton = document.createElement('button');
  50. exportButton.classList.add('export-button', 'flex', 'items-center', 'gap-1', 'text-xs', 'p-1', 'rounded');
  51. exportButton.setAttribute('title', 'Export Code');
  52.  
  53. // Create the SVG icon
  54. const exportIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  55. exportIcon.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  56. exportIcon.setAttribute('viewBox', '0 0 24 24');
  57. exportIcon.setAttribute('fill', 'none');
  58. exportIcon.setAttribute('stroke', 'currentColor');
  59. exportIcon.setAttribute('stroke-width', '2');
  60. exportIcon.setAttribute('stroke-linecap', 'round');
  61. exportIcon.setAttribute('stroke-linejoin', 'round');
  62. exportIcon.classList.add('h-4', 'w-4');
  63.  
  64. const polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
  65. polyline.setAttribute('points', '4 17 10 11 4 5');
  66. exportIcon.appendChild(polyline);
  67.  
  68. const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
  69. line.setAttribute('x1', '12');
  70. line.setAttribute('y1', '19');
  71. line.setAttribute('x2', '19');
  72. line.setAttribute('y2', '12');
  73. exportIcon.appendChild(line);
  74.  
  75. const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  76. path.setAttribute('d', 'M4 17h4v4H4z');
  77. exportIcon.appendChild(path);
  78.  
  79. // Append the SVG icon to the button
  80. exportButton.appendChild(exportIcon);
  81.  
  82. // Add the button text
  83. const buttonText = document.createElement('span');
  84. buttonText.textContent = 'Export';
  85. exportButton.appendChild(buttonText);
  86.  
  87. // Create the tooltip
  88. const tooltip = document.createElement('div');
  89. tooltip.classList.add('tooltip', 'flex', 'items-center', 'gap-1', 'text-xs', 'p-1', 'rounded', 'absolute', 'bg-black', 'text-white', 'hidden');
  90. tooltip.style.top = '110%';
  91. tooltip.style.left = '50%';
  92. tooltip.style.transform = 'translateX(-50%)';
  93. tooltip.style.whiteSpace = 'nowrap';
  94.  
  95. // Create the tooltip text
  96. const tooltipText = document.createElement('span');
  97. tooltipText.textContent = 'Export Code';
  98. tooltip.appendChild(tooltipText);
  99.  
  100. // Append the tooltip to the button
  101. exportButton.appendChild(tooltip);
  102.  
  103. // Insert "Export" button after the language label
  104. languageLabel.parentNode.insertBefore(exportButton, languageLabel.nextSibling);
  105.  
  106. // Add hover event listener for the "Export" button to show tooltip
  107. exportButton.addEventListener('mouseenter', () => {
  108. tooltip.classList.remove('hidden');
  109. });
  110.  
  111. // Add hover event listener for the "Export" button to hide tooltip
  112. exportButton.addEventListener('mouseleave', () => {
  113. tooltip.classList.add('hidden');
  114. });
  115.  
  116. // Add click event listener for the "Export" button
  117. exportButton.addEventListener('click', () => {
  118. const codeBlock = header.parentElement.querySelector('pre code'); // Assuming structure, adjust as needed
  119. const language = languageLabel.textContent.trim().toLowerCase(); // Extract language
  120. exportCode(codeBlock, language); // Call export function
  121. });
  122. });
  123. }
  124.  
  125. // Function to open File Explorer for saving the code as file
  126. async function exportCode(codeBlock, language) {
  127. let fileName;
  128. let fileExtension;
  129. let mimeType;
  130.  
  131. // Determine filename, extension, and MIME type based on language
  132. switch (language) {
  133. case 'javascript':
  134. case 'js':
  135. fileName = 'script';
  136. fileExtension = '.js';
  137. mimeType = 'application/javascript';
  138. break;
  139. case 'html':
  140. fileName = 'index';
  141. fileExtension = '.html';
  142. mimeType = 'text/html';
  143. break;
  144. case 'css':
  145. fileName = 'styles';
  146. fileExtension = '.css';
  147. mimeType = 'text/css';
  148. break;
  149. case 'python':
  150. case 'py':
  151. fileName = 'main';
  152. fileExtension = '.py';
  153. mimeType = 'text/x-python';
  154. break;
  155. default:
  156. fileName = 'code';
  157. fileExtension = '.txt';
  158. mimeType = 'text/plain';
  159. break;
  160. }
  161.  
  162. // Create a Blob object with the code content
  163. const blob = new Blob([codeBlock.innerText], { type: mimeType });
  164.  
  165. try {
  166. if (window.showSaveFilePicker) {
  167. // Use File System Access API if available
  168. const fileHandle = await window.showSaveFilePicker({
  169. suggestedName: fileName + fileExtension,
  170. types: [
  171. {
  172. description: language,
  173. accept: {
  174. [mimeType]: [fileExtension],
  175. },
  176. },
  177. ],
  178. });
  179.  
  180. const writable = await fileHandle.createWritable();
  181. await writable.write(blob);
  182. await writable.close();
  183. } else {
  184. // Fallback for browsers that do not support showSaveFilePicker
  185. const downloadLink = document.createElement('a');
  186. downloadLink.href = URL.createObjectURL(blob);
  187. downloadLink.download = fileName + fileExtension;
  188. downloadLink.style.display = 'none';
  189. document.body.appendChild(downloadLink);
  190. downloadLink.click();
  191. URL.revokeObjectURL(downloadLink.href);
  192. document.body.removeChild(downloadLink);
  193. }
  194. } catch (error) {
  195. console.error('Save file dialog was canceled or failed', error);
  196. }
  197. }
  198.  
  199. // Observe the document for changes and add "Export" button to new code headers
  200. const observer = new MutationObserver(addExportButtonToHeaders);
  201. observer.observe(document.body, { childList: true, subtree: true });
  202.  
  203. // Initial processing of existing code headers
  204. addExportButtonToHeaders();
  205.  
  206. // Add custom CSS styles if needed
  207. const style = document.createElement('style');
  208. style.textContent = `
  209. .export-button {
  210. position: relative;
  211. background: none;
  212. border: none;
  213. cursor: pointer;
  214. }
  215.  
  216. .export-button .tooltip {
  217. z-index: 10;
  218. }
  219.  
  220. .export-button:hover .tooltip {
  221. display: flex;
  222. }
  223. `;
  224. document.head.appendChild(style);
  225. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址