Modern simple clipboard manager for ChatGPT with persistent storage
// ==UserScript==
// @name ChatGPT Clipboard Manager
// @namespace http://tampermonkey.net/
// @version 0.1.2
// @description Modern simple clipboard manager for ChatGPT with persistent storage
// @author OutlawRGB
// @match *://chatgpt.com/*
// @grant GM_setValue
// @grant GM_getValue
// @license MIT
// ==/UserScript==
(function() {
'use strict';
const CONFIG = {
MAX_ITEMS: 100,
MAX_FAVORITES: 10,
TOAST_DURATION: 2000,
CONFIRM_TIMEOUT: 5000,
STORAGE_KEY: 'chatgpt-clips',
};
const styles = `
.clip-manager, .clip-toggle, .clip-content, .clip-bottom-actions,
.clip-header, .clip-title, .clip-title-wrapper, .clip-title-display,
.clip-close, .clip-toast, .clip-card, .clip-preview,
.clip-actions, .clip-btn, .clip-save, .clip-save-clipboard,
.clip-clear-all, .clip-search, .clip-controls, .clip-empty,
.clip-title-input, .clip-favorite, .clip-edit-icon, .clip-save-icon {
transition: all 0.2s ease;
}
.clip-manager {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 700px;
background: #1a1b1e;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
z-index: 10000;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
user-select: none;
}
.clip-manager.open {
opacity: 1;
visibility: visible;
}
.clip-toggle {
position: fixed;
right: 340px;
top: 10px;
background: #2c2d31;
border: none;
border-radius: 12px;
padding: 12px;
cursor: pointer;
z-index: 10001;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.clip-toggle.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.clip-toggle:hover {
transform: scale(1.05);
background: #3a3b3f;
}
.clip-header {
padding: 20px;
color: #fff;
border-bottom: 1px solid #2c2d31;
display: flex;
justify-content: space-between;
align-items: center;
}
.clip-title {
margin: 0;
font-size: 18px;
font-weight: 600;
}
.clip-title-display {
font-size: 16px;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.clip-title-wrapper {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.clip-close {
background: transparent;
border: none;
color: #6b7280;
font-size: 24px;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
line-height: 1;
}
.clip-close:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.clip-content {
flex: 1;
overflow-y: auto;
padding: 20px;
margin-bottom: 70px;
}
.clip-content::-webkit-scrollbar {
width: 6px;
}
.clip-content::-webkit-scrollbar-track {
background: #1a1b1e;
}
.clip-content::-webkit-scrollbar-thumb {
background: #2c2d31;
border-radius: 3px;
}
.clip-content::-webkit-scrollbar-thumb:hover {
background: #3a3b3f;
}
.clip-bottom-actions {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: #2c2d31;
border-radius: 0 0 16px 16px;
}
.clip-save, .clip-save-clipboard, .clip-clear-all {
height: 40px;
padding: 0 24px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
line-height: 40px;
white-space: nowrap;
border: none;
}
.clip-save {
background: #98c379;
color: #1a1b1e;
box-shadow: 0 2px 8px rgba(152, 195, 121, 0.2);
}
.clip-save:hover {
background: #a9d389;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(152, 195, 121, 0.3);
}
.clip-save:disabled {
background: #4a4b4f;
cursor: not-allowed;
}
.clip-save-clipboard {
background: #5a67d8;
color: white;
box-shadow: 0 2px 8px rgba(90, 103, 216, 0.2);
}
.clip-save-clipboard:hover {
background: #6875f5;
}
.clip-clear-all {
background: #dc2626;
color: white;
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
padding-right: 20px;
text-align: center;
}
.clip-clear-all:hover {
background: #ef4444;
}
.clip-clear-all.confirm {
background: #991b1b;
}
.clip-card {
background: #2c2d31;
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
color: #fff;
border: 1px solid #3a3b3f;
}
.clip-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-color: #4a4b4f;
}
.clip-preview {
font-size: 14px;
color: #d1d5db;
margin: 8px 0 12px 0;
line-height: 1.5;
max-height: 100px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-word;
}
.clip-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
border-top: 1px solid #3a3b3f;
padding-top: 12px;
margin-top: 8px;
}
.clip-btn {
height: 32px;
padding: 0 12px;
background: transparent;
border: 1px solid #4a4b4f;
color: #fff;
border-radius: 6px;
font-size: 13px;
line-height: 30px;
}
.clip-btn:hover {
background: #3a3b3f;
border-color: #5a5b5f;
}
.clip-btn.delete {
color: #ef4444;
border-color: #ef4444;
}
.clip-btn.delete:hover {
background: rgba(239, 68, 68, 0.1);
}
.clip-toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: #2563eb;
color: white;
padding: 12px 24px;
border-radius: 8px;
z-index: 10003;
font-size: 14px;
line-height: 1.4;
}
.clip-manager[data-theme="light"] {
background: #ffffff;
color: #1a1b1e;
}
.clip-search {
background: #2c2d31;
color: #fff;
border: 1px solid #3a3b3f;
padding: 8px 12px;
border-radius: 6px;
margin-bottom: 16px;
width: 100%;
flex: 1;
}
.clip-favorite {
color: #ffd700;
background: transparent;
border: none;
cursor: pointer;
padding: 4px;
margin-right: auto;
}
.clip-controls {
margin-bottom: 20px;
padding: 20px;
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
background: #1a1b1e;
border-radius: 8px;
}
.clip-empty {
text-align: center;
font-size: 16px;
color: #d1d5db;
padding: 20px;
}
.clip-title-input {
background: #2c2d31;
color: #fff;
border: 1px solid #3a3b3f;
padding: 8px 12px;
border-radius: 6px;
flex: 1;
}
.clip-edit-icon, .clip-save-icon {
background: transparent;
border: none;
color: #6b7280;
font-size: 16px;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
}
.clip-edit-icon:hover, .clip-save-icon:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
`;
const archiveStyles = `
.clip-archived-counter {
margin-top: 20px;
padding: 16px;
background: #2c2d31;
border-radius: 8px;
color: #6b7280;
text-align: center;
font-size: 14px;
}
.archived-line {
height: 2px;
background: #3a3b3f;
margin-bottom: 12px;
border-radius: 1px;
}
.clip-card.favorite {
border-color: #ffd700;
background: rgba(255, 215, 0, 0.05);
}
`;
const styleSheet = document.createElement('style');
styleSheet.textContent = styles + archiveStyles;
document.head.appendChild(styleSheet);
const manager = document.createElement('div');
manager.className = 'clip-manager';
manager.innerHTML = `
<div class="clip-header">
<h2 class="clip-title">Clipboard Manager</h2>
<button class="clip-close">×</button>
</div>
<div class="clip-controls">
<input type="text" class="clip-search" placeholder="Search clips by title or content...">
</div>
<div class="clip-content"></div>
<div class="clip-bottom-actions">
<button class="clip-save-clipboard">Save Clipboard</button>
<button class="clip-save" disabled>Save Selection</button>
<button class="clip-clear-all">Clear All</button>
</div>
`;
const toggleBtn = document.createElement('button');
toggleBtn.className = 'clip-toggle';
toggleBtn.innerHTML = `
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
</svg>
`;
class ClipboardManager {
constructor() {
this.items = this.loadItems();
this.archivedItems = this.loadArchivedItems();
this.isOpen = false;
this.clearAllTimeout = null;
this.searchTerm = '';
this.theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
this.lastMouseY = 0;
this.mouseMoveDelta = 0;
this.init();
}
init() {
document.body.appendChild(manager);
document.body.appendChild(toggleBtn);
this.bindEvents();
this.setupThemeDetection();
this.renderItems();
this.updateSaveButton();
}
loadItems() {
try {
const items = typeof GM_getValue !== 'undefined' ?
GM_getValue(CONFIG.STORAGE_KEY) :
localStorage.getItem(CONFIG.STORAGE_KEY);
return items ? JSON.parse(items) : [];
} catch (error) {
console.error('Error loading items:', error);
return [];
}
}
loadArchivedItems() {
try {
const archived = typeof GM_getValue !== 'undefined' ?
GM_getValue(CONFIG.STORAGE_KEY + '_archived') :
localStorage.getItem(CONFIG.STORAGE_KEY + '_archived');
return archived ? JSON.parse(archived) : [];
} catch (error) {
console.error('Error loading archived items:', error);
return [];
}
}
saveItems() {
try {
const itemsJSON = JSON.stringify(this.items);
if (typeof GM_setValue !== 'undefined') {
GM_setValue(CONFIG.STORAGE_KEY, itemsJSON);
} else {
localStorage.setItem(CONFIG.STORAGE_KEY, itemsJSON);
}
} catch (error) {
console.error('Error saving items:', error);
this.showToast('Error saving items');
}
}
saveArchivedItems() {
try {
const archivedJSON = JSON.stringify(this.archivedItems);
if (typeof GM_setValue !== 'undefined') {
GM_setValue(CONFIG.STORAGE_KEY + '_archived', archivedJSON);
} else {
localStorage.setItem(CONFIG.STORAGE_KEY + '_archived', archivedJSON);
}
} catch (error) {
console.error('Error saving archived items:', error);
}
}
setupThemeDetection() {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', (e) => {
this.theme = e.matches ? 'dark' : 'light';
this.updateTheme();
});
}
updateTheme() {
manager.dataset.theme = this.theme;
}
bindEvents() {
toggleBtn.addEventListener('click', () => this.toggle());
manager.querySelector('.clip-close').addEventListener('click', () => this.close());
document.addEventListener('selectionchange', () => {
this.updateSaveButton();
});
manager.querySelector('.clip-save').addEventListener('click', () => {
const selection = window.getSelection().toString().trim();
if (selection) {
this.addItem(selection);
}
});
manager.querySelector('.clip-save-clipboard').addEventListener('click', async () => {
try {
const clipboardText = await navigator.clipboard.readText();
if (clipboardText.trim()) {
this.addItem(clipboardText);
} else {
this.showToast('Clipboard is empty');
}
} catch (err) {
this.showToast('Failed to read clipboard');
console.error('Failed to read clipboard:', err);
}
});
manager.querySelector('.clip-clear-all').addEventListener('click', (e) => {
this.handleClearAll(e.target);
});
manager.querySelector('.clip-search').addEventListener('input', (e) => {
this.searchTerm = e.target.value.toLowerCase();
this.renderItems();
});
document.addEventListener('keydown', (e) => {
if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'C') {
e.preventDefault();
this.toggle();
const selection = window.getSelection().toString().trim();
if (selection) {
this.addItem(selection);
}
}
if (e.key === 'Escape' && this.isOpen) {
this.close();
}
});
const content = manager.querySelector('.clip-content');
content.addEventListener('click', (e) => {
if (e.target.classList.contains('clip-card') ||
e.target.classList.contains('clip-preview') ||
e.target.classList.contains('clip-title-wrapper') ||
e.target.classList.contains('clip-info') ||
e.target.classList.contains('clip-actions') ||
e.target.classList.contains('clip-date')) {
return;
}
const card = e.target.closest('.clip-card');
if (!card) return;
const id = parseInt(card.dataset.id);
if (e.target.classList.contains('clip-edit-icon') || e.target.classList.contains('clip-save-icon')) {
this.toggleEditTitle(id, card);
} else if (e.target.classList.contains('delete')) {
this.removeItem(id);
} else if (e.target.classList.contains('favorite')) {
this.toggleFavorite(id);
} else if (e.target.classList.contains('move-up')) {
e.stopPropagation();
this.moveItem(id, -1);
} else if (e.target.classList.contains('move-down')) {
e.stopPropagation();
this.moveItem(id, 1);
} else if (e.target.classList.contains('copy')) {
const text = card.querySelector('.clip-preview').textContent;
this.copyItem(text);
}
});
}
moveItem(id, direction) {
const index = this.items.findIndex(item => item.id === id);
if (index === -1) return;
const newIndex = index + direction;
if (newIndex < 0 || newIndex >= this.items.length) {
this.showToast('Cannot move item further');
return;
}
const item = this.items[index];
const targetItem = this.items[newIndex];
if ((item.isFavorite && !targetItem.isFavorite) || (!item.isFavorite && targetItem.isFavorite)) {
this.showToast('Cannot move items between favorite and non-favorite sections');
return;
}
this.items.splice(index, 1);
this.items.splice(newIndex, 0, item);
this.saveItems();
this.renderItems();
}
addItem(text) {
const timestamp = Date.now();
const item = {
id: timestamp,
title: `Saved-${timestamp}`,
text: text.trim(),
date: new Date().toISOString(),
isFavorite: false
};
const firstNonFavoriteIdx = this.items.findIndex(i => !i.isFavorite);
this.items.splice(firstNonFavoriteIdx === -1 ? this.items.length : firstNonFavoriteIdx, 0, item);
if (this.items.length > CONFIG.MAX_ITEMS) {
const nonFavoriteItems = this.items.filter(item => !item.isFavorite);
if (nonFavoriteItems.length > 0) {
const itemToArchive = nonFavoriteItems[nonFavoriteItems.length - 1];
this.archivedItems.unshift(itemToArchive);
this.items = this.items.filter(item => item.id !== itemToArchive.id);
this.saveArchivedItems();
}
}
this.saveItems();
this.renderItems();
this.showToast('Item saved to clipboard manager');
}
removeItem(id) {
const removedItem = this.items.find(item => item.id === id);
this.items = this.items.filter(item => item.id !== id);
if (this.archivedItems.length > 0 && this.items.length < CONFIG.MAX_ITEMS) {
const itemToRestore = this.archivedItems.find(item => !item.isFavorite);
if (itemToRestore) {
this.items.push(itemToRestore);
this.archivedItems = this.archivedItems.filter(item => item.id !== itemToRestore.id);
this.saveArchivedItems();
this.showToast('Restored item from archive');
}
}
this.saveItems();
this.renderItems();
this.showToast('Item deleted');
}
toggleFavorite(id) {
const item = this.items.find(item => item.id === id);
if (!item) return;
const favoriteCount = this.items.filter(i => i.isFavorite).length;
if (!item.isFavorite && favoriteCount >= CONFIG.MAX_FAVORITES) {
this.showToast(`Cannot add more than ${CONFIG.MAX_FAVORITES} favorites`);
return;
}
const currentIndex = this.items.indexOf(item);
this.items.splice(currentIndex, 1);
item.isFavorite = !item.isFavorite;
if (item.isFavorite) {
const lastFavoriteIdx = this.items.findLastIndex(i => i.isFavorite);
this.items.splice(lastFavoriteIdx + 1, 0, item);
} else {
const firstNonFavoriteIdx = this.items.findIndex(i => !i.isFavorite);
this.items.splice(firstNonFavoriteIdx === -1 ? this.items.length : firstNonFavoriteIdx, 0, item);
}
this.saveItems();
this.renderItems();
this.showToast(item.isFavorite ? 'Added to favorites' : 'Removed from favorites');
}
async copyItem(text) {
try {
await navigator.clipboard.writeText(text);
this.showToast('Copied to clipboard');
} catch (err) {
this.showToast('Failed to copy text');
console.error('Failed to copy text:', err);
}
}
handleClearAll(button) {
if (button.classList.contains('confirm')) {
this.items = [];
this.archivedItems = [];
this.saveItems();
this.saveArchivedItems();
this.renderItems();
this.showToast('All items cleared');
button.textContent = 'Clear All';
button.classList.remove('confirm');
if (this.clearAllTimeout) {
clearTimeout(this.clearAllTimeout);
this.clearAllTimeout = null;
}
} else {
button.textContent = 'Confirm Clear?';
button.classList.add('confirm');
if (this.clearAllTimeout) {
clearTimeout(this.clearAllTimeout);
}
this.clearAllTimeout = setTimeout(() => {
button.textContent = 'Clear All';
button.classList.remove('confirm');
this.clearAllTimeout = null;
}, CONFIG.CONFIRM_TIMEOUT);
}
}
updateSaveButton() {
const saveBtn = manager.querySelector('.clip-save');
if (!saveBtn) return;
const selection = window.getSelection();
const hasSelection = selection && selection.toString().trim().length > 0;
saveBtn.disabled = !hasSelection;
}
toggle() {
this.isOpen = !this.isOpen;
manager.classList.toggle('open');
toggleBtn.classList.toggle('hidden');
}
close() {
this.isOpen = false;
manager.classList.remove('open');
toggleBtn.classList.remove('hidden');
}
showToast(message) {
const existingToast = document.querySelector('.clip-toast');
if (existingToast) {
existingToast.remove();
}
const toast = document.createElement('div');
toast.className = 'clip-toast';
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => toast.remove(), CONFIG.TOAST_DURATION);
}
toggleEditTitle(id, card) {
const titleDisplay = card.querySelector('.clip-title-display');
const editIcon = card.querySelector('.clip-edit-icon');
const saveIcon = card.querySelector('.clip-save-icon');
if (!titleDisplay.contentEditable || titleDisplay.contentEditable === 'false') {
card.classList.add('editing');
titleDisplay.contentEditable = 'true';
titleDisplay.focus();
const range = document.createRange();
range.selectNodeContents(titleDisplay);
range.collapse(false);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
editIcon.style.display = 'none';
saveIcon.style.display = 'inline-block';
titleDisplay.addEventListener('input', function() {
if (this.textContent.length > 32) {
this.textContent = this.textContent.slice(0, 32);
const range = document.createRange();
range.selectNodeContents(this);
range.collapse(false);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
});
} else {
const newTitle = titleDisplay.textContent.trim();
if (!newTitle) {
this.showToast('Title cannot be blank');
return;
}
card.classList.remove('editing');
const item = this.items.find(item => item.id === id);
if (item) {
item.title = newTitle;
this.saveItems();
}
titleDisplay.contentEditable = 'false';
editIcon.style.display = 'inline-block';
saveIcon.style.display = 'none';
}
}
renderItems() {
const content = manager.querySelector('.clip-content');
content.innerHTML = '';
const filteredItems = this.items
.filter(item => {
const searchMatch = (
item.title.toLowerCase().includes(this.searchTerm) ||
item.text.toLowerCase().includes(this.searchTerm)
);
return searchMatch;
})
.sort((a, b) => b.isFavorite - a.isFavorite);
if (filteredItems.length === 0) {
content.innerHTML = `
<div class="clip-empty">
${this.searchTerm ? 'No matching items found' : 'No items saved yet'}
</div>`;
return;
}
content.innerHTML = filteredItems.map(item => `
<div class="clip-card ${item.isFavorite ? 'favorite' : ''}" data-id="${item.id}">
<div class="clip-title-wrapper">
<button class="clip-edit-icon">✎</button>
<div class="clip-title-display">${item.title}</div>
<button class="clip-save-icon" style="display:none;">💾</button>
</div>
<div class="clip-preview">${item.text}</div>
<div class="clip-info">
<span class="clip-date">${new Date(item.date).toLocaleDateString()}</span>
</div>
<div class="clip-actions">
<button class="clip-btn favorite">${item.isFavorite ? '★' : '☆'}</button>
<button class="clip-btn copy">Copy</button>
<button class="clip-btn delete">Delete</button>
<button class="clip-btn move-up">↑</button>
<button class="clip-btn move-down">↓</button>
</div>
</div>
`).join('');
if (this.archivedItems.length > 0) {
const archivedCounter = document.createElement('div');
archivedCounter.className = 'clip-archived-counter';
archivedCounter.innerHTML = `
<div class="archived-line"></div>
<span><strong>${this.archivedItems.length}</strong> items in archive</span>
`;
content.appendChild(archivedCounter);
}
}
}
window.clipManager = new ClipboardManager();
})();