// ==UserScript== // @name X/Twitter Post Screenshot with Preview & Editor // @namespace web.nextbyte.ai // @version 6.5 // @description Adds a download button to X/Twitter posts that captures the post as an image with preview and editing options (separate post and background themes, shadow, border radius, show/hide date, show/hide engagement metrics with authentic icons) with copy to clipboard and download functionality. Automatically converts relative timestamps to full dates in screenshots. Supports multi-image galleries, videos, GIFs, quote tweets, and link cards. // @author NextByte // @match *://x.com/* // @match *://twitter.com/* // @require https://html2canvas.hertzen.com/dist/html2canvas.min.js // @grant none // ==/UserScript== (function() { 'use strict'; console.log('X/Twitter Post Screenshot with Preview & Editor userscript loaded'); // Generate unique ID for off-screen rendering elements (avoids concurrency issues) function generateOffscreenId() { return `x-screenshot-offscreen-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`; } // SVG icon for screenshot button (camera outline style matching Twitter's aesthetic) const screenshotIconSVG = ` `; // Default editor options const defaultEditorOptions = { postTheme: 'light', backgroundTheme: 'soft-purple', borderRadius: 12, shadowIntensity: 'high', showDate: true, showEngagement: false, showQuote: true, showLinkPreview: true }; const SETTINGS_STORAGE_KEY = 'x-screenshot-editor-settings'; // Load settings from localStorage, merging with defaults function loadSettings() { try { const saved = localStorage.getItem(SETTINGS_STORAGE_KEY); if (saved) { const parsed = JSON.parse(saved); // Merge with defaults to handle new options in future versions return { ...defaultEditorOptions, ...parsed }; } } catch (e) { console.warn('Failed to load screenshot settings:', e); } return { ...defaultEditorOptions }; } // Save current settings to localStorage function saveSettings() { try { localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(editorOptions)); } catch (e) { console.warn('Failed to save screenshot settings:', e); } } // Global state for editor options (initialized from storage) let editorOptions = loadSettings(); // Post theme definitions (appearance of the tweet card) const postThemes = { 'light': { name: 'Light Mode', tweetBg: '#ffffff', tweetText: '#0f1419', secondaryText: '#536471', borderColor: '#eff3f4', avatarBorder: '#e1e8ed' }, 'dark': { name: 'Dark Mode', tweetBg: '#000000', tweetText: '#e7e9ea', secondaryText: '#71767b', borderColor: '#2f3336', avatarBorder: '#38444d' }, 'dim': { name: 'Dim Mode', tweetBg: '#15202b', tweetText: '#ffffff', secondaryText: '#8899a6', borderColor: '#38444d', avatarBorder: '#38444d' } }; // Background theme definitions (background around the tweet) const backgroundThemes = { 'soft-purple': { name: 'Soft Purple', background: 'linear-gradient(145deg, #e8e0f0 0%, #d4c4e8 50%, #c9b8e0 100%)', padding: '40px 0' }, 'warm-sunset': { name: 'Warm Sunset', background: 'linear-gradient(160deg, #ffecd2 0%, #fcb69f 100%)', padding: '40px 0' }, 'cool-slate': { name: 'Cool Slate', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', padding: '40px 0' }, 'ocean-breeze': { name: 'Ocean Breeze', background: 'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)', padding: '40px 0' }, 'mesh-aurora': { name: 'Aurora Mesh', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #ffecd2 100%)', padding: '40px 0' }, 'dark-gradient': { name: 'Dark Gradient', background: 'linear-gradient(145deg, #0f0f0f 0%, #1a1a2e 50%, #16213e 100%)', padding: '40px 0' }, 'minimal-light': { name: 'Minimal Light', background: '#f7f9fa', padding: '40px 0' }, 'warm-cream': { name: 'Warm Cream', background: '#faf8f5', padding: '40px 0' }, 'x-black': { name: 'X Black', background: '#000000', padding: '40px 0' }, 'dark-dim': { name: 'Dark Dim', background: '#15202b', padding: '40px 0' }, 'none': { name: 'No Background', background: 'transparent', padding: '0' } }; // Format datetime to readable format (like "8:39 AM · Dec 9, 2025") function formatDateTime(datetimeString) { if (!datetimeString) return ''; const date = new Date(datetimeString); const hours = date.getHours(); const minutes = date.getMinutes(); const ampm = hours >= 12 ? 'PM' : 'AM'; const displayHours = hours % 12 || 12; const displayMinutes = minutes.toString().padStart(2, '0'); const timeStr = `${displayHours}:${displayMinutes} ${ampm}`; const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const month = months[date.getMonth()]; const day = date.getDate(); const year = date.getFullYear(); const dateStr = `${month} ${day}, ${year}`; return `${timeStr} · ${dateStr}`; } // Parse engagement count with K/M abbreviations function parseEngagementCount(text) { if (!text) return null; const cleanText = text.replace(/,/g, '').trim(); const match = cleanText.match(/^([\d.]+)\s*([KMB])?$/i); if (!match) { const numMatch = cleanText.match(/^(\d+)$/); return numMatch ? numMatch[1] : null; } const num = parseFloat(match[1]); const suffix = (match[2] || '').toUpperCase(); if (suffix === 'K') return Math.round(num * 1000).toString(); if (suffix === 'M') return Math.round(num * 1000000).toString(); if (suffix === 'B') return Math.round(num * 1000000000).toString(); return match[1]; } // Format number with K/M abbreviations function formatCount(num) { if (num === null || num === undefined) return null; const n = parseInt(num, 10); if (isNaN(n)) return num; if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, '') + 'M'; if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'K'; return n.toString(); } // Extract media items from article (images, videos, GIFs) // Excludes media inside quote tweets and link cards to avoid duplicates function extractMediaItems(article, quoteContainer) { const mediaItems = []; // Helper to check if element is inside a container we should exclude const isInsideExcluded = (el) => { // Exclude if inside quote container if (quoteContainer && quoteContainer.contains(el)) return true; // Exclude if inside card.wrapper (link cards) if (el.closest('[data-testid="card.wrapper"]')) return true; return false; }; // Find all tweetPhoto images (excluding those in quotes/cards) const photoContainers = article.querySelectorAll('[data-testid="tweetPhoto"]'); photoContainers.forEach(container => { if (isInsideExcluded(container)) return; const img = container.querySelector('img'); if (img && img.src) { // Get highest resolution version let src = img.src; if (src.includes('name=')) { src = src.replace(/name=\w+/, 'name=large'); } mediaItems.push({ type: 'image', src: src, alt: img.alt || '', aspectRatio: null }); } }); // Find video players (excluding those in quotes/cards) const videoPlayers = article.querySelectorAll('[data-testid="videoPlayer"]'); videoPlayers.forEach(player => { if (isInsideExcluded(player)) return; const video = player.querySelector('video'); const posterImg = player.querySelector('img'); if (video || posterImg) { const poster = video?.poster || posterImg?.src || ''; // Check if it's a GIF (usually has GIF label nearby or specific class) const isGif = player.closest('[aria-label*="GIF"]') !== null || player.querySelector('[aria-label*="GIF"]') !== null; // Get duration if available const durationEl = player.querySelector('[aria-label*="of"]'); let duration = null; if (durationEl) { const match = durationEl.textContent?.match(/(\d+:\d+)/); if (match) duration = match[1]; } mediaItems.push({ type: isGif ? 'gif' : 'video', src: poster, poster: poster, duration: duration, alt: '' }); } }); return mediaItems; } // Extract quote tweet data // Returns object with container for exclusion, plus extracted data function extractQuoteTweet(article) { // Quote tweets can be div or anchor with role="link" tabindex="0" // Key identifier: contains User-Name/tweetText inside, often has class r-1kqtdi0 // Search both div and a elements const candidates = article.querySelectorAll('[role="link"][tabindex="0"]'); let quotedTweetContainer = null; for (const candidate of candidates) { // Must have User-Name or tweetText inside (quote tweet content) const userName = candidate.querySelector('[data-testid="User-Name"]'); const tweetText = candidate.querySelector('[data-testid="tweetText"]'); if (!userName && !tweetText) continue; // Must NOT be/contain the main tweet's user avatar area const mainAvatar = article.querySelector(':scope > div [data-testid="Tweet-User-Avatar"]'); if (mainAvatar && candidate.contains(mainAvatar)) continue; // Check if this is the main tweet's User-Name (not inside a quote) // Main tweet User-Name is direct child structure, not wrapped in role="link" const mainUserName = article.querySelector(':scope > div [data-testid="User-Name"]'); if (mainUserName && candidate.contains(mainUserName) && !candidate.classList.contains('r-1kqtdi0')) { continue; } // Additional check: quote containers typically have border styling class r-1kqtdi0 // or are nested deeper in the article structure const hasQuoteClass = candidate.classList.contains('r-1kqtdi0'); const hasNestedTweetText = tweetText && !article.querySelector(':scope > div > div [data-testid="tweetText"]')?.isSameNode(tweetText); if (hasQuoteClass || hasNestedTweetText || (userName && tweetText)) { quotedTweetContainer = candidate; break; } } if (!quotedTweetContainer) return null; const quoteData = { container: quotedTweetContainer }; // Get avatar const avatarImg = quotedTweetContainer.querySelector('[data-testid="Tweet-User-Avatar"] img'); quoteData.avatarSrc = avatarImg ? avatarImg.src : ''; // Get display name - look for first non-handle text in User-Name const userNameEl = quotedTweetContainer.querySelector('[data-testid="User-Name"]'); if (userNameEl) { const nameSpans = userNameEl.querySelectorAll('span'); for (const span of nameSpans) { const text = span.textContent?.trim(); if (text && !text.startsWith('@') && !text.includes('·') && text.length > 0) { quoteData.username = text; break; } } } // Get handle - find span starting with @ const allSpans = quotedTweetContainer.querySelectorAll('span'); for (const span of allSpans) { const text = span.textContent?.trim(); if (text && text.startsWith('@') && !text.includes(' ')) { quoteData.handle = text; break; } } // Get text - clone node to preserve formatting (links, emojis, etc.) const textEl = quotedTweetContainer.querySelector('[data-testid="tweetText"]'); if (textEl) { quoteData.text = textEl.innerText || ''; quoteData.textDiv = textEl.cloneNode(true); } else { quoteData.text = ''; quoteData.textDiv = null; } // Extract ALL media items from quote (not just first) quoteData.mediaItems = []; // Get photos const photoContainers = quotedTweetContainer.querySelectorAll('[data-testid="tweetPhoto"]'); photoContainers.forEach(container => { const img = container.querySelector('img'); if (img && img.src) { let src = img.src; if (src.includes('name=')) { src = src.replace(/name=\w+/, 'name=medium'); } quoteData.mediaItems.push({ type: 'image', src, alt: img.alt || '' }); } }); // Get videos/GIFs const videoPlayers = quotedTweetContainer.querySelectorAll('[data-testid="videoPlayer"]'); videoPlayers.forEach(player => { const video = player.querySelector('video'); const posterImg = player.querySelector('img'); const poster = video?.poster || posterImg?.src || ''; const isGif = player.closest('[aria-label*="GIF"]') !== null || player.querySelector('[aria-label*="GIF"]') !== null; quoteData.mediaItems.push({ type: isGif ? 'gif' : 'video', src: poster, poster: poster, alt: '' }); }); // Legacy single mediaSrc for backward compat quoteData.mediaSrc = quoteData.mediaItems.length > 0 ? quoteData.mediaItems[0].src : ''; return quoteData; } // Extract link card data (excluding cards inside quotes) function extractLinkCard(article, quoteContainer) { // Find card.wrapper that's not inside a quote const cardWrappers = article.querySelectorAll('[data-testid="card.wrapper"]'); let cardWrapper = null; for (const wrapper of cardWrappers) { // Skip if inside quote container if (quoteContainer && quoteContainer.contains(wrapper)) continue; // Skip if inside any role="link" container (likely a quote) const parentLink = wrapper.closest('[role="link"][tabindex="0"]'); if (parentLink && parentLink.querySelector('[data-testid="User-Name"]')) continue; cardWrapper = wrapper; break; } if (!cardWrapper) return null; const cardData = {}; // Get card image - try multiple selectors for different card layouts const cardImg = cardWrapper.querySelector('[data-testid="card.layoutLarge.media"] img') || cardWrapper.querySelector('[data-testid="card.layoutSmall.media"] img') || cardWrapper.querySelector('img'); cardData.imageSrc = cardImg ? cardImg.src : ''; // Get title from aria-label on the main link, or from span inside const mainLink = cardWrapper.querySelector('a[role="link"][aria-label]'); if (mainLink) { const ariaLabel = mainLink.getAttribute('aria-label') || ''; // aria-label format: "domain.com Title of the article" const parts = ariaLabel.split(' '); if (parts.length > 1) { // First part is usually domain, rest is title cardData.title = parts.slice(1).join(' '); } cardData.url = mainLink.href || ''; } // Fallback: get title from span inside the card if (!cardData.title) { const titleSpan = cardWrapper.querySelector('[data-testid="card.layoutLarge.media"] span') || cardWrapper.querySelector('span'); cardData.title = titleSpan ? titleSpan.innerText : ''; } // Get domain from the "From domain.com" link at bottom, or extract from URL const domainLinks = cardWrapper.querySelectorAll('a[role="link"]'); for (const link of domainLinks) { const text = link.textContent?.trim() || ''; if (text.startsWith('From ')) { cardData.domain = text.replace('From ', ''); break; } } // Fallback: extract domain from URL if (!cardData.domain && cardData.url) { try { const urlObj = new URL(cardData.url); cardData.domain = urlObj.hostname.replace('www.', ''); } catch (e) { // Invalid URL } } return cardData; } // Extract post data from article element function extractPostData(article) { const data = {}; // Extract avatar const avatarImg = article.querySelector('div[data-testid="Tweet-User-Avatar"] img'); data.avatarSrc = avatarImg ? avatarImg.src : ''; // Extract username (display name) const usernameSpan = article.querySelector('div[data-testid="User-Name"] div > span'); data.username = usernameSpan ? usernameSpan.innerText : ''; // Extract handle (@username) const handleSpans = article.querySelectorAll('div[data-testid="User-Name"] span'); const handleSpan = Array.from(handleSpans).find(span => span.innerText.startsWith('@')); data.handle = handleSpan ? handleSpan.innerText : ''; // Extract tweet text - clone and get dir attribute for RTL support // Get the MAIN tweet text, not text from quote tweets const allTweetTexts = article.querySelectorAll('div[data-testid="tweetText"]'); let textDiv = null; // Find the first tweetText that's not inside a quote container for (const t of allTweetTexts) { if (!t.closest('div[role="link"][tabindex="0"]')) { textDiv = t; break; } } data.textDiv = textDiv ? textDiv.cloneNode(true) : null; data.textHTML = textDiv ? textDiv.innerHTML : ''; data.textDir = textDiv ? textDiv.getAttribute('dir') || 'auto' : 'auto'; // Extract quote tweet first (need container to exclude from media) const quoteResult = extractQuoteTweet(article); data.quoteTweet = quoteResult; const quoteContainer = quoteResult?.container || null; // Extract all media items (images, videos, GIFs) - excluding quote media data.mediaItems = extractMediaItems(article, quoteContainer); // Keep backward compat: mediaSrc is first image data.mediaSrc = data.mediaItems.length > 0 ? data.mediaItems[0].src : ''; // Extract timestamp const timeElement = article.querySelector('time'); data.timeLinkElement = timeElement ? timeElement.parentNode.cloneNode(true) : null; data.timestamp = timeElement ? timeElement.getAttribute('datetime') : ''; // Extract views count from analytics link const viewsA = article.querySelector('a[href$="/analytics"]'); let viewsText = ''; if (viewsA) { // Find the text content that contains the view count const viewsSpan = viewsA.querySelector('span span'); viewsText = viewsSpan ? viewsSpan.innerText : viewsA.innerText; } data.views = viewsText; // Extract engagement metrics from the group aria-label const engagementGroup = article.querySelector('[role="group"][aria-label]'); data.metrics = {}; if (engagementGroup) { const ariaLabel = engagementGroup.getAttribute('aria-label') || ''; // Parse: "124 replies, 109 reposts, 1192 likes, 43 bookmarks, 96129 views" const replyMatch = ariaLabel.match(/([\d,.]+[KMB]?)\s*repl/i); const repostMatch = ariaLabel.match(/([\d,.]+[KMB]?)\s*repost/i); const likeMatch = ariaLabel.match(/([\d,.]+[KMB]?)\s*like/i); const bookmarkMatch = ariaLabel.match(/([\d,.]+[KMB]?)\s*bookmark/i); const viewMatch = ariaLabel.match(/([\d,.]+[KMB]?)\s*view/i); if (replyMatch) data.metrics.replies = replyMatch[1]; if (repostMatch) data.metrics.retweets = repostMatch[1]; if (likeMatch) data.metrics.likes = likeMatch[1]; if (bookmarkMatch) data.metrics.bookmarks = bookmarkMatch[1]; if (viewMatch && !data.views) data.views = viewMatch[1]; } // Legacy fallback: parse from button aria-labels if (!data.metrics.replies) { const engagementButtons = article.querySelectorAll('[role="group"] [role="button"]'); engagementButtons.forEach(button => { const ariaLabel = button.getAttribute('aria-label'); if (ariaLabel) { const lowerLabel = ariaLabel.toLowerCase(); const countMatch = ariaLabel.match(/^([\d,.]+[KMB]?)/i); const count = countMatch ? countMatch[1] : null; if (count) { if (lowerLabel.includes('repl')) { data.metrics.replies = count; } else if (lowerLabel.includes('repost') || lowerLabel.includes('retweet')) { data.metrics.retweets = count; } else if (lowerLabel.includes('like')) { data.metrics.likes = count; } else if (lowerLabel.includes('bookmark')) { data.metrics.bookmarks = count; } } } }); } // Extract link card (quote was already extracted above) data.linkCard = extractLinkCard(article, quoteContainer); return data; } // Build media gallery HTML for multi-image layouts function createMediaGallery(mediaItems, postTheme, options) { if (!mediaItems || mediaItems.length === 0) return null; const container = document.createElement('div'); container.style.cssText = ` width: 100%; margin-top: 12px; margin-bottom: 16px; border-radius: 16px; overflow: hidden; border: 1px solid ${postTheme.borderColor}; `; const count = mediaItems.length; if (count === 1) { // Single item - preserve full image, no cropping const item = mediaItems[0]; const mediaEl = createMediaElement(item, postTheme, '100%', 'auto'); mediaEl.style.display = 'block'; mediaEl.style.width = '100%'; mediaEl.style.maxHeight = '600px'; // Generous max for tall images mediaEl.style.objectFit = 'contain'; // Preserve full image, no cropping mediaEl.style.background = postTheme.borderColor; // Background for letterboxing container.appendChild(mediaEl); } else if (count === 2) { // Two items side by side - taller tiles container.style.display = 'grid'; container.style.gridTemplateColumns = '1fr 1fr'; container.style.gap = '2px'; container.style.minHeight = '250px'; mediaItems.slice(0, 2).forEach(item => { const mediaEl = createMediaElement(item, postTheme, '100%', '280px'); mediaEl.style.objectFit = 'cover'; container.appendChild(mediaEl); }); } else if (count === 3) { // One large on left, two stacked on right - taller grid container.style.display = 'grid'; container.style.gridTemplateColumns = '1fr 1fr'; container.style.gridTemplateRows = '1fr 1fr'; container.style.gap = '2px'; container.style.height = '400px'; // Increased from 300px const first = createMediaElement(mediaItems[0], postTheme, '100%', '100%'); first.style.gridRow = '1 / 3'; first.style.objectFit = 'cover'; container.appendChild(first); mediaItems.slice(1, 3).forEach(item => { const mediaEl = createMediaElement(item, postTheme, '100%', '100%'); mediaEl.style.objectFit = 'cover'; container.appendChild(mediaEl); }); } else { // 4+ items: 2x2 grid with +N overlay on last - taller grid container.style.display = 'grid'; container.style.gridTemplateColumns = '1fr 1fr'; container.style.gridTemplateRows = '1fr 1fr'; container.style.gap = '2px'; container.style.height = '400px'; // Increased from 300px mediaItems.slice(0, 4).forEach((item, idx) => { if (idx === 3 && count > 4) { // Last item with +N overlay const wrapper = document.createElement('div'); wrapper.style.cssText = 'position: relative; width: 100%; height: 100%;'; const mediaEl = createMediaElement(item, postTheme, '100%', '100%'); mediaEl.style.objectFit = 'cover'; wrapper.appendChild(mediaEl); const overlay = document.createElement('div'); overlay.style.cssText = ` position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: bold; `; overlay.textContent = `+${count - 4}`; wrapper.appendChild(overlay); container.appendChild(wrapper); } else { const mediaEl = createMediaElement(item, postTheme, '100%', '100%'); mediaEl.style.objectFit = 'cover'; container.appendChild(mediaEl); } }); } return container; } // Create individual media element (image or video poster with overlay) function createMediaElement(item, postTheme, width, height) { const wrapper = document.createElement('div'); wrapper.style.cssText = ` position: relative; width: ${width}; height: ${height}; overflow: hidden; background: ${postTheme.borderColor}; `; const mediaSrc = item.src || item.poster || ''; // If no source available, show a placeholder if (!mediaSrc) { const placeholder = document.createElement('div'); placeholder.style.cssText = ` width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: ${postTheme.borderColor}; color: ${postTheme.secondaryText}; `; // Different icon for video/GIF vs image if (item.type === 'video' || item.type === 'gif') { placeholder.innerHTML = ` `; } else { placeholder.innerHTML = ` `; } wrapper.appendChild(placeholder); } else { const img = document.createElement('img'); img.src = mediaSrc; img.crossOrigin = 'anonymous'; img.style.cssText = ` width: 100%; height: 100%; object-fit: cover; display: block; `; if (item.alt) img.alt = item.alt; wrapper.appendChild(img); } // Add overlays for video/GIF if (item.type === 'video' || item.type === 'gif') { const overlay = document.createElement('div'); overlay.style.cssText = ` position: absolute; bottom: 8px; left: 8px; display: flex; align-items: center; gap: 4px; `; if (item.type === 'gif') { // GIF badge const gifBadge = document.createElement('div'); gifBadge.style.cssText = ` background: rgba(0, 0, 0, 0.75); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: bold; `; gifBadge.textContent = 'GIF'; overlay.appendChild(gifBadge); } else if (item.type === 'video') { // Play icon and duration const playIcon = document.createElement('div'); playIcon.style.cssText = ` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background: rgba(0, 0, 0, 0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; `; playIcon.innerHTML = ` `; wrapper.appendChild(playIcon); if (item.duration) { const durationBadge = document.createElement('div'); durationBadge.style.cssText = ` background: rgba(0, 0, 0, 0.75); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500; `; durationBadge.textContent = item.duration; overlay.appendChild(durationBadge); } } wrapper.appendChild(overlay); } // ALT badge if alt text exists if (item.alt && item.type === 'image') { const altBadge = document.createElement('div'); altBadge.style.cssText = ` position: absolute; bottom: 8px; left: 8px; background: rgba(0, 0, 0, 0.75); color: white; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: bold; `; altBadge.textContent = 'ALT'; wrapper.appendChild(altBadge); } return wrapper; } // Create quote tweet card function createQuoteCard(quoteData, postTheme) { const card = document.createElement('div'); card.style.cssText = ` margin-top: 12px; border: 1px solid ${postTheme.borderColor}; border-radius: 16px; padding: 12px; background: ${postTheme.tweetBg}; `; // Header with avatar, name, handle const header = document.createElement('div'); header.style.cssText = ` display: flex; align-items: center; gap: 8px; margin-bottom: 8px; `; if (quoteData.avatarSrc) { const avatar = document.createElement('img'); avatar.src = quoteData.avatarSrc; avatar.crossOrigin = 'anonymous'; avatar.style.cssText = ` width: 20px; height: 20px; border-radius: 50%; `; header.appendChild(avatar); } const userInfo = document.createElement('div'); userInfo.style.cssText = 'display: flex; align-items: center; gap: 4px; flex-wrap: wrap;'; const name = document.createElement('span'); name.textContent = quoteData.username; name.style.cssText = ` font-weight: bold; font-size: 14px; color: ${postTheme.tweetText}; `; userInfo.appendChild(name); const handle = document.createElement('span'); handle.textContent = quoteData.handle; handle.style.cssText = ` font-size: 14px; color: ${postTheme.secondaryText}; `; userInfo.appendChild(handle); header.appendChild(userInfo); card.appendChild(header); // Quote text - use cloned node if available to preserve formatting if (quoteData.textDiv) { const textWrapper = document.createElement('div'); textWrapper.style.cssText = ` font-size: 14px; color: ${postTheme.tweetText}; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; `; const clonedText = quoteData.textDiv.cloneNode(true); // Reset any existing styles and apply theme colors clonedText.style.cssText = `color: ${postTheme.tweetText}; font-size: 14px;`; // Style links within quote clonedText.querySelectorAll('a').forEach(a => { a.style.color = 'rgb(29, 155, 240)'; a.style.textDecoration = 'none'; }); textWrapper.appendChild(clonedText); card.appendChild(textWrapper); } else if (quoteData.text) { const text = document.createElement('div'); text.style.cssText = ` font-size: 14px; color: ${postTheme.tweetText}; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; `; text.textContent = quoteData.text; card.appendChild(text); } // Quote media - support multiple items with type overlays const mediaItems = quoteData.mediaItems || (quoteData.mediaSrc ? [{ type: 'image', src: quoteData.mediaSrc }] : []); if (mediaItems.length > 0) { const mediaContainer = document.createElement('div'); mediaContainer.style.cssText = ` margin-top: 8px; border-radius: 12px; overflow: hidden; display: grid; gap: 2px; `; // Grid layout based on count (simplified for quote - max 2x2) const count = Math.min(mediaItems.length, 4); if (count === 1) { mediaContainer.style.gridTemplateColumns = '1fr'; mediaContainer.style.maxHeight = '250px'; // Single image gets more space } else if (count === 2) { mediaContainer.style.gridTemplateColumns = '1fr 1fr'; mediaContainer.style.height = '140px'; // Two images side by side } else { mediaContainer.style.gridTemplateColumns = '1fr 1fr'; mediaContainer.style.gridTemplateRows = '1fr 1fr'; mediaContainer.style.height = '200px'; // 2x2 grid } mediaItems.slice(0, 4).forEach((item, idx) => { const itemWrapper = document.createElement('div'); itemWrapper.style.cssText = ` position: relative; overflow: hidden; ${count === 1 ? 'max-height: 250px;' : ''} `; const mediaSrc = item.src || item.poster || ''; if (mediaSrc) { const img = document.createElement('img'); img.src = mediaSrc; img.crossOrigin = 'anonymous'; img.style.cssText = ` width: 100%; height: 100%; object-fit: cover; display: block; `; itemWrapper.appendChild(img); } else { // Placeholder for missing media itemWrapper.style.background = postTheme.borderColor; itemWrapper.style.display = 'flex'; itemWrapper.style.alignItems = 'center'; itemWrapper.style.justifyContent = 'center'; itemWrapper.innerHTML = ` `; } // Add type overlay for video/GIF if (item.type === 'gif') { const badge = document.createElement('div'); badge.style.cssText = ` position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.75); color: white; padding: 1px 4px; border-radius: 3px; font-size: 10px; font-weight: bold; `; badge.textContent = 'GIF'; itemWrapper.appendChild(badge); } else if (item.type === 'video') { const playIcon = document.createElement('div'); playIcon.style.cssText = ` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; background: rgba(0,0,0,0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; `; playIcon.innerHTML = ` `; itemWrapper.appendChild(playIcon); } // Show "+N" indicator if more than 4 items if (idx === 3 && mediaItems.length > 4) { const moreOverlay = document.createElement('div'); moreOverlay.style.cssText = ` position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; font-weight: bold; `; moreOverlay.textContent = `+${mediaItems.length - 4}`; itemWrapper.appendChild(moreOverlay); } mediaContainer.appendChild(itemWrapper); }); card.appendChild(mediaContainer); } return card; } // Create link card function createLinkCard(cardData, postTheme) { const card = document.createElement('div'); card.style.cssText = ` margin-top: 12px; border: 1px solid ${postTheme.borderColor}; border-radius: 16px; overflow: hidden; background: ${postTheme.tweetBg}; `; // Card image if (cardData.imageSrc) { const imgContainer = document.createElement('div'); imgContainer.style.cssText = ` width: 100%; max-height: 200px; overflow: hidden; `; const img = document.createElement('img'); img.src = cardData.imageSrc; img.crossOrigin = 'anonymous'; img.style.cssText = ` width: 100%; height: auto; display: block; object-fit: cover; `; imgContainer.appendChild(img); card.appendChild(imgContainer); } // Card info const info = document.createElement('div'); info.style.cssText = 'padding: 12px;'; if (cardData.title) { const title = document.createElement('div'); title.style.cssText = ` font-size: 14px; font-weight: 400; color: ${postTheme.tweetText}; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; `; title.textContent = cardData.title; info.appendChild(title); } if (cardData.domain) { const domain = document.createElement('div'); domain.style.cssText = ` font-size: 13px; color: ${postTheme.secondaryText}; margin-top: 4px; `; domain.textContent = cardData.domain; info.appendChild(domain); } card.appendChild(info); return card; } // Wait for images to load async function waitForImages(container, timeout = 5000) { const images = container.querySelectorAll('img'); const loadPromises = Array.from(images).map(img => { return new Promise(resolve => { if (img.complete && img.naturalHeight !== 0) { resolve(); return; } const timer = setTimeout(() => resolve(), timeout); img.onload = () => { clearTimeout(timer); resolve(); }; img.onerror = () => { clearTimeout(timer); // Show placeholder on error img.style.background = '#e1e8ed'; img.style.minHeight = '100px'; resolve(); }; }); }); await Promise.all(loadPromises); } // Create styled screenshot replica - uses options parameter consistently function createScreenshotReplica(data, options) { const postTheme = postThemes[options.postTheme] || postThemes['light']; const backgroundTheme = backgroundThemes[options.backgroundTheme] || backgroundThemes['soft-purple']; const backgroundStyle = `background: ${backgroundTheme.background}; padding: ${backgroundTheme.padding};`; // Create container page with unique ID to avoid concurrency issues const containerId = generateOffscreenId(); const fakePage = document.createElement('div'); fakePage.id = containerId; fakePage.style.cssText = ` position: absolute; left: -9999px; top: 0; width: 652px; ${backgroundStyle} display: flex; justify-content: center; align-items: center; overflow: visible; `; // Calculate shadow based on intensity let boxShadow; switch(options.shadowIntensity) { case 'none': boxShadow = 'none'; break; case 'low': boxShadow = '0 10px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.1)'; break; case 'medium': boxShadow = '0 15px 35px rgba(0, 0, 0, 0.25), 0 7px 15px rgba(0, 0, 0, 0.15)'; break; case 'high': default: boxShadow = '0 25px 50px rgba(0, 0, 0, 0.35), 0 10px 20px rgba(0, 0, 0, 0.25)'; break; } // Create document card const fakeDocument = document.createElement('div'); fakeDocument.style.cssText = ` background: ${postTheme.tweetBg}; width: 600px; max-width: 95%; padding: 40px; box-sizing: border-box; box-shadow: ${boxShadow}; border-radius: ${options.borderRadius}px; color: ${postTheme.tweetText}; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; `; // Header with avatar and user info const header = document.createElement('div'); header.style.cssText = ` display: flex; align-items: center; margin-bottom: 16px; `; const avatar = document.createElement('img'); avatar.src = data.avatarSrc; avatar.crossOrigin = 'anonymous'; avatar.style.cssText = ` width: 48px; height: 48px; border-radius: 50%; margin-right: 12px; border: 2px solid ${postTheme.avatarBorder}; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); `; const userInfo = document.createElement('div'); userInfo.style.cssText = ` flex: 1; display: flex; flex-direction: column; justify-content: center; `; const name = document.createElement('div'); name.innerText = data.username; name.style.cssText = ` font-weight: bold; font-size: 15px; color: ${postTheme.tweetText}; line-height: 20px; `; const handle = document.createElement('div'); handle.innerText = data.handle; handle.style.cssText = ` color: ${postTheme.secondaryText}; font-size: 15px; line-height: 20px; `; userInfo.appendChild(name); userInfo.appendChild(handle); header.appendChild(avatar); header.appendChild(userInfo); fakeDocument.appendChild(header); // Content section with RTL support if (data.textDiv) { const content = data.textDiv.cloneNode(true); content.setAttribute('dir', data.textDir); content.style.cssText = ` font-size: 20px; line-height: 24px; margin-bottom: 16px; word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; color: ${postTheme.tweetText}; font-weight: 400; `; // Fix colors for all child elements content.querySelectorAll('*').forEach(el => { if (el.tagName === 'A') { el.style.color = '#1d9bf0'; el.style.textDecoration = 'none'; } else { el.style.color = postTheme.tweetText; } }); // Handle emojis - convert to data URIs content.querySelectorAll('img[src*="twimg.com/emoji/"]').forEach(img => { const tempImg = new Image(); tempImg.crossOrigin = 'anonymous'; tempImg.src = img.src; tempImg.onload = () => { try { const canvas = document.createElement('canvas'); canvas.width = 72; canvas.height = 72; const ctx = canvas.getContext('2d'); ctx.drawImage(tempImg, 0, 0, 72, 72); img.src = canvas.toDataURL('image/png'); } catch (e) { // CORS error, keep original } }; img.style.cssText = ` height: 1.2em; width: 1.2em; margin: 0 0.05em 0 0.1em; display: inline-block; vertical-align: -0.2em; `; }); fakeDocument.appendChild(content); } // Media gallery (multi-image, video, GIF support) if (data.mediaItems && data.mediaItems.length > 0) { const gallery = createMediaGallery(data.mediaItems, postTheme, options); if (gallery) { fakeDocument.appendChild(gallery); } } else if (data.mediaSrc) { // Fallback to single media const media = document.createElement('img'); media.src = data.mediaSrc; media.crossOrigin = 'anonymous'; media.style.cssText = ` width: 100%; border-radius: 16px; margin-top: 12px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: 1px solid ${postTheme.borderColor}; `; fakeDocument.appendChild(media); } // Quote tweet (if option enabled) if (options.showQuote && data.quoteTweet) { const quoteCard = createQuoteCard(data.quoteTweet, postTheme); fakeDocument.appendChild(quoteCard); } // Link card (if option enabled) - show even if quote present if (options.showLinkPreview && data.linkCard) { const linkCard = createLinkCard(data.linkCard, postTheme); fakeDocument.appendChild(linkCard); } // Footer with timestamp and engagement const shouldShowDate = options.showDate && data.timestamp; const shouldShowEngagement = options.showEngagement && (data.metrics.replies || data.metrics.retweets || data.metrics.likes || data.views); if (shouldShowDate || shouldShowEngagement) { const footer = document.createElement('div'); const footerColor = postTheme.secondaryText; footer.style.cssText = ` border-top: 1px solid ${postTheme.borderColor}; padding-top: 12px; margin-top: 12px; font-size: 15px; color: ${footerColor}; `; const footerContent = document.createElement('div'); footerContent.style.cssText = ` display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; `; if (shouldShowDate) { const dateDiv = document.createElement('div'); dateDiv.style.cssText = ` color: ${footerColor}; flex-shrink: 0; `; dateDiv.textContent = formatDateTime(data.timestamp); footerContent.appendChild(dateDiv); } if (shouldShowEngagement) { const engagementDiv = document.createElement('div'); engagementDiv.style.cssText = ` display: flex; gap: 20px; color: ${footerColor}; align-items: center; margin-left: auto; `; const icons = { reply: ``, repost: ``, like: ``, views: `` }; const createMetric = (icon, value) => { if (value === null || value === undefined) return null; const metricDiv = document.createElement('div'); metricDiv.style.cssText = ` display: inline-flex; align-items: center; gap: 4px; color: ${footerColor}; white-space: nowrap; `; metricDiv.innerHTML = ` ${icon} ${value} `; return metricDiv; }; const metrics = []; if (data.metrics.replies) { const formatted = formatCount(parseEngagementCount(data.metrics.replies)) || data.metrics.replies; metrics.push(createMetric(icons.reply, formatted)); } if (data.metrics.retweets) { const formatted = formatCount(parseEngagementCount(data.metrics.retweets)) || data.metrics.retweets; metrics.push(createMetric(icons.repost, formatted)); } if (data.metrics.likes) { const formatted = formatCount(parseEngagementCount(data.metrics.likes)) || data.metrics.likes; metrics.push(createMetric(icons.like, formatted)); } if (data.views) { const formatted = formatCount(parseEngagementCount(data.views)) || data.views; metrics.push(createMetric(icons.views, formatted)); } metrics.forEach(metric => { if (metric) engagementDiv.appendChild(metric); }); if (metrics.length > 0) { footerContent.appendChild(engagementDiv); } } footer.appendChild(footerContent); fakeDocument.appendChild(footer); } fakePage.appendChild(fakeDocument); return { fakePage, fakeDocument, containerId }; } // Create preview modal function createPreviewModal() { const modal = document.createElement('div'); modal.id = 'screenshot-preview-modal'; modal.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center; z-index: 10000; backdrop-filter: blur(4px); animation: fadeIn 0.2s ease-out; `; const modalContent = document.createElement('div'); modalContent.style.cssText = ` background: #15202b; border-radius: 16px; padding: 24px; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: slideUp 0.3s ease-out; `; // Header const header = document.createElement('div'); header.style.cssText = ` display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #38444d; `; const title = document.createElement('h2'); title.textContent = 'Preview & Edit Screenshot'; title.style.cssText = ` margin: 0; color: #ffffff; font-size: 20px; font-weight: 700; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; `; const closeButton = document.createElement('button'); closeButton.innerHTML = '×'; closeButton.style.cssText = ` background: transparent; border: none; color: #8899a6; font-size: 24px; cursor: pointer; padding: 4px 8px; border-radius: 50%; transition: all 0.2s; line-height: 1; `; closeButton.onmouseover = () => { closeButton.style.background = '#273340'; closeButton.style.color = '#ffffff'; }; closeButton.onmouseout = () => { closeButton.style.background = 'transparent'; closeButton.style.color = '#8899a6'; }; header.appendChild(title); header.appendChild(closeButton); // Main content area const mainContent = document.createElement('div'); mainContent.style.cssText = ` display: flex; gap: 24px; overflow: auto; flex: 1; `; // Preview container const previewContainer = document.createElement('div'); previewContainer.id = 'preview-container'; previewContainer.style.cssText = ` flex: 1; display: flex; justify-content: center; align-items: center; background: #0a0a0a; border-radius: 12px; padding: 20px; overflow: auto; min-height: 400px; position: relative; `; // Loading spinner const spinner = document.createElement('div'); spinner.id = 'preview-spinner'; spinner.style.cssText = ` position: absolute; display: none; flex-direction: column; align-items: center; gap: 12px; `; spinner.innerHTML = `

Generating preview... `; const previewImage = document.createElement('img'); previewImage.id = 'preview-image'; previewImage.style.cssText = ` max-width: 100%; max-height: 60vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); `; previewContainer.appendChild(spinner); previewContainer.appendChild(previewImage); // Controls panel const controlsPanel = document.createElement('div'); controlsPanel.style.cssText = ` width: 280px; background: #192734; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; max-height: 70vh; `; const controlsTitle = document.createElement('h3'); controlsTitle.textContent = 'Edit Options'; controlsTitle.style.cssText = ` margin: 0 0 12px 0; color: #ffffff; font-size: 16px; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; `; controlsPanel.appendChild(controlsTitle); // Post theme selector const postThemeControl = createDropdownControl( 'Post Theme', 'postTheme', editorOptions.postTheme, [ { value: 'light', label: 'Light Mode' }, { value: 'dark', label: 'Dark Mode' }, { value: 'dim', label: 'Dim Mode' } ], 'Choose the appearance of the tweet card' ); controlsPanel.appendChild(postThemeControl); // Background theme selector const backgroundThemeControl = createDropdownControl( 'Background Theme', 'backgroundTheme', editorOptions.backgroundTheme, [ { value: 'soft-purple', label: 'Soft Purple' }, { value: 'warm-sunset', label: 'Warm Sunset' }, { value: 'cool-slate', label: 'Cool Slate' }, { value: 'ocean-breeze', label: 'Ocean Breeze' }, { value: 'mesh-aurora', label: 'Aurora Mesh' }, { value: 'dark-gradient', label: 'Dark Gradient' }, { value: 'minimal-light', label: 'Minimal Light' }, { value: 'warm-cream', label: 'Warm Cream' }, { value: 'x-black', label: 'X Black' }, { value: 'dark-dim', label: 'Dark Dim' }, { value: 'none', label: 'No Background' } ], 'Choose the background around the tweet' ); controlsPanel.appendChild(backgroundThemeControl); // Show date toggle const dateToggle = createToggleControl( 'Show Date', 'showDate', editorOptions.showDate, 'Display timestamp in the screenshot' ); controlsPanel.appendChild(dateToggle); // Show quote toggle const quoteToggle = createToggleControl( 'Show Quote Tweet', 'showQuote', editorOptions.showQuote, 'Include quoted tweet when present' ); controlsPanel.appendChild(quoteToggle); // Show link preview toggle const linkToggle = createToggleControl( 'Show Link Preview', 'showLinkPreview', editorOptions.showLinkPreview, 'Include link card preview when present' ); controlsPanel.appendChild(linkToggle); // Advanced section const advancedSection = document.createElement('div'); advancedSection.style.cssText = ` margin-top: 16px; border-top: 1px solid #38444d; padding-top: 16px; `; const advancedHeader = document.createElement('div'); advancedHeader.style.cssText = ` display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 8px 0; user-select: none; `; const advancedTitle = document.createElement('div'); advancedTitle.style.cssText = ` font-size: 14px; font-weight: 600; color: #e7e9ea; `; advancedTitle.textContent = 'Advanced'; const advancedToggleIcon = document.createElement('span'); advancedToggleIcon.style.cssText = ` font-size: 12px; color: #71767b; transition: transform 0.2s; `; advancedToggleIcon.textContent = '\u25BC'; advancedHeader.appendChild(advancedTitle); advancedHeader.appendChild(advancedToggleIcon); const advancedContent = document.createElement('div'); advancedContent.style.cssText = ` display: none; margin-top: 12px; `; const radiusControl = createSliderControl( 'Border Radius', 'borderRadius', editorOptions.borderRadius, 0, 24, 'px', 'Adjust corner roundness' ); advancedContent.appendChild(radiusControl); const shadowControl = createDropdownControl( 'Shadow Intensity', 'shadowIntensity', editorOptions.shadowIntensity, [ { value: 'none', label: 'None' }, { value: 'low', label: 'Low' }, { value: 'medium', label: 'Medium' }, { value: 'high', label: 'High' } ], 'Adjust shadow depth' ); advancedContent.appendChild(shadowControl); // Show engagement toggle (in advanced section) const engagementToggle = createToggleControl( 'Show Engagement', 'showEngagement', editorOptions.showEngagement, 'Display engagement metrics (replies, retweets, likes, views)' ); advancedContent.appendChild(engagementToggle); advancedHeader.addEventListener('click', () => { const isHidden = advancedContent.style.display === 'none'; advancedContent.style.display = isHidden ? 'block' : 'none'; advancedToggleIcon.style.transform = isHidden ? 'rotate(180deg)' : 'rotate(0deg)'; }); advancedSection.appendChild(advancedHeader); advancedSection.appendChild(advancedContent); controlsPanel.appendChild(advancedSection); mainContent.appendChild(previewContainer); mainContent.appendChild(controlsPanel); // Footer with action buttons const footer = document.createElement('div'); footer.style.cssText = ` display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #38444d; `; const cancelButton = document.createElement('button'); cancelButton.textContent = 'Cancel'; cancelButton.style.cssText = ` padding: 12px 24px; background: transparent; border: 1px solid #536471; color: #ffffff; border-radius: 9999px; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.2s; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; `; cancelButton.onmouseover = () => cancelButton.style.background = '#273340'; cancelButton.onmouseout = () => cancelButton.style.background = 'transparent'; const downloadButton = document.createElement('button'); downloadButton.textContent = 'Download'; downloadButton.id = 'modal-download-button'; downloadButton.style.cssText = ` padding: 12px 24px; background: #1d9bf0; border: none; color: #ffffff; border-radius: 9999px; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.2s; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; `; downloadButton.onmouseover = () => downloadButton.style.background = '#1a8cd8'; downloadButton.onmouseout = () => downloadButton.style.background = '#1d9bf0'; const copyButton = document.createElement('button'); copyButton.textContent = 'Copy'; copyButton.id = 'modal-copy-button'; copyButton.style.cssText = ` padding: 12px 24px; background: #00ba7c; border: none; color: #ffffff; border-radius: 9999px; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.2s; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; `; copyButton.onmouseover = () => copyButton.style.background = '#00a368'; copyButton.onmouseout = () => copyButton.style.background = '#00ba7c'; footer.appendChild(cancelButton); footer.appendChild(copyButton); footer.appendChild(downloadButton); modalContent.appendChild(header); modalContent.appendChild(mainContent); modalContent.appendChild(footer); modal.appendChild(modalContent); // Add animations const style = document.createElement('style'); style.textContent = ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } `; document.head.appendChild(style); // Close handlers const closeModal = () => { modal.style.animation = 'fadeOut 0.2s ease-out'; setTimeout(() => { if (modal.parentNode) { document.body.removeChild(modal); } }, 200); }; closeButton.onclick = closeModal; cancelButton.onclick = closeModal; modal.onclick = (e) => { if (e.target === modal) { closeModal(); } }; return modal; } // Helper: toggle control function createToggleControl(label, optionKey, initialValue, description) { const container = document.createElement('div'); container.style.cssText = ` display: flex; flex-direction: column; gap: 8px; `; const labelRow = document.createElement('div'); labelRow.style.cssText = ` display: flex; justify-content: space-between; align-items: center; `; const labelText = document.createElement('label'); labelText.textContent = label; labelText.style.cssText = ` color: #ffffff; font-size: 14px; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; `; const toggle = document.createElement('div'); toggle.style.cssText = ` width: 44px; height: 24px; background: ${initialValue ? '#1d9bf0' : '#536471'}; border-radius: 12px; position: relative; cursor: pointer; transition: background 0.2s; `; const toggleKnob = document.createElement('div'); toggleKnob.style.cssText = ` width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: 2px; left: ${initialValue ? '22px' : '2px'}; transition: left 0.2s; `; toggle.appendChild(toggleKnob); toggle.onclick = () => { editorOptions[optionKey] = !editorOptions[optionKey]; toggle.style.background = editorOptions[optionKey] ? '#1d9bf0' : '#536471'; toggleKnob.style.left = editorOptions[optionKey] ? '22px' : '2px'; saveSettings(); updatePreview(); }; labelRow.appendChild(labelText); labelRow.appendChild(toggle); if (description) { const desc = document.createElement('div'); desc.textContent = description; desc.style.cssText = ` color: #8899a6; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; `; container.appendChild(labelRow); container.appendChild(desc); } else { container.appendChild(labelRow); } return container; } // Helper: slider control function createSliderControl(label, optionKey, initialValue, min, max, unit, description) { const container = document.createElement('div'); container.style.cssText = ` display: flex; flex-direction: column; gap: 8px; `; const labelRow = document.createElement('div'); labelRow.style.cssText = ` display: flex; justify-content: space-between; align-items: center; `; const labelText = document.createElement('label'); labelText.textContent = label; labelText.style.cssText = ` color: #ffffff; font-size: 14px; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; `; const valueDisplay = document.createElement('span'); valueDisplay.textContent = `${initialValue}${unit}`; valueDisplay.style.cssText = ` color: #1d9bf0; font-size: 13px; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; `; labelRow.appendChild(labelText); labelRow.appendChild(valueDisplay); const slider = document.createElement('input'); slider.type = 'range'; slider.min = min; slider.max = max; slider.value = initialValue; slider.style.cssText = ` width: 100%; height: 4px; border-radius: 2px; background: #536471; outline: none; -webkit-appearance: none; cursor: pointer; `; slider.oninput = () => { editorOptions[optionKey] = parseInt(slider.value); valueDisplay.textContent = `${slider.value}${unit}`; saveSettings(); updatePreview(); }; container.appendChild(labelRow); container.appendChild(slider); if (description) { const desc = document.createElement('div'); desc.textContent = description; desc.style.cssText = ` color: #8899a6; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; `; container.appendChild(desc); } return container; } // Helper: dropdown control function createDropdownControl(label, optionKey, initialValue, options, description) { const container = document.createElement('div'); container.style.cssText = ` display: flex; flex-direction: column; gap: 8px; `; const labelText = document.createElement('label'); labelText.textContent = label; labelText.style.cssText = ` color: #ffffff; font-size: 14px; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; `; const select = document.createElement('select'); select.style.cssText = ` padding: 8px 12px; background: #273340; border: 1px solid #536471; color: #ffffff; border-radius: 6px; font-size: 14px; cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; outline: none; `; options.forEach(opt => { const option = document.createElement('option'); option.value = opt.value; option.textContent = opt.label; option.selected = opt.value === initialValue; select.appendChild(option); }); select.onchange = () => { editorOptions[optionKey] = select.value; saveSettings(); updatePreview(); }; container.appendChild(labelText); container.appendChild(select); if (description) { const desc = document.createElement('div'); desc.textContent = description; desc.style.cssText = ` color: #8899a6; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; `; container.appendChild(desc); } return container; } // Global variables for preview update let currentPostData = null; let currentButton = null; // Remove offscreen container by ID function cleanupOffscreen(containerId) { if (!containerId) return; const existing = document.getElementById(containerId); if (existing && existing.parentNode) { existing.parentNode.removeChild(existing); } } // Update preview with current options async function updatePreview() { if (!currentPostData) return; const previewImage = document.getElementById('preview-image'); const spinner = document.getElementById('preview-spinner'); if (!previewImage) return; // Show loading state previewImage.style.opacity = '0.5'; if (spinner) spinner.style.display = 'flex'; let containerId = null; try { const { fakePage, containerId: cid } = createScreenshotReplica(currentPostData, editorOptions); containerId = cid; document.body.appendChild(fakePage); // Wait for images to load await waitForImages(fakePage, 3000); await new Promise(resolve => setTimeout(resolve, 200)); const canvas = await html2canvas(fakePage, { scale: 2, useCORS: true, allowTaint: true, backgroundColor: null, logging: false, imageTimeout: 15000 }); previewImage.src = canvas.toDataURL('image/png'); previewImage.style.opacity = '1'; cleanupOffscreen(containerId); } catch (error) { console.error('Error updating preview:', error); previewImage.style.opacity = '1'; cleanupOffscreen(containerId); } finally { if (spinner) spinner.style.display = 'none'; } } // Show preview modal and handle actions async function showPreviewAndEdit(article, button) { const originalHTML = button.innerHTML; try { // Show loading state button.innerHTML = `

`; button.style.pointerEvents = 'none'; // Extract post data const data = extractPostData(article); console.log('Extracted post data:', data); currentPostData = data; currentButton = button; // Create initial screenshot const { fakePage, containerId } = createScreenshotReplica(data, editorOptions); document.body.appendChild(fakePage); await waitForImages(fakePage, 5000); await new Promise(resolve => setTimeout(resolve, 300)); const canvas = await html2canvas(fakePage, { scale: 2, useCORS: true, allowTaint: true, backgroundColor: null, logging: false, imageTimeout: 15000 }); cleanupOffscreen(containerId); // Restore button button.innerHTML = originalHTML; button.style.pointerEvents = ''; // Create and show modal const modal = createPreviewModal(); document.body.appendChild(modal); const previewImage = document.getElementById('preview-image'); previewImage.src = canvas.toDataURL('image/png'); // Download handler const downloadButton = document.getElementById('modal-download-button'); downloadButton.onclick = async () => { let dlContainerId = null; try { downloadButton.textContent = 'Downloading...'; downloadButton.disabled = true; downloadButton.style.opacity = '0.7'; const { fakePage: finalFakePage, containerId: cid } = createScreenshotReplica(data, editorOptions); dlContainerId = cid; document.body.appendChild(finalFakePage); await waitForImages(finalFakePage, 5000); await new Promise(resolve => setTimeout(resolve, 200)); const finalCanvas = await html2canvas(finalFakePage, { scale: 2, useCORS: true, allowTaint: true, backgroundColor: null, logging: false, imageTimeout: 15000 }); finalCanvas.toBlob(async (blob) => { if (!blob) { throw new Error('Failed to create image blob'); } try { const item = new ClipboardItem({ 'image/png': blob }); await navigator.clipboard.write([item]); console.log('Screenshot copied to clipboard'); } catch (clipboardErr) { console.warn('Failed to copy to clipboard:', clipboardErr); } const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; const timestamp = new Date().getTime(); const username = data.handle.replace('@', '') || 'post'; a.download = `x_${username}_${timestamp}.png`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); console.log('Screenshot downloaded successfully'); cleanupOffscreen(dlContainerId); if (modal.parentNode) { document.body.removeChild(modal); } // Success feedback const innerDiv = button.querySelector('.css-146c3p1'); if (innerDiv) { const originalColor = innerDiv.style.color; innerDiv.style.color = 'rgb(0, 186, 124)'; setTimeout(() => { innerDiv.style.color = originalColor; }, 1000); } }, 'image/png'); } catch (error) { console.error('Error downloading screenshot:', error); alert('Failed to download screenshot. Please try again.'); downloadButton.textContent = 'Download'; downloadButton.disabled = false; downloadButton.style.opacity = '1'; cleanupOffscreen(dlContainerId); } }; // Copy handler const copyButton = document.getElementById('modal-copy-button'); copyButton.onclick = async () => { let cpContainerId = null; try { copyButton.textContent = 'Copying...'; copyButton.disabled = true; copyButton.style.opacity = '0.7'; const { fakePage: finalFakePage, containerId: cid } = createScreenshotReplica(data, editorOptions); cpContainerId = cid; document.body.appendChild(finalFakePage); await waitForImages(finalFakePage, 5000); await new Promise(resolve => setTimeout(resolve, 200)); const finalCanvas = await html2canvas(finalFakePage, { scale: 2, useCORS: true, allowTaint: true, backgroundColor: null, logging: false, imageTimeout: 15000 }); finalCanvas.toBlob(async (blob) => { if (!blob) { throw new Error('Failed to create image blob'); } try { const item = new ClipboardItem({ 'image/png': blob }); await navigator.clipboard.write([item]); console.log('Screenshot copied to clipboard'); copyButton.textContent = 'Copied!'; copyButton.style.background = '#00a368'; setTimeout(() => { copyButton.textContent = 'Copy'; copyButton.disabled = false; copyButton.style.opacity = '1'; copyButton.style.background = '#00ba7c'; }, 2000); } catch (clipboardErr) { console.error('Failed to copy to clipboard:', clipboardErr); throw new Error('Failed to copy to clipboard. Please ensure clipboard permissions are granted.'); } cleanupOffscreen(cpContainerId); }, 'image/png'); } catch (error) { console.error('Error copying screenshot:', error); alert('Failed to copy screenshot to clipboard. Please ensure clipboard permissions are granted.'); copyButton.textContent = 'Copy'; copyButton.disabled = false; copyButton.style.opacity = '1'; cleanupOffscreen(cpContainerId); } }; } catch (error) { console.error('Error showing preview:', error); button.innerHTML = originalHTML; button.style.pointerEvents = ''; // Note: containerId from initial screenshot already cleaned up on success // Error case likely means fakePage was never created or appended alert('Failed to generate preview. Please try again.'); } } // Create download button function createDownloadButton() { const buttonWrapper = document.createElement('div'); buttonWrapper.className = 'css-175oi2r r-18u37iz r-1h0z5md r-13awgt0'; buttonWrapper.style.cssText = 'margin-left: 4px;'; const button = document.createElement('button'); button.setAttribute('aria-label', 'Screenshot post'); button.setAttribute('role', 'button'); button.setAttribute('type', 'button'); button.className = 'css-175oi2r r-1777fci r-bt1l66 r-bztko3 r-lrvibr r-1loqt21 r-1ny4l3l'; button.setAttribute('data-testid', 'screenshot-post'); const innerDiv = document.createElement('div'); innerDiv.setAttribute('dir', 'ltr'); innerDiv.className = 'css-146c3p1 r-bcqeeo r-1ttztb7 r-qvutc0 r-37j5jr r-a023e6 r-rjixqe r-16dba41 r-1awozwy r-6koalj r-1h0z5md r-o7ynqc r-clp7b1 r-3s2u2q'; innerDiv.style.color = 'rgb(113, 118, 123)'; const iconContainer = document.createElement('div'); iconContainer.className = 'css-175oi2r r-xoduu5'; const hoverDiv = document.createElement('div'); hoverDiv.className = 'css-175oi2r r-xoduu5 r-1p0dtai r-1d2f490 r-u8s1d r-zchlnj r-ipm5af r-1niwhzg r-sdzlij r-xf4iuw r-o7ynqc r-6416eg r-1ny4l3l'; iconContainer.innerHTML = hoverDiv.outerHTML + screenshotIconSVG; innerDiv.appendChild(iconContainer); button.appendChild(innerDiv); buttonWrapper.appendChild(button); const hoverElement = iconContainer.querySelector('.r-1p0dtai'); button.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); const article = button.closest('article[data-testid="tweet"]'); if (article) { showPreviewAndEdit(article, button); } }); button.addEventListener('mouseenter', function() { innerDiv.style.color = 'rgb(29, 155, 240)'; if (hoverElement) { hoverElement.style.backgroundColor = 'rgba(29, 155, 240, 0.1)'; } }); button.addEventListener('mouseleave', function() { innerDiv.style.color = 'rgb(113, 118, 123)'; if (hoverElement) { hoverElement.style.backgroundColor = ''; } }); return buttonWrapper; } // Add button to tweet function addDownloadButtonToTweet(article) { if (article.querySelector('[data-testid="screenshot-post"]')) { return; } const actionGroup = article.querySelector('[role="group"]'); if (!actionGroup) { return; } const downloadButton = createDownloadButton(); actionGroup.appendChild(downloadButton); } // Process all tweets function processAllTweets() { const tweets = document.querySelectorAll('article[data-testid="tweet"]'); tweets.forEach(tweet => { addDownloadButtonToTweet(tweet); }); } // Initial processing processAllTweets(); // MutationObserver for new tweets const observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { mutation.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.matches && node.matches('article[data-testid="tweet"]')) { addDownloadButtonToTweet(node); } else if (node.querySelectorAll) { const tweets = node.querySelectorAll('article[data-testid="tweet"]'); tweets.forEach(tweet => { addDownloadButtonToTweet(tweet); }); } } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); console.log('Download button observer initialized'); })();