☰

DeepSeek Screenshoter

将DeepSeek回答内容转为图片并复制到剪贴板

  1. // ==UserScript==
  2. // @name         DeepSeek Screenshoter
  3. // @namespace    https://gf.qytechs.cn/users/1312316
  4. // @version      1.4.1
  5. // @description  将DeepSeek回答内容转为图片并复制到剪贴板
  6. // @author       星小韵
  7. // @iconURL      https://www.google.com/s2/favicons?sz=64&domain=chat.deepseek.com
  8. // @icon64URL    https://www.google.com/s2/favicons?sz=64&domain=chat.deepseek.com
  9. // @match        https://chat.deepseek.com/*
  10. // @connect      deepseek.com
  11. // @require      https://fastly.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js
  12. // @grant        GM_addStyle
  13. // @grant        GM_setClipboard
  14. // @license      MIT License
  15. // @namespace    http://tampermonkey.net/
  16. // ==/UserScript==
  17.  
  18. (function () {
  19.   "use strict";
  20.  
  21.   // 顶部气泡提示系统
  22.   function showToast(message, type = "info", duration = 3000) {
  23.     const toast = document.createElement("div");
  24.     toast.className = `ds-toast ds-toast-${type}`;
  25.     toast.innerHTML = `
  26.           ${type === "loading" ? `<div class="ds-spinner"></div>` : ""}
  27.           <span>${message}</span>
  28.         `;
  29.  
  30.     document.body.appendChild(toast);
  31.  
  32.     setTimeout(() => toast.classList.add("show"), 10);
  33.     if (duration > 0) {
  34.       setTimeout(() => {
  35.         toast.classList.remove("show");
  36.         setTimeout(() => toast.remove(), 300);
  37.       }, duration);
  38.     }
  39.     return toast;
  40.   }
  41.  
  42.   // 全局样式
  43.   GM_addStyle(`
  44.       /* 统一按钮样式 */
  45.       .ds-icon-button:hover {
  46.         background-color: var(--ds-icon-button-hover-color, #44444D) !important;
  47.       }
  48.   
  49.       /* 提示气泡 */
  50.       [data-tooltip]::before, [data-tooltip]::after {
  51.         transition: opacity 0.2s ease;
  52.         opacity: 0;
  53.         pointer-events: none;
  54.       }
  55.       [data-tooltip]::before {
  56.         content: attr(data-tooltip);
  57.         position: absolute;
  58.         bottom: 100%;
  59.         left: 50%;
  60.         transform: translateX(-50%);
  61.         background: rgb(0, 0, 0);
  62.         color: white;
  63.         padding: 4px 8px;
  64.         border-radius: 4px;
  65.         font-size: 12px;
  66.         white-space: nowrap;
  67.         margin-bottom: 6px;
  68.       }
  69.       [data-tooltip]::after {
  70.         content: '';
  71.         position: absolute;
  72.         bottom: calc(100% - 4px);
  73.         left: 50%;
  74.         transform: translateX(-50%);
  75.         border: 4px solid transparent;
  76.         border-top-color: rgba(0, 0, 0, 0.8);
  77.       }
  78.       [data-tooltip]:hover::before,
  79.       [data-tooltip]:hover::after {
  80.         opacity: 1;
  81.       }
  82.   
  83.       /* 消息气泡样式 */
  84.       .ds-bubble {
  85.         background: rgba(255,255,255,0.05);
  86.         border-radius: 12px;
  87.         padding: 16px;
  88.         position: relative;
  89.         color: #CDD4DF;
  90.         line-height: 1.6;
  91.         box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  92.         word-break: break-word;
  93.         overflow-wrap: anywhere;
  94.       }
  95.       .ds-bubble::before {
  96.         content: '';
  97.         position: absolute;
  98.         left: -16px;
  99.         top: 12px;
  100.         border: 8px solid transparent;
  101.         border-right-color: rgba(255,255,255,0.05);
  102.       }
  103.   
  104.       /* 顶部提示 */
  105.       .ds-toast {
  106.         position: fixed;
  107.         top: 20px;
  108.         left: 50%;
  109.         transform: translateX(-50%);
  110.         background: rgba(40, 42, 54, 0.95);
  111.         color: #FFFFFF;
  112.         padding: 12px 24px;
  113.         border-radius: 8px;
  114.         font-size: 14px;
  115.         font-family: -apple-system, system-ui;
  116.         display: inline-flex;
  117.         align-items: center;
  118.         gap: 12px;
  119.         opacity: 0;
  120.         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  121.         z-index: 99999;
  122.         box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  123.         backdrop-filter: blur(4px);
  124.       }
  125.       .ds-toast.show { opacity: 1; transform: translateX(-50%) translateY(10px); }
  126.       .ds-spinner {
  127.         width: 18px;
  128.         height: 18px;
  129.         border: 2px solid rgba(255,255,255,0.3);
  130.         border-top-color: #00E599;
  131.         border-radius: 50%;
  132.         animation: ds-spin 0.8s linear infinite;
  133.       }
  134.           .ds-toast-success {
  135.             background: rgba(0, 184, 120, 0.95);
  136.           .ds-toast-error {
  137.             background: rgba(255, 85, 85, 0.95);
  138.           }
  139.       @keyframes ds-spin { to { transform: rotate(360deg); } }
  140.   
  141.       /* 覆盖markdown样式 */
  142.       .ds-capture-markdown * {
  143.         color: #CDD4DF !important;
  144.         font-family: system-ui !important;
  145.         max-width: 100% !important;
  146.       }
  147.       .ds-capture-markdown pre {
  148.         background: rgba(0,0,0,0.3) !important;
  149.         padding: 12px !important;
  150.         border-radius: 8px !important;
  151.       }
  152.       .ds-capture-markdown code {
  153.         background: transparent !important;
  154.         padding: 0 !important;
  155.       }
  156.       .ds-capture-markdown img {
  157.         max-width: 100% !important;
  158.         border-radius: 8px;
  159.       }
  160.     `);
  161.  
  162.   // 创建截图按钮
  163.   function createScreenshotButton(container) {
  164.     const btn = document.createElement("div");
  165.     btn.className = "ds-screenshot-btn";
  166.     btn.setAttribute("data-tooltip", "截图");
  167.     btn.style.cssText = `
  168.           --ds-icon-button-text-color: #CDD4DF;
  169.           padding: 4px;
  170.           background: transparent;
  171.           border-radius: 4px;
  172.           cursor: pointer;
  173.           display: inline-flex;
  174.           align-items: center;
  175.           justify-content: center;
  176.           transition: background-color 0.2s ease;
  177.           position: relative;
  178.         `;
  179.  
  180.     btn.innerHTML = `<svg viewBox="0 0 1024 1024" width="23" height="23"><path d="M853.333333 219.428571a73.142857 73.142857 0 0 1 73.142857 73.142858v487.619047a73.142857 73.142857 0 0 1-73.142857 73.142857H170.666667a73.142857 73.142857 0 0 1-73.142857-73.142857V292.571429a73.142857 73.142857 0 0 1 73.142857-73.142858h682.666666z m0 73.142858H170.666667v487.619047h682.666666V292.571429z m-341.333333 73.142857a170.666667 170.666667 0 1 1 0 341.333333 170.666667 170.666667 0 0 1 0-341.333333z m0 73.142857a97.52381 97.52381 0 1 0 0 195.047619 97.52381 97.52381 0 0 0 0-195.047619zM853.333333 97.52381v73.142857H512V97.52381h341.333333z" fill="currentColor"></path></svg>`;
  181.  
  182.     btn.onclick = async () => {
  183.       let loadingToast;
  184.       try {
  185.         loadingToast = showToast("正在生成截图...", "loading", 0);
  186.         const DeepSeekFace = container.querySelector(".eb23581b.dfa60d66");
  187.         const deepSearch = container.querySelector(
  188.           ".f9bf7997.d7dc56a8.c05b5566 > .a6d716f5.db5991dd"
  189.         );
  190.         const deepThink = container.querySelector(".edb250b1");
  191.         const markdownContent = container.querySelector(".ds-markdown");
  192.  
  193.         // 创建截图容器
  194.         const captureWrapper = document.createElement("div");
  195.         captureWrapper.style.cssText = `
  196.               background: #1A1B25;
  197.               border-radius: 12px;
  198.               position: fixed;
  199.               left: -9999px;
  200.               width: calc(100% - 32px);
  201.               max-width: 680px;
  202.               box-shadow: 0 0 12px rgba(0,0,0,0.2);
  203.               padding: 20px;
  204.           `;
  205.  
  206.         // 消息气泡容器
  207.         const messageContainer = document.createElement("div");
  208.         messageContainer.style.cssText = `
  209.               display: flex;
  210.               gap: 16px;
  211.               align-items: flex-start;
  212.               margin-bottom: 20px;
  213.               min-width: 300px;
  214.           `;
  215.  
  216.         // 左侧头像
  217.         if (DeepSeekFace) {
  218.           const cloneFace = DeepSeekFace.cloneNode(true);
  219.           cloneFace.style.cssText = `
  220.           width: 48px;
  221.           height: 48px;
  222.           flex-shrink: 0;
  223.           margin-top: 2px;
  224.           position: relative;
  225.           z-index: 1;
  226.       `;
  227.           messageContainer.appendChild(cloneFace);
  228.         }
  229.  
  230.         // 右侧气泡
  231.         const bubble = document.createElement("div");
  232.         bubble.className = "ds-bubble";
  233.         bubble.style.cssText = `
  234.       flex: 1;
  235.       min-width: 240px;
  236.       max-width: calc(100% - 64px);
  237.       margin-right: 8px;
  238.   `;
  239.  
  240.         // 克隆内容
  241.         if (deepSearch) {
  242.           const cloneSearch = deepSearch.cloneNode(true);
  243.           bubble.appendChild(cloneSearch);
  244.           if (deepThink) {
  245.             cloneSearch.style.marginBottom = "10px";
  246.           } else {
  247.             cloneSearch.style.margin = "0";
  248.           }
  249.         }
  250.         if (deepThink) {
  251.           const cloneDeep = deepThink.cloneNode(true);
  252.           cloneDeep.style.margin = "0";
  253.           bubble.appendChild(cloneDeep);
  254.         }
  255.         if (markdownContent) {
  256.           const cloneMarkdown = markdownContent.cloneNode(true);
  257.           cloneMarkdown.className += " ds-capture-markdown";
  258.           bubble.appendChild(cloneMarkdown);
  259.         }
  260.  
  261.         messageContainer.appendChild(bubble);
  262.         captureWrapper.appendChild(messageContainer);
  263.  
  264.         // 版权声明
  265.         const footer = document.createElement("div");
  266.         footer.style.cssText = `
  267.               margin-top: 20px;
  268.               padding-top: 12px;
  269.               border-top: 1px solid rgba(255,255,255,0.1);
  270.               color: rgba(205, 212, 223, 0.6);
  271.               font-size: 12px;
  272.               text-align: right;
  273.           `;
  274.         footer.textContent =
  275.           "内容由 DeepSeek 生成，图片由 DeepSeek Screenshoter 生成";
  276.         captureWrapper.appendChild(footer);
  277.  
  278.         document.body.appendChild(captureWrapper);
  279.  
  280.         // 生成截图
  281.         const canvas = await html2canvas(captureWrapper, {
  282.           useCORS: true,
  283.           logging: false,
  284.           scale: 2,
  285.           backgroundColor: "#1A1B25",
  286.         });
  287.  
  288.         document.body.removeChild(captureWrapper);
  289.  
  290.         canvas.toBlob(async (blob) => {
  291.           try {
  292.             await navigator.clipboard.write([
  293.               new ClipboardItem({ "image/png": blob }),
  294.             ]);
  295.  
  296.             loadingToast.innerHTML = `
  297.                   <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
  298.                     <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="#fff"/>
  299.                   </svg>
  300.                   <span>截图已复制到剪贴板！</span>
  301.                 `;
  302.             loadingToast.classList.add("ds-toast-success");
  303.             loadingToast.classList.remove("ds-toast-loading");
  304.  
  305.             setTimeout(() => {
  306.               loadingToast.classList.remove("show");
  307.               setTimeout(() => loadingToast.remove(), 300);
  308.             }, 2000);
  309.           } catch (err) {
  310.             console.error("复制失败:", err);
  311.             throw new Error("clipboard-error");
  312.           }
  313.         }, "image/png");
  314.       } catch (error) {
  315.         if (loadingToast) {
  316.           loadingToast.innerHTML = `
  317.                 <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
  318.                   <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" fill="#fff"/>
  319.                 </svg>
  320.                 <span>${
  321.                   error.message === "clipboard-error"
  322.                     ? "请手动粘贴图片"
  323.                     : "生成失败，请重试"
  324.                 }</span>
  325.               `;
  326.           loadingToast.classList.add("ds-toast-error");
  327.           loadingToast.classList.remove("ds-toast-loading", "show");
  328.           setTimeout(() => {
  329.             loadingToast.classList.add("show");
  330.             setTimeout(() => {
  331.               loadingToast.classList.remove("show");
  332.               setTimeout(() => loadingToast.remove(), 300);
  333.             }, 3000);
  334.           }, 10);
  335.         }
  336.       }
  337.     };
  338.  
  339.     return btn;
  340.   }
  341.  
  342.   // 处理消息容器
  343.   function processAnswers() {
  344.     document.querySelectorAll(".f9bf7997.c05b5566").forEach((container) => {
  345.       const buttonBar = container.querySelector(".ds-flex.abe97156");
  346.       if (!buttonBar) return;
  347.  
  348.       if (!buttonBar.querySelector(".ds-screenshot-btn")) {
  349.         const btn = createScreenshotButton(container);
  350.         buttonBar.appendChild(btn);
  351.       }
  352.     });
  353.   }
  354.  
  355.   // 初始运行
  356.   processAnswers();
  357.  
  358.   // 监听动态内容
  359.   new MutationObserver((mutations) => {
  360.     mutations.forEach((mutation) => {
  361.       if (mutation.addedNodes.length) {
  362.         setTimeout(processAnswers, 500);
  363.       }
  364.     });
  365.   }).observe(document.body, {
  366.     childList: true,
  367.     subtree: true,
  368.   });
  369. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

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