☰

chatgpt-tool

美化样式，增强前端功能

  1. // ==UserScript==
  2. // @name         chatgpt-tool
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.2
  5. // @description  美化样式，增强前端功能
  6. // @author       poeticalcode
  7. // @match        https://chat.openai.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=openai.com
  9. // @grant        GM_addStyle
  10. // @license GNU GPLv3
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.   'use strict';
  15.   GM_addStyle(`
  16.     .m-auto{
  17.       margin:unset !important;
  18.       max-width:unset !important;
  19.     }
  20.   `);
  21.  
  22.  
  23.  
  24.  
  25.   const addRightClick = function (dom) {
  26.  
  27.     dom && dom.addEventListener('contextmenu', function (event) {
  28.       // 创建自定义的右键菜单项
  29.       let customMenuItem = document.createElement('div');
  30.       customMenuItem.id = "custom-menu-item"
  31.       customMenuItem.innerHTML = '将回答导出图片';
  32.       customMenuItem.style.cssText = 'cursor: pointer; padding: 5px; background-color: #ffffff; border: 1px solid #000000;color:black;display:none;border-radius: 8px;fontSize: 14px';
  33.       customMenuItem.style.display = 'inline-block';
  34.       customMenuItem.style.position = 'absolute';
  35.       customMenuItem.style.left = event.clientX + 'px';
  36.       customMenuItem.style.top = event.clientY + 'px';
  37.       document.body.appendChild(customMenuItem);
  38.       // 阻止默认的右键菜单弹出
  39.       event.preventDefault();
  40.       // 添加自定义菜单项点击事件监听
  41.       customMenuItem.addEventListener('click', () => {
  42.         // 在这里可以添加自定义菜单项的点击事件处理逻辑
  43.         dom && html2canvas(dom).then(function (canvas) {
  44.           let imgDataUrl = canvas.toDataURL('image/png');
  45.           let downloadLink = document.createElement('a');
  46.           downloadLink.href = imgDataUrl;
  47.           // 下载的文件名，可以根据需要修改
  48.           downloadLink.download = 'chatgpt.png';
  49.           downloadLink.click();
  50.         });
  51.       });
  52.  
  53.  
  54.     });
  55.  
  56.     // 添加点击事件监听，隐藏右键菜单
  57.     document.addEventListener('click', function (event) {
  58.       let dom = document.getElementById("custom-menu-item");
  59.       dom && dom.remove()
  60.     });
  61.   }
  62.  
  63.   // 在这里引入第三方插件的脚本文件
  64.   let scriptElement = document.createElement('script');
  65.   scriptElement.src = 'https://github.com/niklasvh/html2canvas/releases/download/v1.4.1/html2canvas.min.js';
  66.   document.body.appendChild(scriptElement);
  67.   scriptElement.onload = function () {
  68.  
  69.  
  70.  
  71.     const addToImage = () => {
  72.       document.querySelectorAll('main .items-center .group')
  73.         .forEach((item, index) => {
  74.           // 这是回答
  75.           if (index % 2 === 1) {
  76.             console.log(item);
  77.             ((item) => { addRightClick(item) })(item)
  78.           }
  79.         });
  80.     }
  81.     // 选取需要监听的节点
  82.     const targetNode = document.querySelector("main");
  83.  
  84.     // 创建一个新的 MutationObserver 对象，将回调函数传递给它
  85.     const observer = new MutationObserver((mutationsList, observer) => {
  86.       addToImage()
  87.     });
  88.     // 配置观察选项
  89.     const config = { attributes: true, childList: true, subtree: true };
  90.     // 传入目标节点和观察选项进行观察
  91.     observer.observe(targetNode, config);
  92.     addToImage()
  93.   }
  94.  
  95. })();