// ==UserScript== // @name X Bookmark to Email // @description Never lose an X bookmark again. Send an email with post details when you click the bookmark button on X/Twitter. // // Includes settings to control confirmation, delivery delay, email content, etc. // @namespace https://tweeks.io/ // @version 1.1.2 // @author Tweeks // @match https://x.com/* // @match https://twitter.com/* // @grant TW_email // @grant GM_getValue // @grant GM_setValue // @grant GM_registerMenuCommand // @run-at document-idle // @noframes // ==/UserScript== (function() { 'use strict'; // ========================================================================= // CONFIGURATION // ========================================================================= const SELECTORS = { TWEET: 'article[data-testid="tweet"]', BOOKMARK_BUTTON: 'button[data-testid="bookmark"]', TWEET_TEXT: '[data-testid="tweetText"]', USER_AVATAR_CONTAINER: '[data-testid^="UserAvatar-Container-"]', TIME_ELEMENT: 'time[datetime]', // Engagement stats aria-label follows pattern: "X replies, Y reposts, Z likes, ..." ENGAGEMENT_GROUP: '[role="group"][aria-label*="repl"][aria-label*="like"]' }; // ========================================================================= // UTILITIES // ========================================================================= /** * Escape HTML special characters to prevent XSS */ function escapeHtml(str) { if (!str) return ''; const div = document.createElement('div'); div.textContent = str; return div.innerHTML; } const DELAY_OPTIONS = [ { value: '', label: 'Instant' }, { value: '10m', label: '10 minutes' }, { value: '1h', label: '1 hour' }, { value: '24h', label: '1 day' }, { value: '7d', label: '1 week' } ]; const CONTENT_OPTIONS = [ { value: 'full', label: 'Full details' }, { value: 'minimal', label: 'Minimal (link + author)' } ]; // ========================================================================= // SETTINGS // ========================================================================= const DEFAULT_SETTINGS = { enabled: true, emailDelay: '', // '' = instant, '1h', '24h', '7d' contentLevel: 'full', // 'full' or 'minimal' confirmBeforeSend: false, showToast: true }; let settings = { ...DEFAULT_SETTINGS }; function loadSettings() { settings = { enabled: GM_getValue('enabled', DEFAULT_SETTINGS.enabled), emailDelay: GM_getValue('emailDelay', DEFAULT_SETTINGS.emailDelay), contentLevel: GM_getValue('contentLevel', DEFAULT_SETTINGS.contentLevel), confirmBeforeSend: GM_getValue('confirmBeforeSend', DEFAULT_SETTINGS.confirmBeforeSend), showToast: GM_getValue('showToast', DEFAULT_SETTINGS.showToast) }; } function saveSetting(key, value) { settings[key] = value; GM_setValue(key, value); } // ========================================================================= // SETTINGS MODAL // ========================================================================= let modalContainer = null; let modalShadow = null; let modalEscapeHandler = null; function createSettingsModal() { if (modalContainer) { modalContainer.remove(); } modalContainer = document.createElement('div'); modalContainer.id = 'x-bookmark-email-settings'; modalShadow = modalContainer.attachShadow({ mode: 'closed' }); const styles = document.createElement('style'); styles.textContent = ` * { box-sizing: border-box; } .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(91, 112, 131, 0.4); z-index: 2147483646; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.15s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal { background: #000; border: 1px solid #2f3336; border-radius: 16px; width: 100%; max-width: 400px; max-height: 90vh; overflow-y: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #e7e9ea; animation: slideIn 0.2s ease; } .modal-header { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #2f3336; position: sticky; top: 0; background: #000; z-index: 1; } .modal-title { flex: 1; font-size: 20px; font-weight: 700; margin: 0; text-align: center; } .close-btn { width: 34px; height: 34px; border: none; background: transparent; color: #e7e9ea; font-size: 18px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .close-btn:hover { background: rgba(239, 243, 244, 0.1); } .spacer { width: 34px; } .modal-body { padding: 16px; } .setting-group { margin-bottom: 24px; } .setting-group:last-child { margin-bottom: 0; } .setting-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #2f3336; } .setting-row:last-child { border-bottom: none; } .setting-label { font-size: 15px; font-weight: 400; } .setting-description { font-size: 13px; color: #71767b; margin-top: 4px; } .setting-info { flex: 1; margin-right: 12px; } /* Toggle Switch */ .toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #3e4144; border-radius: 12px; transition: 0.2s; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.2s; } .toggle input:checked + .toggle-slider { background: #1d9bf0; } .toggle input:checked + .toggle-slider:before { transform: translateX(20px); } /* Select Dropdown */ .select-wrapper { position: relative; flex-shrink: 0; } .select { appearance: none; background: #000; border: 1px solid #536471; border-radius: 4px; color: #e7e9ea; font-size: 14px; padding: 8px 32px 8px 12px; cursor: pointer; min-width: 120px; } .select:hover { border-color: #1d9bf0; } .select:focus { outline: none; border-color: #1d9bf0; } .select-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #71767b; } .section-title { font-size: 13px; font-weight: 700; color: #71767b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } `; const overlay = document.createElement('div'); overlay.className = 'overlay'; overlay.addEventListener('click', (e) => { if (e.target === overlay) closeSettingsModal(); }); const modal = document.createElement('div'); modal.className = 'modal'; modal.innerHTML = `

General

Enabled

Send emails when bookmarking posts

Delivery delay

When to send the email

▾

Content level

Amount of detail in emails

▾

Confirm before sending

Ask for confirmation on each bookmark

Interface

Show notifications

Display toast when email is sent

`; // Wire up event handlers modal.querySelector('.close-btn').addEventListener('click', closeSettingsModal); modal.querySelector('#setting-enabled').addEventListener('change', (e) => { saveSetting('enabled', e.target.checked); }); modal.querySelector('#setting-delay').addEventListener('change', (e) => { saveSetting('emailDelay', e.target.value); }); modal.querySelector('#setting-content').addEventListener('change', (e) => { saveSetting('contentLevel', e.target.value); }); modal.querySelector('#setting-confirm').addEventListener('change', (e) => { saveSetting('confirmBeforeSend', e.target.checked); }); modal.querySelector('#setting-toast').addEventListener('change', (e) => { saveSetting('showToast', e.target.checked); }); overlay.appendChild(modal); modalShadow.appendChild(styles); modalShadow.appendChild(overlay); document.body.appendChild(modalContainer); // Close on Escape key modalEscapeHandler = (e) => { if (e.key === 'Escape') { closeSettingsModal(); } }; document.addEventListener('keydown', modalEscapeHandler); } function closeSettingsModal() { if (modalEscapeHandler) { document.removeEventListener('keydown', modalEscapeHandler); modalEscapeHandler = null; } if (modalContainer) { modalContainer.remove(); modalContainer = null; modalShadow = null; } } function openSettingsModal() { loadSettings(); createSettingsModal(); } // ========================================================================= // TOAST NOTIFICATION // ========================================================================= let toastContainer = null; let toastShadow = null; let toastEl = null; let toastTimeout = null; function initToast() { if (toastContainer) return; toastContainer = document.createElement('div'); toastContainer.id = 'x-bookmark-email-toast'; toastShadow = toastContainer.attachShadow({ mode: 'closed' }); const styles = document.createElement('style'); styles.textContent = ` .toast { position: fixed; top: 16px; right: 16px; z-index: 2147483647; padding: 12px 20px; background: #1d9bf0; color: #fff; font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; max-width: 320px; } .toast.visible { opacity: 1; transform: translateY(0); } .toast.error { background: #f4212e; } .toast.success { background: #00ba7c; } `; toastEl = document.createElement('div'); toastEl.className = 'toast'; toastShadow.appendChild(styles); toastShadow.appendChild(toastEl); document.body.appendChild(toastContainer); } function showToast(message, type = 'info') { if (!settings.showToast) return; initToast(); toastEl.textContent = message; toastEl.className = `toast ${type}`; // Trigger reflow for animation void toastEl.offsetWidth; toastEl.classList.add('visible'); clearTimeout(toastTimeout); toastTimeout = setTimeout(() => { toastEl.classList.remove('visible'); }, 3000); } // ========================================================================= // DATA EXTRACTION // ========================================================================= /** * Extract username from UserAvatar-Container data-testid * Format: UserAvatar-Container-{username} */ function extractUsernameFromAvatar(tweetEl) { const avatarContainer = tweetEl.querySelector(SELECTORS.USER_AVATAR_CONTAINER); if (avatarContainer) { const testId = avatarContainer.getAttribute('data-testid'); if (testId) { // Extract username from UserAvatar-Container-{username} const match = testId.match(/^UserAvatar-Container-(.+)$/); if (match) { return match[1]; } } } return null; } /** * Extract username from a URL (relative or absolute) */ function extractUsernameFromUrl(href) { if (!href) return null; const reserved = ['home', 'explore', 'notifications', 'messages', 'search', 'i', 'settings', 'compose']; // Handle absolute URLs: https://x.com/username or https://twitter.com/username const absoluteMatch = href.match(/^https?:\/\/(?:x\.com|twitter\.com)\/([^/?#]+)(?:\/)?$/); if (absoluteMatch && !reserved.includes(absoluteMatch[1])) { return absoluteMatch[1]; } // Handle relative URLs: /username const relativeMatch = href.match(/^\/([^/?#]+)$/); if (relativeMatch && !reserved.includes(relativeMatch[1])) { return relativeMatch[1]; } return null; } /** * Extract username from the first user profile link in the tweet */ function extractUsernameFromLink(tweetEl) { // Find links that go to user profiles (not status pages) // Check both relative and absolute hrefs const links = tweetEl.querySelectorAll('a[href]'); for (const link of links) { const href = link.getAttribute('href'); // Skip status links, analytics links, etc. if (href.includes('/status/') || href.includes('/analytics')) continue; const username = extractUsernameFromUrl(href); if (username) { return username; } } return null; } /** * Extract display name from the tweet */ function extractDisplayName(tweetEl) { // Try avatar aria-label first const avatarContainer = tweetEl.querySelector(SELECTORS.USER_AVATAR_CONTAINER); if (avatarContainer) { const ariaLabel = avatarContainer.querySelector('[aria-label]'); if (ariaLabel) { const label = ariaLabel.getAttribute('aria-label'); if (label && label !== 'Avatar') { return label; } } } // Fallback: Look for the display name in the tweet header // It's typically in a span inside the first link area const userLinks = tweetEl.querySelectorAll('a[href^="/"]'); for (const link of userLinks) { const href = link.getAttribute('href'); // User profile links (not status links) if (href && href.match(/^\/[^/]+$/) && !href.includes('/status/')) { const textSpan = link.querySelector('span'); if (textSpan && textSpan.textContent && textSpan.textContent.trim().length > 0) { return textSpan.textContent.trim(); } } } return null; } /** * Extract tweet text content */ function extractTweetText(tweetEl) { const tweetTextEl = tweetEl.querySelector(SELECTORS.TWEET_TEXT); if (tweetTextEl) { return tweetTextEl.textContent.trim(); } return ''; } /** * Extract post date from time element */ function extractPostDate(tweetEl) { const timeEl = tweetEl.querySelector(SELECTORS.TIME_ELEMENT); if (timeEl) { const datetime = timeEl.getAttribute('datetime'); if (datetime) { return new Date(datetime); } } return null; } /** * Extract tweet URL from the tweet */ function extractTweetUrl(tweetEl) { // Look for links that contain /status/ const statusLinks = tweetEl.querySelectorAll('a[href*="/status/"]'); for (const link of statusLinks) { const href = link.getAttribute('href'); // Match absolute URL: https://x.com/{username}/status/{id} const absoluteMatch = href.match(/^https?:\/\/(?:x\.com|twitter\.com)\/([^/]+)\/status\/(\d+)/); if (absoluteMatch) { return `https://x.com/${absoluteMatch[1]}/status/${absoluteMatch[2]}`; } // Match relative URL: /{username}/status/{id} const relativeMatch = href.match(/^\/([^/]+)\/status\/(\d+)/); if (relativeMatch) { return `https://x.com${href.split(/[?#]/)[0]}`; } } // Fallback: construct from username and look for status ID in any link const username = extractUsernameFromAvatar(tweetEl) || extractUsernameFromLink(tweetEl); if (username) { for (const link of statusLinks) { const href = link.getAttribute('href'); const match = href.match(/\/status\/(\d+)/); if (match) { return `https://x.com/${username}/status/${match[1]}`; } } } return window.location.href; } /** * Extract engagement stats from aria-label */ function extractEngagementStats(tweetEl) { const groupEl = tweetEl.querySelector(SELECTORS.ENGAGEMENT_GROUP); if (groupEl) { const ariaLabel = groupEl.getAttribute('aria-label'); if (ariaLabel) { return ariaLabel; } } return null; } /** * Extract all post data from a tweet element */ function extractPostData(tweetEl) { const username = extractUsernameFromAvatar(tweetEl) || extractUsernameFromLink(tweetEl); const displayName = extractDisplayName(tweetEl); const tweetText = extractTweetText(tweetEl); const postDate = extractPostDate(tweetEl); const tweetUrl = extractTweetUrl(tweetEl); const engagementStats = extractEngagementStats(tweetEl); const bookmarkDate = new Date(); return { username: username || 'unknown', displayName: displayName || username || 'Unknown User', content: tweetText, postDate, bookmarkDate, url: tweetUrl, engagementStats }; } // ========================================================================= // EMAIL FORMATTING // ========================================================================= function formatDate(date) { if (!date) return 'Unknown'; return date.toLocaleString('en-US', { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', timeZoneName: 'short' }); } function formatEmailBody(data) { if (settings.contentLevel === 'minimal') { return [ `Post Link: ${data.url}`, '', `Author: ${data.displayName} (@${data.username})`, '', '---', 'Sent via X Bookmark to Email userscript' ].join('\n'); } // Full content level const lines = [ `Post Link: ${data.url}`, '', `Author: ${data.displayName} (@${data.username})`, `Posted: ${formatDate(data.postDate)}`, `Bookmarked: ${formatDate(data.bookmarkDate)}`, '', '--- Content ---', '', data.content || '(No text content)', '' ]; if (data.engagementStats) { lines.push('--- Engagement ---'); lines.push(''); lines.push(data.engagementStats); lines.push(''); } lines.push('---'); lines.push('Sent via X Bookmark to Email userscript'); return lines.join('\n'); } function formatEmailSubject(data) { // Sanitize content: remove newlines and collapse whitespace const sanitizedContent = (data.content || '') .replace(/[\r\n]+/g, ' ') .replace(/\s+/g, ' ') .trim(); const truncatedContent = sanitizedContent ? sanitizedContent.slice(0, 60) + (sanitizedContent.length > 60 ? '...' : '') : 'No content'; return `X Bookmark: @${data.username} - ${truncatedContent}`; } // ========================================================================= // CONFIRMATION DIALOG // ========================================================================= function showConfirmDialog(postData) { return new Promise((resolve) => { const container = document.createElement('div'); container.id = 'x-bookmark-email-confirm'; const shadow = container.attachShadow({ mode: 'closed' }); const styles = document.createElement('style'); styles.textContent = ` .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(91, 112, 131, 0.4); z-index: 2147483647; display: flex; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .dialog { background: #000; border: 1px solid #2f3336; border-radius: 16px; padding: 24px; max-width: 320px; text-align: center; color: #e7e9ea; } .dialog-title { font-size: 18px; font-weight: 700; margin: 0 0 8px 0; } .dialog-text { font-size: 14px; color: #71767b; margin: 0 0 20px 0; } .dialog-preview { font-size: 13px; color: #e7e9ea; background: #16181c; border-radius: 8px; padding: 12px; margin-bottom: 20px; text-align: left; max-height: 80px; overflow: hidden; } .dialog-buttons { display: flex; gap: 12px; } .btn { flex: 1; padding: 10px 16px; border-radius: 9999px; font-size: 14px; font-weight: 700; cursor: pointer; border: none; transition: background 0.2s; } .btn-cancel { background: transparent; border: 1px solid #536471; color: #e7e9ea; } .btn-cancel:hover { background: rgba(239, 243, 244, 0.1); } .btn-confirm { background: #1d9bf0; color: #fff; } .btn-confirm:hover { background: #1a8cd8; } `; const preview = postData.content ? postData.content.slice(0, 100) + (postData.content.length > 100 ? '...' : '') : '(No text content)'; const overlay = document.createElement('div'); overlay.className = 'overlay'; overlay.innerHTML = `

Email this bookmark?

From @${escapeHtml(postData.username)}

${escapeHtml(preview)}

`; const cleanup = () => { container.remove(); }; overlay.querySelector('.btn-cancel').addEventListener('click', () => { cleanup(); resolve(false); }); overlay.querySelector('.btn-confirm').addEventListener('click', () => { cleanup(); resolve(true); }); overlay.addEventListener('click', (e) => { if (e.target === overlay) { cleanup(); resolve(false); } }); shadow.appendChild(styles); shadow.appendChild(overlay); document.body.appendChild(container); }); } // ========================================================================= // BOOKMARK HANDLER // ========================================================================= async function handleBookmarkClick(bookmarkButton) { // Check if enabled if (!settings.enabled) { return; } // Find the parent tweet element const tweetEl = bookmarkButton.closest(SELECTORS.TWEET); if (!tweetEl) { console.warn('[X-Bookmark-Email] Could not find parent tweet element'); return; } // Extract post data const postData = extractPostData(tweetEl); // Show confirmation if enabled if (settings.confirmBeforeSend) { const confirmed = await showConfirmDialog(postData); if (!confirmed) { return; } } // Format email const subject = formatEmailSubject(postData); const body = formatEmailBody(postData); // Determine delay const delay = settings.emailDelay || undefined; // Send email try { if (delay) { showToast(`Scheduling email (${DELAY_OPTIONS.find(o => o.value === delay)?.label})...`, 'info'); } else { showToast('Sending bookmark details...', 'info'); } const result = await TW_email(subject, body, delay); if (result && result.success) { if (result.scheduled) { showToast('Email scheduled!', 'success'); } else { showToast('Bookmark emailed!', 'success'); } console.log('[X-Bookmark-Email] Email sent:', result); } else { showToast('Failed to send email', 'error'); console.error('[X-Bookmark-Email] Email failed:', result); } } catch (error) { showToast('Error sending email', 'error'); console.error('[X-Bookmark-Email] Error:', error); } } // ========================================================================= // EVENT HANDLING // ========================================================================= function setupEventListener() { // Use capture phase to catch the event before X's handlers // Note: This only captures click events on the bookmark button. // Keyboard shortcuts (e.g., pressing 'b') are not captured as they // don't trigger click events and detecting bookmark state changes // would require more complex MutationObserver logic. document.addEventListener('click', (event) => { const bookmarkButton = event.target.closest(SELECTORS.BOOKMARK_BUTTON); if (bookmarkButton) { // Don't prevent default - let X's bookmark action proceed // Process our email sending asynchronously handleBookmarkClick(bookmarkButton); } }, true); } // ========================================================================= // INITIALIZATION // ========================================================================= function init() { loadSettings(); setupEventListener(); GM_registerMenuCommand('Settings', openSettingsModal); console.log('[X-Bookmark-Email] Userscript initialized'); } // Wait for page to be ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();