☰

ChatGPT Pin Chats

Add a pin button to each chat in ChatGPT's sidebar, making it easy to save important conversations. Pinned chats are displayed in the 'Pinned Chats' section at the bottom of the sidebar. Click pinned chats to reopen them, and you can also remove individual pins or clear all pinned chats.

当前为 2025-03-12 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         ChatGPT Pin Chats
  3. // @namespace    https://greasyfork.org/en/users/1444872-tlbstation
  4. // @version      1.8.2
  5. // @description  Add a pin button to each chat in ChatGPT's sidebar, making it easy to save important conversations. Pinned chats are displayed in the 'Pinned Chats' section at the bottom of the sidebar. Click pinned chats to reopen them, and you can also remove individual pins or clear all pinned chats.
  6. // @icon         https://i.ibb.co/jZ3HpwPk/pngwing-com.png
  7. // @author       TLBSTATION
  8. // @match        https://chatgpt.com/*
  9. // @grant        GM_setValue
  10. // @grant        GM_getValue
  11. // @license MIT
  12. // ==/UserScript==
  13.  
  14. (function () {
  15.     'use strict';
  16.  
  17.     const STORAGE_KEY = 'pinnedChatsGPT';
  18.  
  19.     function getPinnedChats() {
  20.         return JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
  21.     }
  22.  
  23.     function savePinnedChats(chats) {
  24.         localStorage.setItem(STORAGE_KEY, JSON.stringify(chats));
  25.     }
  26.  
  27.     function createPinnedSection() {
  28.         let pinnedContainer = document.querySelector('#pinned-chats');
  29.         if (!pinnedContainer) {
  30.             pinnedContainer = document.createElement('div');
  31.             pinnedContainer.id = 'pinned-chats';
  32.             pinnedContainer.style.padding = '10px';
  33.             pinnedContainer.style.marginBottom = '0';
  34.             pinnedContainer.style.borderBottom = '2px solid rgba(255, 255, 255, 0.2)';
  35.             pinnedContainer.style.color = 'white';
  36.             pinnedContainer.style.paddingLeft = '10px';
  37.             pinnedContainer.style.marginLeft = '-11px';
  38.  
  39.             function insertPinnedSection() {
  40.                 const targetDiv = document.querySelector('.flex-col.flex-1.transition-opacity.duration-500.relative.pr-3.overflow-y-auto');
  41.                 if (targetDiv && targetDiv.parentElement) {
  42.                     targetDiv.parentElement.insertBefore(pinnedContainer, targetDiv.nextSibling); // Insert after target div
  43.                     return true;
  44.                 }
  45.                 return false;
  46.             }
  47.  
  48.             // Try inserting immediately; if not found, keep checking until target div appears
  49.             if (!insertPinnedSection()) {
  50.                 const observer = new MutationObserver(() => {
  51.                     if (insertPinnedSection()) observer.disconnect();
  52.                 });
  53.                 observer.observe(document.body, { childList: true, subtree: true });
  54.             }
  55.         }
  56.         return pinnedContainer;
  57.     }
  58.  
  59.     function updatePinnedSection() {
  60.         const pinnedContainer = createPinnedSection();
  61.         const pinnedChats = getPinnedChats();
  62.         pinnedContainer.innerHTML = '';
  63.  
  64.         // Header (Title + Clear Button)
  65.         const header = document.createElement('div');
  66.         header.style.display = 'flex';
  67.         header.style.alignItems = 'center';
  68.         header.style.justifyContent = 'space-between';
  69.         header.style.marginBottom = '10px';
  70.  
  71.         const title = document.createElement('h3');
  72.         title.innerText = '📌 Pinned Chats';
  73.         title.style.fontSize = '16px';
  74.         title.style.fontWeight = 'bold';
  75.         title.style.margin = '0';
  76.  
  77.         const clearButton = document.createElement('button');
  78.         clearButton.innerText = '❌';
  79.         clearButton.style.padding = '4px 4px';
  80.         clearButton.style.border = 'none';
  81.         clearButton.style.cursor = 'pointer';
  82.         clearButton.style.background = 'white';
  83.         clearButton.style.color = 'black';
  84.         clearButton.style.fontSize = '11px';
  85.         clearButton.style.borderRadius = '4px';
  86.         clearButton.style.transition = 'background 0.3s';
  87.  
  88.         clearButton.addEventListener('mouseenter', () => {
  89.             clearButton.style.background = '#682828';
  90.             clearButton.style.color = 'white';
  91.         });
  92.         clearButton.addEventListener('mouseleave', () => {
  93.             clearButton.style.background = 'white';
  94.             clearButton.style.color = 'black';
  95.         });
  96.  
  97.         clearButton.addEventListener('click', () => {
  98.             localStorage.removeItem(STORAGE_KEY);
  99.             updatePinnedSection();
  100.             addPinToChats(); // Ensure pins are re-checked
  101.             // Reset all pin button opacities in chat history
  102.             document.querySelectorAll('.pin-button').forEach(button => {
  103.                 button.style.opacity = '0.5';
  104.             });
  105.         });
  106.  
  107.         header.appendChild(title);
  108.         header.appendChild(clearButton);
  109.         pinnedContainer.appendChild(header);
  110.  
  111.         // Pinned chats list
  112.         if (pinnedChats.length > 0) {
  113.             clearButton.style.display = 'block';
  114.             const list = document.createElement('ul');
  115.             list.style.listStyle = 'none';
  116.             list.style.padding = '0';
  117.             list.style.margin = '0';
  118.             // Set fixed height and make it scrollable
  119.             list.style.maxHeight = '200px'; // Adjust height as needed
  120.             list.style.overflowY = 'auto';
  121.             list.style.paddingRight = '5px'; // Prevents scrollbar from overlapping content
  122.  
  123.             pinnedChats.forEach(chat => {
  124.                 const chatItem = document.createElement('li');
  125.                 chatItem.style.padding = '8px';
  126.                 chatItem.style.marginBottom = '5px';
  127.                 chatItem.style.cursor = 'pointer';
  128.                 chatItem.style.borderRadius = '6px';
  129.                 chatItem.style.background = 'rgba(255, 255, 255, 0.1)';
  130.                 chatItem.style.transition = 'background 0.3s';
  131.                 chatItem.style.display = 'flex';
  132.                 chatItem.style.alignItems = 'center';
  133.  
  134.                 chatItem.addEventListener('mouseenter', () => {
  135.                     chatItem.style.background = 'rgba(255, 255, 255, 0.2)';
  136.                 });
  137.                 chatItem.addEventListener('mouseleave', () => {
  138.                     chatItem.style.background = 'rgba(255, 255, 255, 0.1)';
  139.                 });
  140.  
  141.                 // Create clickable link
  142.                 const chatLink = document.createElement('a');
  143.                 chatLink.href = `https://chatgpt.com/c/${chat.id}`;
  144.                 chatLink.innerText = chat.title;
  145.                 chatLink.style.color = 'white';
  146.                 chatLink.style.textDecoration = 'none';
  147.                 chatLink.style.flexGrow = '1';
  148.                 chatLink.style.whiteSpace = 'nowrap';
  149.                 chatLink.style.overflow = 'hidden';
  150.                 chatLink.style.textOverflow = 'ellipsis';
  151.  
  152.                 // Remove button
  153.                 const removeButton = document.createElement('span');
  154.                 removeButton.innerText = '❌';
  155.                 removeButton.style.cursor = 'pointer';
  156.                 removeButton.style.marginLeft = '10px';
  157.                 removeButton.style.fontSize = '14px';
  158.                 removeButton.style.opacity = '0';
  159.                 removeButton.style.transition = 'opacity 0.3s';
  160.  
  161.                 chatItem.addEventListener('mouseenter', () => {
  162.                     removeButton.style.opacity = '1';
  163.                 });
  164.                 chatItem.addEventListener('mouseleave', () => {
  165.                     removeButton.style.opacity = '0';
  166.                 });
  167.  
  168.                 removeButton.addEventListener('click', (event) => {
  169.                     event.stopPropagation();
  170.                     let updatedChats = getPinnedChats().filter(c => c.id !== chat.id);
  171.                     savePinnedChats(updatedChats);
  172.                     updatePinnedSection();
  173.                     // Update pin button opacity in chat history
  174.                     document.querySelectorAll('.pin-button').forEach(button => {
  175.                         const parentChatItem = button.closest('li[data-testid^="history-item-"]');
  176.                         if (parentChatItem) {
  177.                             const chatID = parentChatItem.querySelector('a')?.getAttribute('href')?.split('/c/')[1];
  178.                             if (chatID === chat.id) {
  179.                                 button.style.opacity = '0.5'; // Set opacity to indicate unpinned
  180.                             }
  181.                         }
  182.                     });
  183.                 });
  184.  
  185.                 chatItem.appendChild(chatLink);
  186.                 chatItem.appendChild(removeButton);
  187.                 list.appendChild(chatItem);
  188.             });
  189.  
  190.             pinnedContainer.appendChild(list);
  191.         } else {
  192.             clearButton.style.display = 'none';
  193.             const emptyMessage = document.createElement('p');
  194.             emptyMessage.innerText = 'No pinned chats';
  195.             emptyMessage.style.color = 'rgba(255, 255, 255, 0.6)';
  196.             emptyMessage.style.fontSize = '14px';
  197.             pinnedContainer.appendChild(emptyMessage);
  198.         }
  199.     }
  200.  
  201.     function addPinToChats() {
  202.         document.querySelectorAll('li[data-testid^="history-item-"]').forEach(chatItem => {
  203.             if (chatItem.querySelector('.pin-button')) return;
  204.  
  205.             const chatTitleElement = chatItem.querySelector('a div');
  206.             if (!chatTitleElement) return;
  207.  
  208.             const chatTitle = chatTitleElement.innerText.trim();
  209.             const chatID = chatItem.querySelector('a')?.getAttribute('href')?.split('/c/')[1];
  210.  
  211.             const pinButton = document.createElement('span');
  212.             pinButton.className = 'pin-button';
  213.             pinButton.innerText = '📌';
  214.             pinButton.style.cursor = 'pointer';
  215.             pinButton.style.marginRight = '8px';
  216.             pinButton.style.fontSize = '16px';
  217.             pinButton.style.opacity = '0.5';
  218.  
  219.             let pinnedChats = getPinnedChats();
  220.             if (pinnedChats.some(c => c.id === chatID)) pinButton.style.opacity = '1';
  221.  
  222.             pinButton.addEventListener('click', (event) => {
  223.                 event.stopPropagation();
  224.                 event.preventDefault();
  225.  
  226.                 let pinnedChats = getPinnedChats();
  227.  
  228.                 if (pinnedChats.some(c => c.id === chatID)) {
  229.                     pinnedChats = pinnedChats.filter(c => c.id !== chatID);
  230.                     pinButton.style.opacity = '0.5';
  231.                 } else {
  232.                     pinnedChats.unshift({ title: chatTitle, id: chatID });
  233.                     pinButton.style.opacity = '1';
  234.                 }
  235.  
  236.                 savePinnedChats(pinnedChats);
  237.                 updatePinnedSection();
  238.             });
  239.  
  240.             chatTitleElement.parentElement.prepend(pinButton);
  241.         });
  242.     }
  243.  
  244.     function observeSidebar() {
  245.         const observer = new MutationObserver(() => addPinToChats());
  246.         const sidebar = document.querySelector('nav');
  247.         if (sidebar) observer.observe(sidebar, { childList: true, subtree: true });
  248.     }
  249.  
  250.     function init() {
  251.         addPinToChats();
  252.         updatePinnedSection();
  253.         observeSidebar();
  254.     }
  255.  
  256.     // New: Monitor the sidebar so that if it's closed and reopened, we reinitialize the pinned section.
  257.     function monitorSidebar() {
  258.         const observer = new MutationObserver(() => {
  259.             const sidebar = document.querySelector('nav');
  260.             if (sidebar && !document.querySelector('#pinned-chats')) {
  261.                 init();
  262.             }
  263.         });
  264.         observer.observe(document.body, { childList: true, subtree: true });
  265.     }
  266.  
  267.     function waitForElement(selector, callback) {
  268.         const observer = new MutationObserver((mutations, obs) => {
  269.             if (document.querySelector(selector)) {
  270.                 callback();
  271.                 obs.disconnect(); // Stop observing once the element is found
  272.             }
  273.         });
  274.         observer.observe(document.body, { childList: true, subtree: true });
  275.     }
  276.  
  277.     // Start the initialization process after the sidebar loads
  278.     waitForElement("nav", () => {
  279.         init();
  280.         monitorSidebar();
  281.     });
  282. })();