☰

Button Go to the Top of Response on ChatGPT.com

Adds a button that scrolls to the top of each response on ChatGPT.com

目前为 2024-11-08 提交的版本。查看 最新版本。

// ==UserScript==
// @name         Button Go to the Top of Response on ChatGPT.com
// @namespace    http://tampermonkey.net/
// @version      1.3.1
// @description  Adds a button that scrolls to the top of each response on ChatGPT.com
// @author
// @match        http://*.chatgpt.com/*
// @match        https://*.chatgpt.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    function addButtons() {
        //console.log("Executing addButtons");
        // Selects all responses on ChatGPT.com
        const responses = document.querySelectorAll('article[data-testid^="conversation-turn-"]');

        responses.forEach((response, index) => {
            // Checks if the button has already been added to avoid duplication
            if (response.querySelector('.go-to-top-button')) {
                //console.log("Button already exists, ignoring");
                return;
            }

            //console.log(`Adding 'Go to the top of response' button to response ${index}`);
            // Creates the button and sets its properties
            const button = document.createElement('button');
            button.textContent = '^';
            button.className = 'go-to-top-button';
            button.style.position = 'absolute';
            button.style.bottom = '10px';
            button.style.right = '10px';
            button.style.zIndex = '1000';
            button.style.padding = '8px 12px';
            button.style.backgroundColor = '#808080';  // Gray
            button.style.color = '#fff';
            button.style.border = 'none';  // No borders
            button.style.cursor = 'pointer';

            // Adds a click event to the button to scroll to the top of the corresponding response
            button.addEventListener('click', () => {
                //console.log(`Clicked on 'Go to the top of response ${index}' button`);
                response.scrollIntoView({ behavior: 'smooth' });
            });

            // Sets relative positioning for the response element and adds the button
            response.style.position = 'relative';
            response.appendChild(button);
        });
    }

    function start() {
        //console.log("Executing start");
        addButtons();
    }

    // Creates an observer to detect changes in the DOM and initiate functions
    const observer = new MutationObserver(() => {
        //console.log("Mutation detected, executing start");
        start();
    });

    observer.observe(document.body, { childList: true, subtree: true });

    // Executes the start function when the script loads
    start();
})();