Discord ChatGPT Button (Movable)

Adds a draggable ChatGPT button to Discord with an inbuilt ChatGPT chatbox
当前为 2025-08-14 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Discord ChatGPT Button (Movable)
// @namespace    https://gf.qytechs.cn/
// @version      0.13
// @description  Adds a draggable ChatGPT button to Discord with an inbuilt ChatGPT chatbox
// @author       You
// @match        https://discord.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // --- CONFIG ---
    const CHATGPT_IFRAME_URL = "https://chat.openai.com/"; // You can change to another ChatGPT frontend
    const BUTTON_SIZE = 50;

    // --- STYLES ---
    GM_addStyle(`
        #chatgpt-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: ${BUTTON_SIZE}px;
            height: ${BUTTON_SIZE}px;
            background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 50%;
            cursor: grab;
            z-index: 9999;
            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        }
        #chatgpt-panel {
            position: fixed;
            bottom: 80px;
            right: 20px;
            width: 400px;
            height: 500px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            display: none;
            z-index: 9999;
            overflow: hidden;
        }
        #chatgpt-panel iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    `);

    // --- CREATE BUTTON ---
    const btn = document.createElement("div");
    btn.id = "chatgpt-button";
    document.body.appendChild(btn);

    // --- CREATE PANEL ---
    const panel = document.createElement("div");
    panel.id = "chatgpt-panel";
    panel.innerHTML = `<iframe src="${CHATGPT_IFRAME_URL}"></iframe>`;
    document.body.appendChild(panel);

    // --- TOGGLE PANEL ---
    btn.addEventListener("click", () => {
        panel.style.display = (panel.style.display === "none" || !panel.style.display) ? "block" : "none";
    });

    // --- DRAG FUNCTIONALITY ---
    let isDragging = false, offsetX, offsetY;
    btn.addEventListener("mousedown", (e) => {
        isDragging = true;
        offsetX = e.clientX - btn.offsetLeft;
        offsetY = e.clientY - btn.offsetTop;
        btn.style.cursor = "grabbing";
    });
    document.addEventListener("mousemove", (e) => {
        if (isDragging) {
            btn.style.left = (e.clientX - offsetX) + "px";
            btn.style.top = (e.clientY - offsetY) + "px";
            btn.style.right = "auto";
            btn.style.bottom = "auto";
        }
    });
    document.addEventListener("mouseup", () => {
        isDragging = false;
        btn.style.cursor = "grab";
    });

})();
欢迎访问Greasy Fork镜像
