☰

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-07-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.1
  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.     window.addEventListener('load', function() {
  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 container = document.createElement('div');
  76.         container.style.display = 'flex';
  77.         container.style.flexDirection = 'column';
  78.         container.style.alignItems = 'center';
  79.         container.style.gap = '0.25em';
  80.         shadowRoot.appendChild(container);
  81.  
  82.         const topButton = createButton(scrollToTop, 'up');
  83.         container.appendChild(topButton);
  84.  
  85.         const bottomButton = createButton(scrollToBottom, 'down');
  86.         container.appendChild(bottomButton);
  87.     });
  88. })();