chatgpt-tool

美化样式,增强前端功能

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         chatgpt-tool
// @namespace    http://tampermonkey.net/
// @version      0.1.2
// @description  美化样式,增强前端功能
// @author       poeticalcode
// @match        https://chat.openai.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=openai.com
// @grant        GM_addStyle
// @license GNU GPLv3
// ==/UserScript==

(function () {
  'use strict';
  GM_addStyle(`
    .m-auto{
      margin:unset !important;
      max-width:unset !important;
    }
  `);




  const addRightClick = function (dom) {

    dom && dom.addEventListener('contextmenu', function (event) {
      // 创建自定义的右键菜单项
      let customMenuItem = document.createElement('div');
      customMenuItem.id = "custom-menu-item"
      customMenuItem.innerHTML = '将回答导出图片';
      customMenuItem.style.cssText = 'cursor: pointer; padding: 5px; background-color: #ffffff; border: 1px solid #000000;color:black;display:none;border-radius: 8px;fontSize: 14px';
      customMenuItem.style.display = 'inline-block';
      customMenuItem.style.position = 'absolute';
      customMenuItem.style.left = event.clientX + 'px';
      customMenuItem.style.top = event.clientY + 'px';
      document.body.appendChild(customMenuItem);
      // 阻止默认的右键菜单弹出
      event.preventDefault();
      // 添加自定义菜单项点击事件监听
      customMenuItem.addEventListener('click', () => {
        // 在这里可以添加自定义菜单项的点击事件处理逻辑
        dom && html2canvas(dom).then(function (canvas) {
          let imgDataUrl = canvas.toDataURL('image/png');
          let downloadLink = document.createElement('a');
          downloadLink.href = imgDataUrl;
          // 下载的文件名,可以根据需要修改
          downloadLink.download = 'chatgpt.png';
          downloadLink.click();
        });
      });


    });

    // 添加点击事件监听,隐藏右键菜单
    document.addEventListener('click', function (event) {
      let dom = document.getElementById("custom-menu-item");
      dom && dom.remove()
    });
  }

  // 在这里引入第三方插件的脚本文件
  let scriptElement = document.createElement('script');
  scriptElement.src = 'https://github.com/niklasvh/html2canvas/releases/download/v1.4.1/html2canvas.min.js';
  document.body.appendChild(scriptElement);
  scriptElement.onload = function () {



    const addToImage = () => {
      document.querySelectorAll('main .items-center .group')
        .forEach((item, index) => {
          // 这是回答
          if (index % 2 === 1) {
            console.log(item);
            ((item) => { addRightClick(item) })(item)
          }
        });
    }
    // 选取需要监听的节点
    const targetNode = document.querySelector("main");

    // 创建一个新的 MutationObserver 对象,将回调函数传递给它
    const observer = new MutationObserver((mutationsList, observer) => {
      addToImage()
    });
    // 配置观察选项
    const config = { attributes: true, childList: true, subtree: true };
    // 传入目标节点和观察选项进行观察
    observer.observe(targetNode, config);
    addToImage()
  }

})();