☰

Notepad For Character.ai

Adds a collapsable matte gray notepad on Character.AI chats, unique to each character page.

  1. // ==UserScript==
  2. // @name         Notepad For Character.ai
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @description  Adds a collapsable matte gray notepad on Character.AI chats, unique to each character page.
  6. // @author       Mr005K via ChatGPT
  7. // @match        https://character.ai/*
  8. // @grant        none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Create and style the notepad panel
  16.     const notepadPanel = document.createElement('div');
  17.     notepadPanel.style.position = 'fixed';
  18.     notepadPanel.style.top = '0';
  19.     notepadPanel.style.right = '0';
  20.     notepadPanel.style.width = '300px';
  21.     notepadPanel.style.height = '100%';
  22.     notepadPanel.style.backgroundColor = '#4a4a4a';
  23.     notepadPanel.style.color = '#ffffff';
  24.     notepadPanel.style.padding = '10px';
  25.     notepadPanel.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
  26.     notepadPanel.style.transform = 'translateX(100%)';
  27.     notepadPanel.style.transition = 'transform 0.3s ease-in-out';
  28.     notepadPanel.style.zIndex = '1000';
  29.  
  30.     // Create the toggle button
  31.     const toggleButton = document.createElement('button');
  32.     toggleButton.textContent = '📝';
  33.     toggleButton.style.position = 'fixed';
  34.     toggleButton.style.top = '10px';
  35.     toggleButton.style.right = '10px';
  36.     toggleButton.style.zIndex = '1001';
  37.     toggleButton.style.backgroundColor = '#4a4a4a';
  38.     toggleButton.style.color = '#ffffff';
  39.     toggleButton.style.border = 'none';
  40.     toggleButton.style.padding = '10px';
  41.     toggleButton.style.cursor = 'pointer';
  42.  
  43.     // Create the textarea for notes
  44.     const textarea = document.createElement('textarea');
  45.     textarea.style.width = '100%';
  46.     textarea.style.height = 'calc(100% - 20px)';
  47.     textarea.style.backgroundColor = '#3a3a3a';
  48.     textarea.style.color = '#ffffff';
  49.     textarea.style.border = 'none';
  50.     textarea.style.padding = '10px';
  51.     textarea.style.resize = 'none';
  52.     textarea.style.fontFamily = 'Arial, sans-serif';
  53.     textarea.style.fontSize = '14px';
  54.  
  55.     // Function to get the character ID from the URL
  56.     function getCharacterId() {
  57.         const pathParts = window.location.pathname.split('/');
  58.         return pathParts.includes('chat') ? pathParts.pop() : null;
  59.     }
  60.  
  61.     // Load the saved notes from localStorage when character ID is available
  62.     function loadNotes() {
  63.         const characterId = getCharacterId();
  64.         if (characterId) {
  65.             const localStorageKey = `character_notepad_${characterId}`;
  66.             textarea.value = localStorage.getItem(localStorageKey) || '';
  67.         }
  68.     }
  69.  
  70.     // Save the notes to localStorage whenever the textarea content changes
  71.     textarea.addEventListener('input', () => {
  72.         const characterId = getCharacterId();
  73.         if (characterId) {
  74.             const localStorageKey = `character_notepad_${characterId}`;
  75.             localStorage.setItem(localStorageKey, textarea.value);
  76.         }
  77.     });
  78.  
  79.     // Add functionality to toggle the panel
  80.     toggleButton.addEventListener('click', () => {
  81.         if (notepadPanel.style.transform === 'translateX(100%)') {
  82.             notepadPanel.style.transform = 'translateX(0)';
  83.         } else {
  84.             notepadPanel.style.transform = 'translateX(100%)';
  85.         }
  86.     });
  87.  
  88.     // Append elements to the body
  89.     notepadPanel.appendChild(textarea);
  90.     document.body.appendChild(notepadPanel);
  91.     document.body.appendChild(toggleButton);
  92.  
  93.     // Observe URL changes to update the notepad content
  94.     const observer = new MutationObserver(() => {
  95.         loadNotes();
  96.     });
  97.  
  98.     observer.observe(document.body, { childList: true, subtree: true });
  99.  
  100.     // Initial load of notes
  101.     loadNotes();
  102. })();