Fixed memory leaks, crash issues, added image editor support, and prompt history.
目前為
// ==UserScript==
// @name Grok Auto-Retry + Prompt Snippets + History (v17.0)
// @namespace http://tampermonkey.net/
// @version 22
// @description Fixed memory leaks, crash issues, added image editor support, and prompt history.
// @author You
// @license MIT
// @match https://grok.com/*
// @match https://*.grok.com/*
// @match https://grok.x.ai/*
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
(function() {
'use strict';
// --- CONFIGURATION ---
const TARGET_TEXTAREA_SELECTOR = 'textarea[aria-label="Make a video"]';
const IMAGE_EDITOR_SELECTOR = 'textarea[aria-label="Type to edit image..."]';
const RETRY_BUTTON_SELECTOR = 'button[aria-label="Make video"]';
const IMAGE_EDITOR_BUTTON_SELECTOR = 'button[aria-label="Generate"]';
const MODERATION_TEXT = "Content Moderated. Try a different idea.";
const RETRY_DELAY_MS = 1000;
const COOLDOWN_MS = 2000;
const OBSERVER_THROTTLE_MS = 500;
const MAX_HISTORY_ITEMS = 50;
// --- DEFAULT SNIPPETS ---
const DEFAULT_SNIPPETS = [
{
id: 'b1', label: 'Anime Stickers (Provocative)',
text: 'Surrounding the central image: thick decorative border made of overlapping colorful anime-style stickers featuring nude anime girls with exaggerated proportions in various provocative poses. Each sticker has a white outline and slight drop shadow. The stickers completely frame all four edges of the image with some overlap into the main content.'
},
{
id: 'b2', label: 'Anime Stickers (SFW)',
text: 'Surrounding the central image: thick decorative border made of overlapping colorful anime-style stickers featuring anime girls with exaggerated proportions in various poses. Each sticker has a white outline and slight drop shadow. The stickers completely frame all four edges of the image with some overlap into the main content.'
},
{ id: '1', label: 'Motion: Slow Mo', text: 'slow motion, high frame rate, smooth movement' },
{ id: '2', label: 'Style: Photorealistic', text: 'photorealistic, 8k resolution, highly detailed, unreal engine 5 render' },
{ id: '3', label: 'Lighting: Golden Hour', text: 'golden hour lighting, warm sun rays, lens flare, soft shadows' },
];
// --- LOAD SAVED SETTINGS ---
let maxRetries = GM_getValue('maxRetries', 5);
let uiToggleKey = GM_getValue('uiToggleKey', 'h');
let autoClickEnabled = GM_getValue('autoClickEnabled', true);
let isUiVisible = GM_getValue('isUiVisible', true);
let savedSnippets = GM_getValue('savedSnippets', DEFAULT_SNIPPETS);
let promptHistory = GM_getValue('promptHistory', []);
let panelSize = GM_getValue('panelSize', { width: '300px', height: '400px' });
let isRetryEnabled = true;
let limitReached = false;
let currentRetryCount = 0;
let lastTypedPrompt = "";
let lastRetryTimestamp = 0;
let lastGenerationTimestamp = 0;
const GENERATION_COOLDOWN_MS = 3000;
let observerThrottle = false;
let moderationDetected = false;
let processingModeration = false;
// --- STYLES ---
GM_addStyle(`
#grok-control-panel {
position: fixed; bottom: 20px; right: 20px;
width: ${panelSize.width}; height: ${panelSize.height};
min-width: 280px; min-height: 250px; max-width: 90vw; max-height: 90vh;
background: linear-gradient(145deg, #0a0a0a 0%, #1a1a1a 100%);
border: 1px solid #2a2a2a;
border-radius: 16px;
padding: 15px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: #e0e0e0;
z-index: 99998;
box-shadow: 0 8px 32px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.05);
display: flex;
flex-direction: column;
gap: 10px;
}
#grok-control-panel.hidden { display: none; }
#grok-resize-handle {
position: absolute; top: 0; left: 0; width: 15px; height: 15px;
cursor: nwse-resize; z-index: 99999;
}
#grok-resize-handle::after {
content: ''; position: absolute; top: 2px; left: 2px;
border-top: 6px solid #3b82f6; border-right: 6px solid transparent;
width: 0; height: 0; opacity: 0.7;
}
#grok-resize-handle:hover::after { opacity: 1; border-top-color: #60a5fa; }
.grok-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
margin-left: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #2a2a2a;
}
.grok-title {
font-weight: bold;
font-size: 14px;
color: #f0f0f0;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.grok-toggle-btn {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
border: none;
color: white;
padding: 6px 14px;
border-radius: 20px;
font-size: 11px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
transition: all 0.2s ease;
}
.grok-toggle-btn:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.6);
}
.grok-toggle-btn.off {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}
.grok-toggle-btn.off:hover {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.6);
}
.grok-controls {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: #9ca3af;
flex-shrink: 0;
padding: 8px 0;
}
.grok-checkbox {
display: flex;
align-items: center;
cursor: pointer;
color: #d1d5db;
}
.grok-checkbox input {
margin-right: 6px;
cursor: pointer;
accent-color: #3b82f6;
}
.grok-num-input {
width: 40px;
background: #1f1f1f;
border: 1px solid #2a2a2a;
color: #e0e0e0;
border-radius: 6px;
padding: 4px 6px;
text-align: center;
transition: all 0.2s ease;
}
.grok-num-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.grok-prompt-label {
font-size: 11px;
font-weight: bold;
color: #9ca3af;
margin-bottom: -5px;
flex-shrink: 0;
}
#grok-panel-prompt {
width: 100%;
flex-grow: 1;
background: #0f0f0f;
border: 1px solid #2a2a2a;
border-radius: 8px;
color: #e0e0e0;
padding: 10px;
font-size: 12px;
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
resize: none;
box-sizing: border-box;
transition: all 0.2s ease;
}
#grok-panel-prompt:focus {
border-color: #3b82f6;
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
#grok-panel-prompt::placeholder {
color: #4b5563;
}
.grok-btn-row {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.grok-action-btn {
flex: 1;
padding: 10px;
border-radius: 8px;
border: none;
cursor: pointer;
font-weight: 600;
font-size: 12px;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.grok-action-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: left 0.5s;
}
.grok-action-btn:hover::before {
left: 100%;
}
#btn-open-library {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: white;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
#btn-open-library:hover {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.5);
transform: translateY(-1px);
}
#btn-open-history {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
color: white;
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}
#btn-open-history:hover {
background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.5);
transform: translateY(-1px);
}
#btn-generate {
background: linear-gradient(135deg, #1f1f1f 0%, #2a2a2a 100%);
color: #e0e0e0;
border: 1px solid #3a3a3a;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
#btn-generate:hover {
background: linear-gradient(135deg, #2a2a2a 0%, #353535 100%);
border-color: #4a4a4a;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
transform: translateY(-1px);
}
#grok-status {
text-align: center;
font-size: 11px;
color: #10b981;
padding-top: 8px;
border-top: 1px solid #2a2a2a;
flex-shrink: 0;
font-weight: 500;
}
.status-error {
color: #ef4444 !important;
}
/* Modal Styles */
.grok-modal {
position: fixed;
right: 20px;
width: 350px;
height: 400px;
background: linear-gradient(145deg, #0a0a0a 0%, #1a1a1a 100%);
border: 1px solid #2a2a2a;
border-radius: 16px;
display: none;
flex-direction: column;
z-index: 99999;
box-shadow: 0 8px 32px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.05);
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.grok-modal.active { display: flex; }
.gl-header {
padding: 12px 15px;
background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
font-size: 13px;
color: #f0f0f0;
border-bottom: 1px solid #2a2a2a;
border-radius: 16px 16px 0 0;
}
.gl-close {
cursor: pointer;
font-size: 20px;
line-height: 1;
color: #6b7280;
transition: all 0.2s ease;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
}
.gl-close:hover {
color: #f0f0f0;
background: #2a2a2a;
}
.gl-view-list {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.gl-list-content {
overflow-y: auto;
padding: 12px;
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.gl-list-content::-webkit-scrollbar {
width: 8px;
}
.gl-list-content::-webkit-scrollbar-track {
background: #0f0f0f;
}
.gl-list-content::-webkit-scrollbar-thumb {
background: #2a2a2a;
border-radius: 4px;
}
.gl-list-content::-webkit-scrollbar-thumb:hover {
background: #3a3a3a;
}
.gl-item {
background: linear-gradient(135deg, #1a1a1a 0%, #151515 100%);
border: 1px solid #2a2a2a;
padding: 10px;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: #e0e0e0;
transition: all 0.2s ease;
}
.gl-item:hover {
border-color: #3b82f6;
background: linear-gradient(135deg, #1f1f1f 0%, #1a1a1a 100%);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
transform: translateY(-1px);
}
.gl-item-text {
cursor: pointer;
flex: 1;
margin-right: 10px;
}
.gl-item-text b {
display: block;
margin-bottom: 4px;
color: #f0f0f0;
}
.gl-item-text span {
color: #9ca3af;
font-size: 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
}
.gl-item-actions {
display: flex;
gap: 6px;
}
.gl-icon-btn {
background: #1f1f1f;
border: 1px solid #2a2a2a;
cursor: pointer;
font-size: 14px;
color: #9ca3af;
padding: 6px;
border-radius: 6px;
transition: all 0.2s ease;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.gl-icon-btn:hover {
color: #f0f0f0;
background: #2a2a2a;
border-color: #3a3a3a;
transform: scale(1.1);
}
.gl-create-btn {
margin: 12px;
padding: 10px;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
text-align: center;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
font-size: 12px;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
transition: all 0.2s ease;
}
.gl-create-btn:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5);
transform: translateY(-1px);
}
.gl-view-editor {
display: none;
flex-direction: column;
padding: 15px;
height: 100%;
gap: 10px;
}
.gl-view-editor.active { display: flex; }
.gl-input, .gl-textarea {
background: #0f0f0f;
border: 1px solid #2a2a2a;
color: #e0e0e0;
padding: 10px;
border-radius: 8px;
font-size: 12px;
width: 100%;
box-sizing: border-box;
transition: all 0.2s ease;
}
.gl-input:focus, .gl-textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.gl-textarea {
flex-grow: 1;
resize: none;
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}
.gl-editor-buttons {
display: flex;
gap: 10px;
margin-top: auto;
}
.gl-btn {
flex: 1;
padding: 10px;
border-radius: 8px;
border: none;
cursor: pointer;
font-weight: 600;
color: white;
font-size: 12px;
transition: all 0.2s ease;
}
.gl-btn-save {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
.gl-btn-save:hover {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.5);
transform: translateY(-1px);
}
.gl-btn-cancel {
background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
box-shadow: 0 2px 8px rgba(55, 65, 81, 0.3);
}
.gl-btn-cancel:hover {
background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
box-shadow: 0 4px 12px rgba(55, 65, 81, 0.5);
transform: translateY(-1px);
}
/* History Specific Styles */
.history-item-time {
font-size: 9px;
color: #6b7280;
margin-top: 3px;
}
.history-clear-btn {
margin: 12px;
padding: 10px;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
text-align: center;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
font-size: 12px;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
transition: all 0.2s ease;
}
.history-clear-btn:hover {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
transform: translateY(-1px);
}
`);
// --- DOM CREATION ---
const panel = document.createElement('div');
panel.id = 'grok-control-panel';
if (!isUiVisible) panel.classList.add('hidden');
panel.innerHTML = `
<div id="grok-resize-handle" title="Drag to Resize"></div>
<div class="grok-header">
<span class="grok-title">Grok Tools v17.0</span>
<button id="grok-toggle-btn" class="grok-toggle-btn">ON</button>
</div>
<div class="grok-controls">
<label class="grok-checkbox">
<input type="checkbox" id="grok-autoclick-cb" ${autoClickEnabled ? 'checked' : ''}> Auto-Retry
</label>
<div>
Max: <input type="number" id="grok-retry-limit" value="${maxRetries}" class="grok-num-input" min="1">
</div>
</div>
<div class="grok-prompt-label">Prompt Editor</div>
<textarea id="grok-panel-prompt" placeholder="Type or paste prompt here..."></textarea>
<div class="grok-btn-row">
<button id="btn-open-library" class="grok-action-btn">Snippets</button>
<button id="btn-open-history" class="grok-action-btn">History</button>
<button id="btn-generate" class="grok-action-btn">Generate</button>
</div>
<div id="grok-status">Ready</div>
<div style="font-size:9px; color:#555; text-align:center;">Hide: Alt+${uiToggleKey.toUpperCase()}</div>
`;
document.body.appendChild(panel);
// --- LIBRARY MODAL ---
const modal = document.createElement('div');
modal.id = 'grok-library-modal';
modal.className = 'grok-modal';
modal.innerHTML = `
<div class="gl-header"><span>Snippets Library</span><span class="gl-close">×</span></div>
<div class="gl-view-list" id="gl-view-list">
<div class="gl-list-content" id="gl-list-container"></div>
<div class="gl-create-btn" id="btn-create-snippet">Create New Snippet</div>
</div>
<div class="gl-view-editor" id="gl-view-editor">
<label style="font-size:11px; color:#8b98a5;">Label</label>
<input type="text" class="gl-input" id="gl-edit-label" placeholder="e.g. Cinematic Lighting">
<label style="font-size:11px; color:#8b98a5;">Prompt Text</label>
<textarea class="gl-textarea" id="gl-edit-text" placeholder="Content to append..."></textarea>
<div class="gl-editor-buttons">
<button class="gl-btn gl-btn-cancel" id="btn-edit-cancel">Cancel</button>
<button class="gl-btn gl-btn-save" id="btn-edit-save">Save Snippet</button>
</div>
</div>
`;
document.body.appendChild(modal);
// --- HISTORY MODAL ---
const historyModal = document.createElement('div');
historyModal.id = 'grok-history-modal';
historyModal.className = 'grok-modal';
historyModal.innerHTML = `
<div class="gl-header"><span>Prompt History</span><span class="gl-close history-close">×</span></div>
<div class="gl-view-list">
<div class="gl-list-content" id="history-list-container"></div>
<div class="history-clear-btn" id="btn-clear-history">Clear All History</div>
</div>
`;
document.body.appendChild(historyModal);
// --- RESIZE LOGIC ---
const resizeHandle = document.getElementById('grok-resize-handle');
let isResizing = false;
let startX, startY, startWidth, startHeight;
function updateModalPosition() {
const pHeight = panel.offsetHeight;
const bottom = (20 + pHeight + 10) + 'px';
modal.style.bottom = bottom;
historyModal.style.bottom = bottom;
}
resizeHandle.addEventListener('mousedown', (e) => {
isResizing = true;
startX = e.clientX;
startY = e.clientY;
const rect = panel.getBoundingClientRect();
startWidth = rect.width;
startHeight = rect.height;
e.preventDefault();
document.body.style.cursor = 'nwse-resize';
});
document.addEventListener('mousemove', (e) => {
if (!isResizing) return;
const deltaX = startX - e.clientX;
const deltaY = startY - e.clientY;
const newWidth = Math.max(280, startWidth + deltaX);
const newHeight = Math.max(250, startHeight + deltaY);
panel.style.width = newWidth + 'px';
panel.style.height = newHeight + 'px';
updateModalPosition();
});
document.addEventListener('mouseup', () => {
if (isResizing) {
isResizing = false;
document.body.style.cursor = '';
const rect = panel.getBoundingClientRect();
GM_setValue('panelSize', { width: rect.width + 'px', height: rect.height + 'px' });
updateModalPosition();
}
});
// --- REFS ---
const toggleBtn = document.getElementById('grok-toggle-btn');
const autoClickCb = document.getElementById('grok-autoclick-cb');
const limitInput = document.getElementById('grok-retry-limit');
const statusText = document.getElementById('grok-status');
const promptBox = document.getElementById('grok-panel-prompt');
const openLibBtn = document.getElementById('btn-open-library');
const openHistoryBtn = document.getElementById('btn-open-history');
const generateBtn = document.getElementById('btn-generate');
const modalEl = document.getElementById('grok-library-modal');
const historyModalEl = document.getElementById('grok-history-modal');
const listContainer = document.getElementById('gl-list-container');
const historyListContainer = document.getElementById('history-list-container');
const createBtn = document.getElementById('btn-create-snippet');
const clearHistoryBtn = document.getElementById('btn-clear-history');
const editLabel = document.getElementById('gl-edit-label');
const editText = document.getElementById('gl-edit-text');
let editingId = null;
// --- HELPER FUNCTIONS ---
function nativeValueSet(el, value) {
const setter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;
setter.call(el, value);
el.dispatchEvent(new Event('input', { bubbles: true }));
}
function resetState(msg) {
limitReached = false;
currentRetryCount = 0;
moderationDetected = false;
processingModeration = false;
updateStatus(msg);
}
function updateStatus(msg, type) {
statusText.textContent = msg;
statusText.className = type === 'error' ? 'status-error' : '';
}
function addToHistory(prompt) {
if (!prompt || !prompt.trim()) return;
// Remove duplicates
promptHistory = promptHistory.filter(item => item.text !== prompt);
// Add to beginning
promptHistory.unshift({
id: Date.now().toString(),
text: prompt,
timestamp: Date.now()
});
// Limit history size
if (promptHistory.length > MAX_HISTORY_ITEMS) {
promptHistory = promptHistory.slice(0, MAX_HISTORY_ITEMS);
}
GM_setValue('promptHistory', promptHistory);
}
function formatTimestamp(timestamp) {
const date = new Date(timestamp);
const now = new Date();
const diff = now - date;
// Less than 1 minute
if (diff < 60000) return 'Just now';
// Less than 1 hour
if (diff < 3600000) {
const mins = Math.floor(diff / 60000);
return `${mins} minute${mins > 1 ? 's' : ''} ago`;
}
// Less than 1 day
if (diff < 86400000) {
const hours = Math.floor(diff / 3600000);
return `${hours} hour${hours > 1 ? 's' : ''} ago`;
}
// Show date
return date.toLocaleDateString();
}
// --- PROMPT SYNC: Panel -> Grok ---
promptBox.addEventListener('input', () => {
const grokTA = document.querySelector(TARGET_TEXTAREA_SELECTOR) ||
document.querySelector(IMAGE_EDITOR_SELECTOR);
if (grokTA) {
lastTypedPrompt = promptBox.value;
nativeValueSet(grokTA, lastTypedPrompt);
resetState("Ready");
}
});
// --- PROMPT SYNC: Grok -> Panel ---
document.addEventListener('input', (e) => {
if (e.target.matches(TARGET_TEXTAREA_SELECTOR) ||
e.target.matches(IMAGE_EDITOR_SELECTOR)) {
const val = e.target.value;
if (val !== promptBox.value) {
promptBox.value = val;
lastTypedPrompt = val;
}
if (val.trim()) resetState("Ready");
}
}, { capture: true, passive: true });
// --- MANUAL GENERATE ---
generateBtn.addEventListener('click', () => {
const grokTA = document.querySelector(TARGET_TEXTAREA_SELECTOR) ||
document.querySelector(IMAGE_EDITOR_SELECTOR);
const realBtn = document.querySelector(RETRY_BUTTON_SELECTOR) ||
document.querySelector(IMAGE_EDITOR_BUTTON_SELECTOR);
if (!grokTA || !realBtn) {
updateStatus("Grok elements not found!", "error");
return;
}
const now = Date.now();
if (now - lastGenerationTimestamp < GENERATION_COOLDOWN_MS) {
const remaining = Math.ceil((GENERATION_COOLDOWN_MS - (now - lastGenerationTimestamp)) / 1000);
updateStatus(`Cooldown: ${remaining}s remaining`, "error");
return;
}
const promptToGenerate = promptBox.value.trim();
if (promptToGenerate) {
addToHistory(promptToGenerate);
}
nativeValueSet(grokTA, promptBox.value);
setTimeout(() => {
if (!realBtn.disabled) {
realBtn.click();
lastGenerationTimestamp = Date.now();
updateStatus("Generation Started...");
} else {
updateStatus("Grok button disabled/processing.", "error");
}
}, 50);
});
// --- HISTORY MODAL LOGIC ---
function renderHistory() {
historyListContainer.innerHTML = '';
if (promptHistory.length === 0) {
historyListContainer.innerHTML = '<div style="text-align:center; padding:20px; color:#555;">No history yet</div>';
return;
}
promptHistory.forEach(item => {
const el = document.createElement('div');
el.className = 'gl-item';
const preview = item.text.length > 100 ? item.text.substring(0, 100) + '...' : item.text;
el.innerHTML = `
<div class="gl-item-text">
<span>${escapeHtml(preview)}</span>
<div class="history-item-time">${formatTimestamp(item.timestamp)}</div>
</div>
<div class="gl-item-actions">
<button class="gl-icon-btn history-btn-del" title="Delete">🗑</button>
</div>`;
el.querySelector('.gl-item-text').addEventListener('click', () => {
promptBox.value = item.text;
promptBox.dispatchEvent(new Event('input'));
historyModalEl.classList.remove('active');
});
el.querySelector('.history-btn-del').addEventListener('click', (e) => {
e.stopPropagation();
promptHistory = promptHistory.filter(h => h.id !== item.id);
GM_setValue('promptHistory', promptHistory);
renderHistory();
});
historyListContainer.appendChild(el);
});
}
openHistoryBtn.addEventListener('click', () => {
historyModalEl.classList.add('active');
updateModalPosition();
renderHistory();
});
clearHistoryBtn.addEventListener('click', () => {
if (confirm('Clear all prompt history?')) {
promptHistory = [];
GM_setValue('promptHistory', []);
renderHistory();
}
});
historyModal.querySelector('.history-close').addEventListener('click', () => {
historyModalEl.classList.remove('active');
});
// --- SNIPPETS MODAL LOGIC ---
function renderSnippets() {
listContainer.innerHTML = '';
savedSnippets.forEach(item => {
const el = document.createElement('div');
el.className = 'gl-item';
el.innerHTML = `
<div class="gl-item-text"><b>${escapeHtml(item.label)}</b><span>${escapeHtml(item.text)}</span></div>
<div class="gl-item-actions">
<button class="gl-icon-btn gl-btn-edit">✎</button>
<button class="gl-icon-btn gl-btn-del">🗑</button>
</div>`;
el.querySelector('.gl-item-text').addEventListener('click', () => {
const cur = promptBox.value;
promptBox.value = cur + (cur && !cur.endsWith(' ') ? ' ' : '') + item.text;
promptBox.dispatchEvent(new Event('input'));
modalEl.classList.remove('active');
});
el.querySelector('.gl-btn-edit').addEventListener('click', (e) => { e.stopPropagation(); showEditor(item); });
el.querySelector('.gl-btn-del').addEventListener('click', (e) => {
e.stopPropagation();
if (confirm(`Delete "${item.label}"?`)) {
savedSnippets = savedSnippets.filter(s => s.id !== item.id);
GM_setValue('savedSnippets', savedSnippets);
renderSnippets();
}
});
listContainer.appendChild(el);
});
}
function showEditor(item = null) {
document.getElementById('gl-view-list').style.display = 'none';
document.getElementById('gl-view-editor').classList.add('active');
editingId = item ? item.id : null;
editLabel.value = item ? item.label : '';
editText.value = item ? item.text : '';
editText.focus();
}
createBtn.addEventListener('click', () => showEditor(null));
document.getElementById('btn-edit-save').addEventListener('click', () => {
const label = editLabel.value.trim() || 'Untitled';
const text = editText.value.trim();
if (!text) return alert("Empty text");
if (editingId) {
const idx = savedSnippets.findIndex(s => s.id === editingId);
if (idx > -1) {
savedSnippets[idx].label = label;
savedSnippets[idx].text = text;
}
} else {
savedSnippets.push({ id: Date.now().toString(), label, text });
}
GM_setValue('savedSnippets', savedSnippets);
document.getElementById('gl-view-editor').classList.remove('active');
document.getElementById('gl-view-list').style.display = 'flex';
renderSnippets();
});
document.getElementById('btn-edit-cancel').addEventListener('click', () => {
document.getElementById('gl-view-editor').classList.remove('active');
document.getElementById('gl-view-list').style.display = 'flex';
});
openLibBtn.addEventListener('click', () => {
modalEl.classList.add('active');
updateModalPosition();
renderSnippets();
});
modal.querySelector('.gl-close').addEventListener('click', () => modalEl.classList.remove('active'));
function escapeHtml(text) {
return text ? text.replace(/&/g, "&").replace(/</g, "<") : '';
}
// --- TOGGLE BUTTON ---
toggleBtn.addEventListener('click', () => {
isRetryEnabled = !isRetryEnabled;
toggleBtn.textContent = isRetryEnabled ? "ON" : "OFF";
toggleBtn.classList.toggle('off', !isRetryEnabled);
resetState(isRetryEnabled ? "Ready" : "Disabled");
if (!isRetryEnabled) statusText.className = 'status-error';
});
autoClickCb.addEventListener('change', (e) => {
autoClickEnabled = e.target.checked;
GM_setValue('autoClickEnabled', autoClickEnabled);
});
limitInput.addEventListener('change', (e) => {
maxRetries = parseInt(e.target.value);
GM_setValue('maxRetries', maxRetries);
});
// --- MUTATION OBSERVER ---
const observer = new MutationObserver(() => {
if (observerThrottle || !isRetryEnabled || limitReached || processingModeration) return;
observerThrottle = true;
setTimeout(() => { observerThrottle = false; }, OBSERVER_THROTTLE_MS);
const toastContainer = document.querySelector('section[aria-label="Notifications alt+T"]');
if (toastContainer) {
const errorToast = toastContainer.querySelector('li[data-type="error"]');
if (errorToast && !moderationDetected) {
moderationDetected = true;
setTimeout(() => {
try {
if (errorToast && errorToast.parentNode) {
errorToast.parentNode.removeChild(errorToast);
}
} catch (e) { /* Already removed */ }
}, 2000);
}
}
if (moderationDetected && !processingModeration) {
const spans = document.querySelectorAll('span');
let modSpan = null;
for (let i = 0; i < spans.length; i++) {
if (spans[i].textContent.trim() === MODERATION_TEXT) {
modSpan = spans[i];
break;
}
}
if (modSpan) {
processingModeration = true;
const now = Date.now();
setTimeout(() => {
try {
if (modSpan && modSpan.parentElement && modSpan.parentElement.parentNode) {
modSpan.parentElement.parentNode.removeChild(modSpan.parentElement);
}
} catch (e) { /* Already removed */ }
moderationDetected = false;
processingModeration = false;
}, 2000);
if (now - lastRetryTimestamp >= COOLDOWN_MS && now - lastGenerationTimestamp >= GENERATION_COOLDOWN_MS) {
handleRetry(now);
}
}
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: false
});
// --- RETRY HANDLER ---
function handleRetry(now) {
if (now - lastGenerationTimestamp < GENERATION_COOLDOWN_MS) return;
lastRetryTimestamp = now;
const grokTA = document.querySelector(TARGET_TEXTAREA_SELECTOR) ||
document.querySelector(IMAGE_EDITOR_SELECTOR);
const btn = document.querySelector(RETRY_BUTTON_SELECTOR) ||
document.querySelector(IMAGE_EDITOR_BUTTON_SELECTOR);
if (grokTA && lastTypedPrompt) {
nativeValueSet(grokTA, lastTypedPrompt);
if (autoClickEnabled && currentRetryCount >= maxRetries) {
updateStatus("Limit Reached", "error");
limitReached = true;
return;
}
if (autoClickEnabled && btn && !btn.disabled) {
currentRetryCount++;
updateStatus(`Retrying (${currentRetryCount}/${maxRetries})`);
setTimeout(() => {
btn.click();
lastGenerationTimestamp = Date.now();
}, RETRY_DELAY_MS);
}
}
}
// --- KEYBOARD TOGGLE ---
document.addEventListener('keydown', (e) => {
if (e.altKey && e.key.toLowerCase() === uiToggleKey) {
isUiVisible = !isUiVisible;
GM_setValue('isUiVisible', isUiVisible);
panel.classList.toggle('hidden', !isUiVisible);
e.preventDefault();
}
});
// --- CLEANUP ---
window.addEventListener('beforeunload', () => {
observer.disconnect();
});
})();