☰

Greasy Fork is available in English.

Make ChatGPT scrollable with keyboard

This app makes it scrollable by setting tabindex to outer div making it focusable

  1. // ==UserScript==
  2. // @name         Make ChatGPT scrollable with keyboard
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2024-09-01
  5. // @description  This app makes it scrollable by setting tabindex to outer div making it focusable
  6. // @author       Alexander Yaremchuk & ChatGPT
  7. // @match        https://chatgpt.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. function onNavigation() {
  14.   const style = "div.flex.flex-col.text-sm.md\\:pb-9";
  15.   const elem = document.querySelector(style);
  16.   if (elem) {
  17.     elem.setAttribute("tabindex", "1");
  18.     // console.log("Scroll for ChatGPT completed successfully.");
  19.   } else {
  20.     // console.log(`element with style ${style} not found.`);
  21.   }
  22. }
  23.  
  24. (function () {
  25.   ("use strict");
  26.   // console.log("Scroll for ChatGPT is starting");
  27.   if (
  28.     typeof document !== "undefined" &&
  29.     typeof MutationObserver !== "undefined"
  30.   ) {
  31.     // console.log("Scroll for ChatGPT setting a mutation listener");
  32.  
  33.     setTimeout(() => {
  34.       onNavigation();
  35.       initializeObserver();
  36.       // console.log("Mutation observer initialized after delay");
  37.     }, 3000); // 3-second delay, give time to load
  38.   }
  39. })();
  40.  
  41. function initializeObserver() {
  42.   const callback = function (mutationsList, observer) {
  43.     // console.log("Scroll for ChatGPT mutations: ", mutationsList);
  44.     for (let mutation of mutationsList) {
  45.       if (mutation.type === "childList") {
  46.         // console.log("Scroll for ChatGPT running onNavigation");
  47.         onNavigation();
  48.         break;
  49.       }
  50.     }
  51.   };
  52.   const observer = new MutationObserver(callback);
  53.   observer.observe(document.body, { childList: true, subtree: true });
  54. }
  55.  
  56. module.exports = { onNavigation };