☰

Chat GPT scroll to the top and bottom buttons

Adds buttons to scroll to the top and bottom of the chat on Chat GPT

当前为 2024-08-14 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Chat GPT scroll to the top and bottom buttons
  3. // @author       NWP
  4. // @description  Adds buttons to scroll to the top and bottom of the chat on Chat GPT
  5. // @namespace    https://greasyfork.org/users/877912
  6. // @version      0.2
  7. // @license      MIT
  8. // @match        https://chatgpt.com/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     function createButton(onClick, triangleDirection) {
  16.         const button = document.createElement('button');
  17.         const buttonStyle = {
  18.             backgroundColor: '#707070',
  19.             border: 'none',
  20.             borderRadius: '0.5em',
  21.             cursor: 'pointer',
  22.             display: 'flex',
  23.             alignItems: 'center',
  24.             justifyContent: 'center',
  25.             width: '3.5em',
  26.             height: '2em',
  27.             position: 'relative',
  28.             transition: 'background-color 0.3s',
  29.         };
  30.         Object.assign(button.style, buttonStyle);
  31.         button.addEventListener('click', onClick);
  32.  
  33.         const triangle = document.createElement('div');
  34.         triangle.style.width = '0';
  35.         triangle.style.height = '0';
  36.         triangle.style.borderLeft = '0.75em solid transparent';
  37.         triangle.style.borderRight = '0.75em solid transparent';
  38.         if (triangleDirection === 'up') {
  39.             triangle.style.borderBottom = '0.75em solid black';
  40.         } else {
  41.             triangle.style.borderTop = '0.75em solid black';
  42.         }
  43.         button.appendChild(triangle);
  44.  
  45.         button.onmouseenter = function() {
  46.             button.style.backgroundColor = '#9f9f9f';
  47.         };
  48.         button.onmouseleave = function() {
  49.             button.style.backgroundColor = '#707070';
  50.         };
  51.  
  52.         return button;
  53.     }
  54.  
  55.     function scrollToTop() {
  56.         const target = Array.from(document.querySelectorAll('div[class^="react-scroll-to-bottom--css"]')).filter(el => !el.className.includes('full'))[0];
  57.         if (target) target.scrollTop = 0;
  58.     }
  59.  
  60.     function scrollToBottom() {
  61.         const target = Array.from(document.querySelectorAll('div[class^="react-scroll-to-bottom--css"]')).filter(el => !el.className.includes('full'))[0];
  62.         if (target) target.scrollTop = target.scrollHeight;
  63.     }
  64.  
  65.     function createButtons() {
  66.         const shadowHost = document.createElement('div');
  67.         shadowHost.style.position = 'fixed';
  68.         shadowHost.style.bottom = '3em';
  69.         shadowHost.style.right = '2em';
  70.         shadowHost.style.zIndex = '1000';
  71.         document.body.appendChild(shadowHost);
  72.  
  73.         const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
  74.  
  75.         const style = document.createElement('style');
  76.         style.textContent = `
  77.             button {
  78.                 background-color: #707070;
  79.                 border: none;
  80.                 border-radius: 0.5em;
  81.                 cursor: pointer;
  82.                 display: flex;
  83.                 align-items: center;
  84.                 justify-content: center;
  85.                 width: 3.5em;
  86.                 height: 2em;
  87.                 position: relative;
  88.                 transition: background-color 0.3s;
  89.             }
  90.             button:hover {
  91.                 background-color: #9f9f9f;
  92.             }
  93.             div.triangle-up {
  94.                 width: 0;
  95.                 height: 0;
  96.                 border-left: 0.75em solid transparent;
  97.                 border-right: 0.75em solid transparent;
  98.                 border-bottom: 0.75em solid black;
  99.             }
  100.             div.triangle-down {
  101.                 width: 0;
  102.                 height: 0;
  103.                 border-left: 0.75em solid transparent;
  104.                 border-right: 0.75em solid transparent;
  105.                 border-top: 0.75em solid black;
  106.             }
  107.         `;
  108.         shadowRoot.appendChild(style);
  109.  
  110.         const container = document.createElement('div');
  111.         container.style.display = 'flex';
  112.         container.style.flexDirection = 'column';
  113.         container.style.alignItems = 'center';
  114.         container.style.gap = '0.25em';
  115.         shadowRoot.appendChild(container);
  116.  
  117.         const topButton = createButton(scrollToTop, 'up');
  118.         container.appendChild(topButton);
  119.         topButton.firstChild.classList.add('triangle-up');
  120.  
  121.         const bottomButton = createButton(scrollToBottom, 'down');
  122.         container.appendChild(bottomButton);
  123.         bottomButton.firstChild.classList.add('triangle-down');
  124.     }
  125.  
  126.     window.addEventListener('load', function() {
  127.         setTimeout(createButtons, 2000);
  128.     });
  129. })();