☰

Greasy Fork is available in English.

Alternar Barra Lateral de ChatGPT

Este usescript agrega un pequeño botón a la barra lateral de ChatGPT para que la puedas esconder.

  1. // ==UserScript==
  2. // @name         ChatGPT Sidebar Toggle
  3. // @name:es      Alternar Barra Lateral de ChatGPT
  4. // @namespace    http://tampermonkey.net/
  5. // @version      0.2
  6. // @description  This userscript adds a little button to ChatGPT's Sidebar so that you can hide it.
  7. // @description:es  Este usescript agrega un pequeño botón a la barra lateral de ChatGPT para que la puedas esconder.
  8. // @author       CFUEN (https://github.com/cfuendev)
  9. // @match        https://chat.openai.com/*
  10. // @match        https://chat.openai.com/c/*
  11. // @icon         https://chat.openai.com/favicon-16x16.png
  12. // @license      MIT
  13. // @grant        none
  14. // @run-at
  15. // ==/UserScript==
  16.  
  17. (function() {
  18.     'use strict';
  19.  
  20.     let sidebarElm;
  21.     let sidebarHidden = false;
  22.     const hideSidebarButtonElm = document.createElement('button');
  23.     hideSidebarButtonElm.style = "padding: 3px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; background-color: #202123; border-top: 1px solid rgba(255, 255, 255, 0.2); border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); position: absolute; left: 100%; top:30px;";
  24.     hideSidebarButtonElm.innerHTML = '<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="currentColor" d="M3.636 11.293a1 1 0 0 0 0 1.414l5.657 5.657a1 1 0 0 0 1.414-1.414L6.757 13H20a1 1 0 1 0 0-2H6.757l3.95-3.95a1 1 0 0 0-1.414-1.414l-5.657 5.657Z"/></g></svg>'
  25.     const scriptInterval = setInterval(() => {
  26.         sidebarElm = document.querySelector('html body div#__next div.overflow-hidden.w-full.h-full.relative.flex.z-0 div.flex-shrink-0.overflow-x-hidden.bg-gray-900');
  27.         if (sidebarElm) {
  28.             clearInterval(scriptInterval);
  29.             sidebarElm.id = "Sidebar";
  30.             const hideSidebarButtonElm = document.createElement('button');
  31.             hideSidebarButtonElm.style = "padding: 3px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; background-color: #202123; border-top: 1px solid rgba(255, 255, 255, 0.2); border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); position: absolute; left: 100%; top:30px;";
  32.             hideSidebarButtonElm.innerHTML = '<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="currentColor" d="M3.636 11.293a1 1 0 0 0 0 1.414l5.657 5.657a1 1 0 0 0 1.414-1.414L6.757 13H20a1 1 0 1 0 0-2H6.757l3.95-3.95a1 1 0 0 0-1.414-1.414l-5.657 5.657Z"/></g></svg>'
  33.             hideSidebarButtonElm.addEventListener('click', (e) => {
  34.                 if (sidebarHidden) {
  35.                     sidebarElm.style.transform = '';
  36.                     sidebarElm.style.position = 'relative';
  37.                     hideSidebarButtonElm.querySelector('svg').style.transform = "rotateY(0deg)";
  38.                     sidebarHidden = false;
  39.                 } else {
  40.                     sidebarElm.style.transform = 'translateX(-100%)';
  41.                     sidebarElm.style.position = 'absolute';
  42.                     hideSidebarButtonElm.querySelector('svg').style.transform= "rotateY(180deg)";
  43.                     sidebarHidden = true;
  44.                 }
  45.             })
  46.             sidebarElm.style.position = 'relative'; sidebarElm.style.overflowX = 'visible'; sidebarElm.style.zIndex = '2'; sidebarElm.style.borderRight = '1px solid rgba(255, 255, 255, 0.2)'
  47.             sidebarElm.append(hideSidebarButtonElm);
  48.         }
  49.     }, 5)
  50.  
  51.     // Select the node that will be observed for mutations
  52.     const targetNode = document.getElementById("__next");
  53.  
  54.     // Options for the observer (which mutations to observe)
  55.     const config = { attributes: true, childList: true, subtree: false };
  56.  
  57.     // Callback function to execute when mutations are observed
  58.     const callback = function(mutationsList, observer) {
  59.         // Handle changes to the targetNode here
  60.         const scriptInterval = setInterval(() => {
  61.             sidebarElm = document.querySelector('html body div#__next div.overflow-hidden.w-full.h-full.relative.flex.z-0 div.flex-shrink-0.overflow-x-hidden.bg-gray-900');
  62.             if (sidebarElm) {
  63.                 clearInterval(scriptInterval);
  64.                 sidebarElm.id = "Sidebar";
  65.                 hideSidebarButtonElm.addEventListener('click', (e) => {
  66.                     if (sidebarHidden) {
  67.                         sidebarElm.style.transform = '';
  68.                         sidebarElm.style.position = 'relative';
  69.                         hideSidebarButtonElm.querySelector('svg').style.transform = "rotateY(0deg)";
  70.                         sidebarHidden = false;
  71.                     } else {
  72.                         sidebarElm.style.transform = 'translateX(-100%)';
  73.                         sidebarElm.style.position = 'absolute';
  74.                         hideSidebarButtonElm.querySelector('svg').style.transform= "rotateY(180deg)";
  75.                         sidebarHidden = true;
  76.                     }
  77.                 })
  78.                 sidebarElm.style.position = 'relative'; sidebarElm.style.overflowX = 'visible'; sidebarElm.style.zIndex = '2'; sidebarElm.style.borderRight = '1px solid rgba(255, 255, 255, 0.2)'
  79.                 sidebarElm.append(hideSidebarButtonElm);
  80.             }
  81.         }, 5)
  82.         };
  83.  
  84.     // Create a new observer instance
  85.     const observer = new MutationObserver(callback);
  86.  
  87.     // Start observing the target node for configured mutations
  88.     observer.observe(targetNode, config);
  89.     // sidebarElm.style.display = 'block';
  90. })();