// ==UserScript== // @name AI Writing Assistant - Grammar, Translation & Expansion // @description Enhance your writing with grammar checking, Hebrew-English translation, and contextual text expansion with Formal-Persuasive and Casual-Everyday tones // @version 1.1.3 // @match https://*/* // @match http://*/* // @icon https://cdn.oaistatic.com/assets/favicon-l4nq08hd.svg // ==/UserScript== (function() { 'use strict'; // ============================================ // CONFIGURATION & CONSTANTS // ============================================ const CONFIG = { tones: { FORMAL: 'Formal-Persuasive', CASUAL: 'Casual-Everyday' }, colors: { background: '#FDFDFD', backgroundAlt: '#F7F8FB', primary: '#3B82F6', textPrimary: '#111827', textSecondary: '#374151', error: '#EF4444', success: '#10B981' }, shortcuts: { commandPalette: 'k', grammar: 'g', translate: 't', expand: 'e' } }; // ============================================ // STATE MANAGEMENT // ============================================ let state = { selectedText: '', selectedElement: null, currentTone: CONFIG.tones.FORMAL, showExplanations: true, history: [], glossary: [] }; // ============================================ // UTILITY FUNCTIONS // ============================================ function detectLanguage(text) { const hebrewPattern = /[\u0590-\u05FF]/; return hebrewPattern.test(text) ? 'he' : 'en'; } function getDefaultToneForPlatform() { const url = window.location.href; if (url.includes('mail.google.com') || url.includes('linkedin.com')) { return CONFIG.tones.FORMAL; } else if (url.includes('web.whatsapp.com')) { return CONFIG.tones.CASUAL; } else if (url.includes('docs.google.com')) { return CONFIG.tones.FORMAL; } return CONFIG.tones.FORMAL; } function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } async function saveToHistory(action, input, output) { const historyItem = { timestamp: Date.now(), action, input, output, tone: state.currentTone }; state.history.unshift(historyItem); if (state.history.length > 50) { state.history = state.history.slice(0, 50); } await GM.setValue('writing_assistant_history', JSON.stringify(state.history)); console.log('Saved to history:', action); } async function loadState() { try { const savedTone = await GM.getValue('writing_assistant_tone', CONFIG.tones.FORMAL); const savedExplanations = await GM.getValue('writing_assistant_explanations', true); const savedHistory = await GM.getValue('writing_assistant_history', '[]'); const savedGlossary = await GM.getValue('writing_assistant_glossary', '[]'); state.currentTone = savedTone; state.showExplanations = savedExplanations; state.history = JSON.parse(savedHistory); state.glossary = JSON.parse(savedGlossary); console.log('State loaded:', state); } catch (error) { console.error('Error loading state:', error); } } // ============================================ // AI FUNCTIONS // ============================================ async function checkGrammar(text) { console.log('Checking grammar for:', text); const prompt = `You are an expert English grammar checker. Analyze the following text and identify ALL grammar, spelling, punctuation, syntax, and word choice errors. Text to check: "${text}" For each error found, provide: 1. The exact error text 2. The suggested correction 3. A brief explanation (10-20 words) 4. The error category (Subject-Verb Agreement, Tense Consistency, Comma Splices, Capitalization, Articles, Spelling, Punctuation, Word Choice, etc.) IMPORTANT RULES: - Never change the meaning of sentences - Preserve proper nouns, brand names, and technical terms - Only suggest corrections for actual errors - Be precise and specific`; try { const result = await RM.aiCall(prompt, { type: 'json_schema', json_schema: { name: 'grammar_check', schema: { type: 'object', properties: { errors: { type: 'array', items: { type: 'object', properties: { errorText: { type: 'string' }, correction: { type: 'string' }, explanation: { type: 'string' }, category: { type: 'string' } }, required: ['errorText', 'correction', 'explanation', 'category'] } }, correctedText: { type: 'string' } }, required: ['errors', 'correctedText'] } } }); await saveToHistory('grammar', text, result.correctedText); return result; } catch (error) { console.error('Grammar check error:', error); throw error; } } async function translateText(text, targetLang = null) { const sourceLang = detectLanguage(text); const target = targetLang || (sourceLang === 'he' ? 'en' : 'he'); console.log(`Translating from ${sourceLang} to ${target}`); const langNames = { he: 'Hebrew', en: 'English' }; const prompt = `Translate the following text from ${langNames[sourceLang]} to ${langNames[target]}. Text: "${text}" Tone: ${state.currentTone} IMPORTANT RULES: - Maintain the ${state.currentTone} tone in the translation - Preserve formatting: paragraphs, lists, emojis - Keep proper nouns, brand names unchanged - Provide an accurate, natural translation - Do NOT expand or rewrite beyond translation`; try { const result = await RM.aiCall(prompt, { type: 'json_schema', json_schema: { name: 'translation', schema: { type: 'object', properties: { translatedText: { type: 'string' }, sourceLang: { type: 'string' }, targetLang: { type: 'string' } }, required: ['translatedText', 'sourceLang', 'targetLang'] } } }); await saveToHistory('translate', text, result.translatedText); return result; } catch (error) { console.error('Translation error:', error); throw error; } } async function expandText(text, mode = 'auto') { console.log('Expanding text:', text, 'Mode:', mode); // Determine expansion mode const wordCount = text.split(/\s+/).length; const isSentence = wordCount < 20 || mode === 'sentence'; let prompt; if (isSentence) { prompt = `Expand the following sentence by adding 1-2 complementary sentences that add value, clarity, or a call-to-action. Original sentence: "${text}" Tone: ${state.currentTone} Guidelines for ${state.currentTone}: ${state.currentTone === CONFIG.tones.FORMAL ? '- Use measured, professional language\n- Active verbs\n- Clear call-to-action\n- Avoid slang' : '- Conversational, friendly style\n- Short and direct\n- Casual but clear'} Provide 2 different variations.`; } else { prompt = `Expand the following paragraph to 80-140 words using this structure: 1. Intent/Purpose 2. Supporting argument 3. Example/Value proposition 4. ${state.currentTone === CONFIG.tones.FORMAL ? 'Professional call-to-action' : 'Direct, friendly message'} Original text: "${text}" Tone: ${state.currentTone} Guidelines for ${state.currentTone}: ${state.currentTone === CONFIG.tones.FORMAL ? '- Professional, persuasive language\n- Structured arguments\n- Clear business value\n- Action-oriented conclusion' : '- Conversational, approachable style\n- Natural flow\n- Relatable examples\n- Friendly closing'} IMPORTANT: - Preserve all facts and key information - Do NOT add false or sensitive data - Maintain key terms and phrases - Provide 2 different variations`; } try { const result = await RM.aiCall(prompt, { type: 'json_schema', json_schema: { name: 'text_expansion', schema: { type: 'object', properties: { variations: { type: 'array', items: { type: 'string' }, minItems: 2, maxItems: 2 }, mode: { type: 'string', enum: ['sentence', 'paragraph'] }, wordCount: { type: 'number' } }, required: ['variations', 'mode'] } } }); await saveToHistory('expand', text, result.variations[0]); return result; } catch (error) { console.error('Expansion error:', error); throw error; } } // ============================================ // UI COMPONENTS // ============================================ function createFloatingToolbar() { const toolbar = document.createElement('div'); toolbar.id = 'writing-assistant-toolbar'; toolbar.style.cssText = ` position: absolute; display: none; background: ${CONFIG.colors.background}; border: 1px solid #E5E7EB; border-radius: 8px; padding: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); z-index: 999999; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; gap: 4px; display: flex; align-items: center; `; const buttons = [ { id: 'grammar', label: 'Grammar', icon: '✓', action: handleGrammarCheck }, { id: 'translate', label: 'Translate', icon: '⇄', action: handleTranslate }, { id: 'expand', label: 'Expand', icon: '↗', action: handleExpand }, { id: 'tone', label: state.currentTone === CONFIG.tones.FORMAL ? 'Formal' : 'Casual', icon: '◐', action: toggleTone } ]; buttons.forEach(btn => { const button = document.createElement('button'); button.id = `wa-btn-${btn.id}`; button.innerHTML = `${btn.icon}${btn.label}`; button.style.cssText = ` background: white; border: 1px solid #E5E7EB; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 13px; color: ${CONFIG.colors.textPrimary}; transition: all 0.2s; white-space: nowrap; `; button.addEventListener('mouseenter', () => { button.style.background = CONFIG.colors.backgroundAlt; button.style.borderColor = CONFIG.colors.primary; }); button.addEventListener('mouseleave', () => { button.style.background = 'white'; button.style.borderColor = '#E5E7EB'; }); button.addEventListener('click', async (e) => { e.preventDefault(); e.stopPropagation(); await btn.action(); }); toolbar.appendChild(button); }); // More menu button const moreBtn = document.createElement('button'); moreBtn.innerHTML = '⋯'; moreBtn.style.cssText = ` background: white; border: 1px solid #E5E7EB; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 16px; color: ${CONFIG.colors.textPrimary}; `; moreBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); showCommandPalette(); }); toolbar.appendChild(moreBtn); document.body.appendChild(toolbar); return toolbar; } function showToolbar(x, y) { const toolbar = document.getElementById('writing-assistant-toolbar'); if (!toolbar) return; toolbar.style.display = 'flex'; toolbar.style.left = `${x}px`; toolbar.style.top = `${y + 10}px`; // Update tone button label const toneBtn = document.getElementById('wa-btn-tone'); if (toneBtn) { toneBtn.innerHTML = `◐${state.currentTone === CONFIG.tones.FORMAL ? 'Formal' : 'Casual'}`; } } function hideToolbar() { const toolbar = document.getElementById('writing-assistant-toolbar'); if (toolbar) { toolbar.style.display = 'none'; } } function createResultModal(title, content, variations = null) { // Remove existing modal const existing = document.getElementById('writing-assistant-modal'); if (existing) existing.remove(); const modal = document.createElement('div'); modal.id = 'writing-assistant-modal'; modal.style.cssText = ` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: ${CONFIG.colors.background}; border-radius: 12px; padding: 24px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); z-index: 1000000; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; `; const titleEl = document.createElement('h3'); titleEl.textContent = title; titleEl.style.cssText = ` margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: ${CONFIG.colors.textPrimary}; `; modal.appendChild(titleEl); if (variations && Array.isArray(variations)) { variations.forEach((variation, index) => { const varContainer = document.createElement('div'); varContainer.style.cssText = ` background: white; border: 1px solid #E5E7EB; border-radius: 8px; padding: 16px; margin-bottom: 12px; `; const varLabel = document.createElement('div'); varLabel.textContent = `Variation ${index + 1}`; varLabel.style.cssText = ` font-size: 12px; font-weight: 600; color: ${CONFIG.colors.textSecondary}; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; `; varContainer.appendChild(varLabel); const varText = document.createElement('div'); varText.textContent = variation; varText.style.cssText = ` color: ${CONFIG.colors.textPrimary}; line-height: 1.6; margin-bottom: 12px; `; varContainer.appendChild(varText); const btnContainer = document.createElement('div'); btnContainer.style.cssText = 'display: flex; gap: 8px;'; const applyBtn = document.createElement('button'); applyBtn.textContent = 'Apply'; applyBtn.style.cssText = ` background: ${CONFIG.colors.primary}; color: white; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-size: 13px; font-weight: 500; `; applyBtn.addEventListener('click', () => { applyText(variation); modal.remove(); removeOverlay(); }); btnContainer.appendChild(applyBtn); const copyBtn = document.createElement('button'); copyBtn.textContent = 'Copy'; copyBtn.style.cssText = ` background: white; color: ${CONFIG.colors.textPrimary}; border: 1px solid #E5E7EB; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-size: 13px; `; copyBtn.addEventListener('click', async () => { await GM.setClipboard(variation); copyBtn.textContent = 'Copied!'; setTimeout(() => copyBtn.textContent = 'Copy', 2000); }); btnContainer.appendChild(copyBtn); varContainer.appendChild(btnContainer); modal.appendChild(varContainer); }); } else { const contentEl = document.createElement('div'); contentEl.style.cssText = ` background: white; border: 1px solid #E5E7EB; border-radius: 8px; padding: 16px; color: ${CONFIG.colors.textPrimary}; line-height: 1.6; margin-bottom: 16px; `; contentEl.textContent = content; modal.appendChild(contentEl); const btnContainer = document.createElement('div'); btnContainer.style.cssText = 'display: flex; gap: 8px; justify-content: flex-end;'; const applyBtn = document.createElement('button'); applyBtn.textContent = 'Apply'; applyBtn.style.cssText = ` background: ${CONFIG.colors.primary}; color: white; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-size: 13px; font-weight: 500; `; applyBtn.addEventListener('click', () => { applyText(content); modal.remove(); removeOverlay(); }); btnContainer.appendChild(applyBtn); const copyBtn = document.createElement('button'); copyBtn.textContent = 'Copy'; copyBtn.style.cssText = ` background: white; color: ${CONFIG.colors.textPrimary}; border: 1px solid #E5E7EB; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-size: 13px; `; copyBtn.addEventListener('click', async () => { await GM.setClipboard(content); copyBtn.textContent = 'Copied!'; setTimeout(() => copyBtn.textContent = 'Copy', 2000); }); btnContainer.appendChild(copyBtn); modal.appendChild(btnContainer); } const closeBtn = document.createElement('button'); closeBtn.textContent = '×'; closeBtn.style.cssText = ` position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 24px; cursor: pointer; color: ${CONFIG.colors.textSecondary}; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; `; closeBtn.addEventListener('click', () => { modal.remove(); removeOverlay(); }); modal.appendChild(closeBtn); createOverlay(); document.body.appendChild(modal); } function createOverlay() { const existing = document.getElementById('writing-assistant-overlay'); if (existing) return; const overlay = document.createElement('div'); overlay.id = 'writing-assistant-overlay'; overlay.style.cssText = ` position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 999999; `; overlay.addEventListener('click', () => { const modal = document.getElementById('writing-assistant-modal'); if (modal) modal.remove(); overlay.remove(); }); document.body.appendChild(overlay); } function removeOverlay() { const overlay = document.getElementById('writing-assistant-overlay'); if (overlay) overlay.remove(); } function showLoadingIndicator(message = 'Processing...') { const existing = document.getElementById('writing-assistant-loading'); if (existing) existing.remove(); const loader = document.createElement('div'); loader.id = 'writing-assistant-loading'; loader.style.cssText = ` position: fixed; top: 20px; right: 20px; background: ${CONFIG.colors.primary}; color: white; padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); z-index: 1000001; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; display: flex; align-items: center; gap: 10px; `; const spinner = document.createElement('div'); spinner.style.cssText = ` width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite; `; const text = document.createElement('span'); text.textContent = message; loader.appendChild(spinner); loader.appendChild(text); document.body.appendChild(loader); // Add animation if (!document.getElementById('writing-assistant-spin-style')) { const style = document.createElement('style'); style.id = 'writing-assistant-spin-style'; style.textContent = ` @keyframes spin { to { transform: rotate(360deg); } } `; document.head.appendChild(style); } } function hideLoadingIndicator() { const loader = document.getElementById('writing-assistant-loading'); if (loader) loader.remove(); } function showCommandPalette() { const existing = document.getElementById('writing-assistant-command-palette'); if (existing) { existing.remove(); removeOverlay(); return; } const palette = document.createElement('div'); palette.id = 'writing-assistant-command-palette'; palette.style.cssText = ` position: fixed; top: 20%; left: 50%; transform: translateX(-50%); background: ${CONFIG.colors.background}; border-radius: 12px; padding: 16px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); z-index: 1000000; width: 500px; max-width: 90%; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; `; const searchInput = document.createElement('input'); searchInput.type = 'text'; searchInput.placeholder = 'Type a command...'; searchInput.style.cssText = ` width: 100%; padding: 12px; border: 1px solid #E5E7EB; border-radius: 8px; font-size: 14px; margin-bottom: 12px; box-sizing: border-box; `; palette.appendChild(searchInput); const commands = [ { label: 'Check Grammar', shortcut: 'Ctrl+G', action: handleGrammarCheck }, { label: 'Translate Text', shortcut: 'Ctrl+T', action: handleTranslate }, { label: 'Expand Text', shortcut: 'Ctrl+E', action: handleExpand }, { label: 'Toggle Tone (Formal ⇄ Casual)', shortcut: '', action: toggleTone }, { label: 'Toggle Explanations', shortcut: '', action: toggleExplanations }, { label: 'View History', shortcut: '', action: showHistory } ]; const commandList = document.createElement('div'); commandList.style.cssText = 'max-height: 400px; overflow-y: auto;'; function renderCommands(filter = '') { commandList.innerHTML = ''; const filtered = commands.filter(cmd => cmd.label.toLowerCase().includes(filter.toLowerCase()) ); filtered.forEach(cmd => { const cmdEl = document.createElement('div'); cmdEl.style.cssText = ` padding: 12px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; `; cmdEl.addEventListener('mouseenter', () => { cmdEl.style.background = CONFIG.colors.backgroundAlt; }); cmdEl.addEventListener('mouseleave', () => { cmdEl.style.background = 'transparent'; }); cmdEl.addEventListener('click', async () => { palette.remove(); removeOverlay(); await cmd.action(); }); const label = document.createElement('span'); label.textContent = cmd.label; label.style.color = CONFIG.colors.textPrimary; cmdEl.appendChild(label); if (cmd.shortcut) { const shortcut = document.createElement('span'); shortcut.textContent = cmd.shortcut; shortcut.style.cssText = ` color: ${CONFIG.colors.textSecondary}; font-size: 12px; background: ${CONFIG.colors.backgroundAlt}; padding: 4px 8px; border-radius: 4px; `; cmdEl.appendChild(shortcut); } commandList.appendChild(cmdEl); }); } renderCommands(); searchInput.addEventListener('input', (e) => { renderCommands(e.target.value); }); palette.appendChild(commandList); createOverlay(); document.body.appendChild(palette); searchInput.focus(); } // ============================================ // ACTION HANDLERS // ============================================ async function handleGrammarCheck() { if (!state.selectedText) { console.log('No text selected for grammar check'); return; } const lang = detectLanguage(state.selectedText); if (lang !== 'en') { createResultModal('Grammar Check', 'Grammar checking is only available for English text.'); return; } try { showLoadingIndicator('Checking grammar...'); const result = await checkGrammar(state.selectedText); hideLoadingIndicator(); if (result.errors.length === 0) { createResultModal('Grammar Check', 'No errors found! Your text looks great.'); } else { // Apply inline highlighting applyInlineGrammarHighlighting(result); } } catch (error) { hideLoadingIndicator(); console.error('Grammar check failed:', error); createResultModal('Error', 'Failed to check grammar. Please try again.'); } } function applyInlineGrammarHighlighting(result) { if (!state.selectedElement) { console.log('No element to apply highlighting to'); createGrammarResultModal(result); return; } const element = state.selectedElement; let originalText = state.selectedText; // Check if element supports rich content const supportsRichContent = element.isContentEditable || element.tagName === 'TEXTAREA' || element.tagName === 'INPUT'; if (!supportsRichContent) { // Fallback to modal view createGrammarResultModal(result); return; } // For contenteditable elements, we can add inline highlighting if (element.isContentEditable) { applyContentEditableHighlighting(element, result); } else { // For textarea/input, show modal with inline preview createGrammarResultModal(result); } } function applyContentEditableHighlighting(element, result) { // Create a wrapper to show highlighted text const selection = window.getSelection(); if (selection.rangeCount === 0) { createGrammarResultModal(result); return; } const range = selection.getRangeAt(0); const originalText = range.toString(); // Build highlighted HTML let highlightedHTML = originalText; let offset = 0; // Sort errors by position in text const sortedErrors = result.errors.sort((a, b) => { const posA = originalText.indexOf(a.errorText); const posB = originalText.indexOf(b.errorText); return posA - posB; }); sortedErrors.forEach((error, index) => { const errorPos = highlightedHTML.indexOf(error.errorText, offset); if (errorPos !== -1) { const errorId = `grammar-error-${Date.now()}-${index}`; const before = highlightedHTML.substring(0, errorPos); const after = highlightedHTML.substring(errorPos + error.errorText.length); const errorSpan = `${error.errorText}`; highlightedHTML = before + errorSpan + after; offset = errorPos + errorSpan.length; // Store error data for click handling setTimeout(() => { const errorElement = document.querySelector(`[data-error-id="${errorId}"]`); if (errorElement) { errorElement.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); showGrammarErrorPopup(e.target, error, result.correctedText); }); } }, 100); } }); // Replace selected text with highlighted version range.deleteContents(); const tempDiv = document.createElement('div'); tempDiv.innerHTML = highlightedHTML; while (tempDiv.firstChild) { range.insertNode(tempDiv.lastChild); } // Show summary notification showNotification(`Found ${result.errors.length} grammar issue${result.errors.length !== 1 ? 's' : ''}. Click on underlined text to fix.`); // Also show the full modal for reference setTimeout(() => { createGrammarResultModal(result); }, 500); } function showGrammarErrorPopup(targetElement, error, correctedFullText) { // Remove existing popup const existingPopup = document.getElementById('grammar-error-popup'); if (existingPopup) existingPopup.remove(); const popup = document.createElement('div'); popup.id = 'grammar-error-popup'; const rect = targetElement.getBoundingClientRect(); popup.style.cssText = ` position: fixed; left: ${rect.left}px; top: ${rect.bottom + 5}px; background: white; border: 1px solid ${CONFIG.colors.error}; border-radius: 8px; padding: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000000; max-width: 300px; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; `; const category = document.createElement('div'); category.textContent = error.category; category.style.cssText = ` font-size: 10px; font-weight: 600; color: ${CONFIG.colors.error}; text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; `; popup.appendChild(category); const errorText = document.createElement('div'); errorText.innerHTML = `${error.errorText} → ${error.correction}`; errorText.style.cssText = ` margin-bottom: 8px; font-size: 13px; `; popup.appendChild(errorText); if (state.showExplanations) { const explanation = document.createElement('div'); explanation.textContent = error.explanation; explanation.style.cssText = ` font-size: 12px; color: ${CONFIG.colors.textSecondary}; margin-bottom: 10px; font-style: italic; `; popup.appendChild(explanation); } const btnContainer = document.createElement('div'); btnContainer.style.cssText = 'display: flex; gap: 6px;'; const fixBtn = document.createElement('button'); fixBtn.textContent = 'Fix'; fixBtn.style.cssText = ` background: ${CONFIG.colors.primary}; color: white; border: none; border-radius: 4px; padding: 6px 12px; cursor: pointer; font-size: 12px; font-weight: 500; `; fixBtn.addEventListener('click', () => { targetElement.textContent = error.correction; targetElement.style.textDecoration = 'none'; targetElement.style.backgroundColor = 'transparent'; targetElement.classList.remove('grammar-error'); popup.remove(); showNotification('Error fixed!'); }); btnContainer.appendChild(fixBtn); const ignoreBtn = document.createElement('button'); ignoreBtn.textContent = 'Ignore'; ignoreBtn.style.cssText = ` background: white; color: ${CONFIG.colors.textPrimary}; border: 1px solid #E5E7EB; border-radius: 4px; padding: 6px 12px; cursor: pointer; font-size: 12px; `; ignoreBtn.addEventListener('click', () => { targetElement.style.textDecoration = 'none'; targetElement.style.backgroundColor = 'transparent'; targetElement.classList.remove('grammar-error'); popup.remove(); }); btnContainer.appendChild(ignoreBtn); popup.appendChild(btnContainer); document.body.appendChild(popup); // Close popup when clicking outside setTimeout(() => { document.addEventListener('click', function closePopup(e) { if (!popup.contains(e.target) && e.target !== targetElement) { popup.remove(); document.removeEventListener('click', closePopup); } }); }, 100); } function createGrammarResultModal(result) { const existing = document.getElementById('writing-assistant-modal'); if (existing) existing.remove(); const modal = document.createElement('div'); modal.id = 'writing-assistant-modal'; modal.style.cssText = ` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: ${CONFIG.colors.background}; border-radius: 12px; padding: 24px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); z-index: 1000000; max-width: 700px; width: 90%; max-height: 80vh; overflow-y: auto; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; `; const title = document.createElement('h3'); title.textContent = `Grammar Check - ${result.errors.length} issue${result.errors.length !== 1 ? 's' : ''} found`; title.style.cssText = ` margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: ${CONFIG.colors.textPrimary}; `; modal.appendChild(title); result.errors.forEach((error, index) => { const errorEl = document.createElement('div'); errorEl.style.cssText = ` background: white; border: 1px solid #E5E7EB; border-left: 3px solid ${CONFIG.colors.error}; border-radius: 8px; padding: 16px; margin-bottom: 12px; `; const category = document.createElement('div'); category.textContent = error.category; category.style.cssText = ` font-size: 11px; font-weight: 600; color: ${CONFIG.colors.error}; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; `; errorEl.appendChild(category); const errorText = document.createElement('div'); errorText.innerHTML = `${error.errorText} → ${error.correction}`; errorText.style.cssText = ` margin-bottom: 8px; font-size: 14px; `; errorEl.appendChild(errorText); if (state.showExplanations) { const explanation = document.createElement('div'); explanation.textContent = error.explanation; explanation.style.cssText = ` font-size: 13px; color: ${CONFIG.colors.textSecondary}; font-style: italic; `; errorEl.appendChild(explanation); } modal.appendChild(errorEl); }); const btnContainer = document.createElement('div'); btnContainer.style.cssText = 'display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px;'; const applyAllBtn = document.createElement('button'); applyAllBtn.textContent = 'Apply All'; applyAllBtn.style.cssText = ` background: ${CONFIG.colors.primary}; color: white; border: none; border-radius: 6px; padding: 10px 20px; cursor: pointer; font-size: 14px; font-weight: 500; `; applyAllBtn.addEventListener('click', () => { applyText(result.correctedText); modal.remove(); removeOverlay(); }); btnContainer.appendChild(applyAllBtn); const copyBtn = document.createElement('button'); copyBtn.textContent = 'Copy Corrected'; copyBtn.style.cssText = ` background: white; color: ${CONFIG.colors.textPrimary}; border: 1px solid #E5E7EB; border-radius: 6px; padding: 10px 20px; cursor: pointer; font-size: 14px; `; copyBtn.addEventListener('click', async () => { await GM.setClipboard(result.correctedText); copyBtn.textContent = 'Copied!'; setTimeout(() => copyBtn.textContent = 'Copy Corrected', 2000); }); btnContainer.appendChild(copyBtn); modal.appendChild(btnContainer); const closeBtn = document.createElement('button'); closeBtn.textContent = '×'; closeBtn.style.cssText = ` position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 24px; cursor: pointer; color: ${CONFIG.colors.textSecondary}; `; closeBtn.addEventListener('click', () => { modal.remove(); removeOverlay(); }); modal.appendChild(closeBtn); createOverlay(); document.body.appendChild(modal); } async function handleTranslate() { if (!state.selectedText) { console.log('No text selected for translation'); return; } try { showLoadingIndicator('Translating...'); const result = await translateText(state.selectedText); hideLoadingIndicator(); createResultModal('Translation', result.translatedText); } catch (error) { hideLoadingIndicator(); console.error('Translation failed:', error); createResultModal('Error', 'Failed to translate. Please try again.'); } } async function handleExpand() { if (!state.selectedText) { console.log('No text selected for expansion'); return; } try { showLoadingIndicator('Expanding text...'); const result = await expandText(state.selectedText); hideLoadingIndicator(); createResultModal('Expanded Text', null, result.variations); } catch (error) { hideLoadingIndicator(); console.error('Expansion failed:', error); createResultModal('Error', 'Failed to expand text. Please try again.'); } } async function toggleTone() { state.currentTone = state.currentTone === CONFIG.tones.FORMAL ? CONFIG.tones.CASUAL : CONFIG.tones.FORMAL; await GM.setValue('writing_assistant_tone', state.currentTone); console.log('Tone switched to:', state.currentTone); // Update toolbar button const toneBtn = document.getElementById('wa-btn-tone'); if (toneBtn) { toneBtn.innerHTML = `◐${state.currentTone === CONFIG.tones.FORMAL ? 'Formal' : 'Casual'}`; } // Show notification showNotification(`Tone: ${state.currentTone}`); } async function toggleExplanations() { state.showExplanations = !state.showExplanations; await GM.setValue('writing_assistant_explanations', state.showExplanations); showNotification(`Explanations: ${state.showExplanations ? 'On' : 'Off'}`); } function showHistory() { if (state.history.length === 0) { createResultModal('History', 'No history yet. Start using the assistant!'); return; } const existing = document.getElementById('writing-assistant-modal'); if (existing) existing.remove(); const modal = document.createElement('div'); modal.id = 'writing-assistant-modal'; modal.style.cssText = ` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: ${CONFIG.colors.background}; border-radius: 12px; padding: 24px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); z-index: 1000000; max-width: 700px; width: 90%; max-height: 80vh; overflow-y: auto; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; `; const title = document.createElement('h3'); title.textContent = 'History'; title.style.cssText = ` margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: ${CONFIG.colors.textPrimary}; `; modal.appendChild(title); state.history.slice(0, 20).forEach(item => { const historyItem = document.createElement('div'); historyItem.style.cssText = ` background: white; border: 1px solid #E5E7EB; border-radius: 8px; padding: 12px; margin-bottom: 8px; `; const header = document.createElement('div'); header.style.cssText = 'display: flex; justify-content: space-between; margin-bottom: 8px;'; const action = document.createElement('span'); action.textContent = item.action.toUpperCase(); action.style.cssText = ` font-size: 11px; font-weight: 600; color: ${CONFIG.colors.primary}; `; header.appendChild(action); const time = document.createElement('span'); time.textContent = new Date(item.timestamp).toLocaleString(); time.style.cssText = ` font-size: 11px; color: ${CONFIG.colors.textSecondary}; `; header.appendChild(time); historyItem.appendChild(header); const output = document.createElement('div'); output.textContent = item.output.substring(0, 100) + (item.output.length > 100 ? '...' : ''); output.style.cssText = ` font-size: 13px; color: ${CONFIG.colors.textPrimary}; `; historyItem.appendChild(output); modal.appendChild(historyItem); }); const closeBtn = document.createElement('button'); closeBtn.textContent = '×'; closeBtn.style.cssText = ` position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 24px; cursor: pointer; color: ${CONFIG.colors.textSecondary}; `; closeBtn.addEventListener('click', () => { modal.remove(); removeOverlay(); }); modal.appendChild(closeBtn); createOverlay(); document.body.appendChild(modal); } function showNotification(message) { const notification = document.createElement('div'); notification.style.cssText = ` position: fixed; bottom: 20px; right: 20px; background: ${CONFIG.colors.textPrimary}; color: white; padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); z-index: 1000001; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; `; notification.textContent = message; document.body.appendChild(notification); setTimeout(() => { notification.remove(); }, 2000); } function applyText(text) { if (!state.selectedElement) { console.log('No element to apply text to'); return; } const element = state.selectedElement; // Handle different input types if (element.tagName === 'TEXTAREA' || element.tagName === 'INPUT') { element.value = text; element.dispatchEvent(new Event('input', { bubbles: true })); } else if (element.isContentEditable) { // For contenteditable elements const selection = window.getSelection(); if (selection.rangeCount > 0) { const range = selection.getRangeAt(0); range.deleteContents(); range.insertNode(document.createTextNode(text)); } else { element.textContent = text; } element.dispatchEvent(new Event('input', { bubbles: true })); } console.log('Text applied successfully'); showNotification('Text applied!'); } // ============================================ // EVENT LISTENERS // ============================================ function setupEventListeners() { // Text selection handler document.addEventListener('mouseup', debounce((e) => { const selection = window.getSelection(); const selectedText = selection.toString().trim(); if (selectedText.length > 0) { state.selectedText = selectedText; state.selectedElement = e.target; const range = selection.getRangeAt(0); const rect = range.getBoundingClientRect(); showToolbar(rect.left + rect.width / 2 - 150, rect.bottom + window.scrollY); console.log('Text selected:', selectedText); } else { hideToolbar(); } }, 200)); // Click outside to hide toolbar document.addEventListener('mousedown', (e) => { const toolbar = document.getElementById('writing-assistant-toolbar'); if (toolbar && !toolbar.contains(e.target)) { const selection = window.getSelection(); if (!selection.toString().trim()) { hideToolbar(); } } }); // Keyboard shortcuts document.addEventListener('keydown', async (e) => { // Command Palette: Ctrl/Cmd + K if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); showCommandPalette(); return; } // Only process other shortcuts if text is selected if (!state.selectedText) return; // Grammar: Ctrl/Cmd + G if ((e.ctrlKey || e.metaKey) && e.key === 'g') { e.preventDefault(); await handleGrammarCheck(); } // Translate: Ctrl/Cmd + T if ((e.ctrlKey || e.metaKey) && e.key === 't') { e.preventDefault(); await handleTranslate(); } // Expand: Ctrl/Cmd + E if ((e.ctrlKey || e.metaKey) && e.key === 'e') { e.preventDefault(); await handleExpand(); } }); console.log('Event listeners setup complete'); } // ============================================ // INITIALIZATION // ============================================ async function init() { console.log('AI Writing Assistant initializing...'); // Load saved state await loadState(); // Set default tone based on platform if (!await GM.getValue('writing_assistant_tone')) { state.currentTone = getDefaultToneForPlatform(); await GM.setValue('writing_assistant_tone', state.currentTone); } // Create UI components createFloatingToolbar(); // Setup event listeners setupEventListeners(); console.log('AI Writing Assistant ready!'); console.log('Current tone:', state.currentTone); console.log('Shortcuts: Ctrl/Cmd+K (Command Palette), Ctrl/Cmd+G (Grammar), Ctrl/Cmd+T (Translate), Ctrl/Cmd+E (Expand)'); } // Start the extension if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();

AI Writing Assistant - Grammar, Translation & Expansion

About