// ==UserScript== // @name X (Twitter) Feed Personalization Panel // @namespace web.nextbyte.ai // @version 2.4 // @description Add a Feed Personalization panel to filter posts by time, hide ads, and filter by engagement metrics - works on both main feed and individual posts! // @author NextByte // @match https://x.com/* // @match https://twitter.com/* // @grant GM_addStyle // @run-at document-end // ==/UserScript== (function() { 'use strict'; // Add custom styles for the personalization panel with improved UI/layout and sticky positioning GM_addStyle(` #feed-personalization-panel { background: rgb(0, 0, 0); border: 1px solid rgb(47, 51, 54); border-radius: 16px; padding: 12px 16px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); overflow: hidden; /* Sticky positioning to float at top while scrolling */ position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(10px); background: rgba(0, 0, 0, 0.95); /* Ensure full width - critical for layout stability */ width: 100%; max-width: 100%; box-sizing: border-box; display: block; } #feed-personalization-panel h3 { color: rgb(231, 233, 234); font-size: 17px; font-weight: 700; margin: 0 0 12px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0.2px; } .filter-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: start; } .filter-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .filter-group label { color: rgb(139, 152, 165); font-size: 12px; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.5px; } .filter-group input[type="number"], .filter-group select { background: rgb(32, 35, 39); border: 1px solid rgb(51, 54, 57); border-radius: 6px; color: rgb(231, 233, 234); padding: 7px 10px; font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; width: 100%; max-width: 100%; box-sizing: border-box; transition: all 0.2s ease; } .filter-group input[type="number"]:hover, .filter-group select:hover { border-color: rgb(71, 85, 105); } .filter-group input[type="number"]:focus, .filter-group select:focus { outline: none; border-color: rgb(29, 155, 240); box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.1); } .filter-group input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: rgb(29, 155, 240); } .checkbox-label { display: flex; align-items: center; gap: 8px; color: rgb(231, 233, 234); font-size: 14px; cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 4px 0; user-select: none; } .checkbox-label:hover { color: rgb(255, 255, 255); } .stats-info { color: rgb(113, 118, 123); font-size: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgb(47, 51, 54); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .stats-info strong { color: rgb(139, 152, 165); font-weight: 600; } article[data-testid="tweet"].filtered-hidden { display: none !important; } [data-testid="cellInnerDiv"].filtered-hidden { display: none !important; } /* Responsive design for smaller screens */ @media (max-width: 600px) { .filter-controls { grid-template-columns: 1fr; } #feed-personalization-panel { padding: 10px 12px; } } `); // Filter state let filterState = { timeFilter: 'all', // 'all', '3hrs', '6hrs', '24hrs', '3days', or '1wk' hideAds: false, minLikes: 0, minComments: 0 }; // Stats tracking let stats = { total: 0, hidden: 0, hiddenByTime: 0, hiddenByAds: 0, hiddenByLikes: 0, hiddenByComments: 0 }; // Create the personalization panel function createPersonalizationPanel() { const panel = document.createElement('div'); panel.id = 'feed-personalization-panel'; panel.innerHTML = `

Feed Personalization

Total: 0 Visible: 0 Hidden: 0

`; return panel; } // Parse engagement count from aria-label (e.g., "458 Likes. Like" -> 458) function parseCount(ariaLabel) { if (!ariaLabel) return 0; const match = ariaLabel.match(/^([\d,]+)/); if (match) { return parseInt(match[1].replace(/,/g, ''), 10); } return 0; } // Parse time and check if within specified time range // timeRange: '3hrs' for past 3 hours, '6hrs' for past 6 hours, '24hrs' for past 24 hours, '3days' for past 3 days, '1wk' for past 1 week function isWithinTimeRange(timeElement, timeRange) { if (!timeElement) return false; const datetime = timeElement.getAttribute('datetime'); if (!datetime) return false; try { const postTime = new Date(datetime); const now = new Date(); // Check if dates are valid if (isNaN(postTime.getTime()) || isNaN(now.getTime())) { return false; } const hoursDiff = (now - postTime) / (1000 * 60 * 60); if (timeRange === '3hrs') { return hoursDiff <= 3; } else if (timeRange === '6hrs') { return hoursDiff <= 6; } else if (timeRange === '24hrs') { return hoursDiff <= 24; } else if (timeRange === '3days') { return hoursDiff <= 72; // 3 days * 24 hours } else if (timeRange === '1wk') { return hoursDiff <= 168; // 7 days * 24 hours } } catch (e) { console.error('Error parsing datetime:', e); return false; } return false; } // Check if tweet/post is an ad - IMPROVED VERSION function isAdPost(article) { // Method 1: Look for standalone "Ad" text in spans // Ads have a span containing exactly "Ad" (not part of other text) const allSpans = article.querySelectorAll('span'); for (const span of allSpans) { const text = span.textContent.trim(); // Check if it's exactly "Ad" (promoted content marker) if (text === 'Ad') { // Additional validation: check if it's in the header area // Ads typically have this in the div.r-1kkk96v element or near User-Name const parentDiv = span.closest('div.r-1kkk96v, [data-testid="User-Name"]'); if (parentDiv) { console.log('Ad detected via standalone "Ad" span'); return true; } } } // Method 2: Check for "Promoted" text (alternative ad marker) const textContent = article.textContent || ''; if (textContent.includes('Promoted')) { // Verify it's not just someone using the word "promoted" in their tweet const promotedSpans = Array.from(allSpans).filter(s => s.textContent.trim() === 'Promoted'); if (promotedSpans.length > 0) { console.log('Ad detected via "Promoted" text'); return true; } } // Method 3: Check socialContext for ad markers const socialContext = article.querySelector('[data-testid="socialContext"]'); if (socialContext) { const contextText = socialContext.textContent.trim(); if (contextText === 'Ad' || contextText.includes('Promoted')) { console.log('Ad detected via socialContext'); return true; } } // Method 4: Check if tweet is missing timestamp (ads often don't have time elements) // But has username and content (to avoid false positives) const userName = article.querySelector('[data-testid="User-Name"]'); const timeElement = article.querySelector('time'); if (userName && !timeElement) { // Additional check: does it have typical ad content indicators? const hasAdSpan = Array.from(allSpans).some(s => s.textContent.trim() === 'Ad'); if (hasAdSpan) { console.log('Ad detected via missing timestamp with Ad span'); return true; } } return false; } // Apply filters to a tweet function applyFilters(article) { if (!article) return; // Reset visibility article.classList.remove('filtered-hidden'); const cellInnerDiv = article.closest('[data-testid="cellInnerDiv"]'); if (cellInnerDiv) { cellInnerDiv.classList.remove('filtered-hidden'); } let shouldHide = false; let hideReason = ''; // Time filter if (filterState.timeFilter !== 'all') { const timeElement = article.querySelector('time'); if (!timeElement || !isWithinTimeRange(timeElement, filterState.timeFilter)) { shouldHide = true; hideReason = 'time'; stats.hiddenByTime++; } } // Ad filter if (!shouldHide && filterState.hideAds && isAdPost(article)) { shouldHide = true; hideReason = 'ads'; stats.hiddenByAds++; } // Likes filter if (!shouldHide && filterState.minLikes > 0) { const likeButton = article.querySelector('[data-testid="like"]'); if (likeButton) { const likeAriaLabel = likeButton.getAttribute('aria-label'); const likeCount = parseCount(likeAriaLabel); if (likeCount < filterState.minLikes) { shouldHide = true; hideReason = 'likes'; stats.hiddenByLikes++; } } } // Comments filter if (!shouldHide && filterState.minComments > 0) { const replyButton = article.querySelector('[data-testid="reply"]'); if (replyButton) { const replyAriaLabel = replyButton.getAttribute('aria-label'); const replyCount = parseCount(replyAriaLabel); if (replyCount < filterState.minComments) { shouldHide = true; hideReason = 'comments'; stats.hiddenByComments++; } } } // Apply hide class if (shouldHide) { article.classList.add('filtered-hidden'); if (cellInnerDiv) { cellInnerDiv.classList.add('filtered-hidden'); } stats.hidden++; } } // Apply filters to all tweets function applyFiltersToAll() { // Reset stats stats = { total: 0, hidden: 0, hiddenByTime: 0, hiddenByAds: 0, hiddenByLikes: 0, hiddenByComments: 0 }; const articles = document.querySelectorAll('article[data-testid="tweet"]'); articles.forEach(article => { stats.total++; applyFilters(article); }); updateStats(); } // Update stats display function updateStats() { const statsElement = document.getElementById('filter-stats'); if (statsElement) { const visible = stats.total - stats.hidden; statsElement.innerHTML = ` Total: ${stats.total} Visible: ${visible} Hidden: ${stats.hidden} `; } } // Setup event listeners function setupEventListeners() { const timeFilter = document.getElementById('time-filter'); const minLikes = document.getElementById('min-likes'); const minComments = document.getElementById('min-comments'); const hideAds = document.getElementById('hide-ads'); if (timeFilter) { timeFilter.addEventListener('change', (e) => { filterState.timeFilter = e.target.value; applyFiltersToAll(); }); } if (minLikes) { minLikes.addEventListener('input', (e) => { filterState.minLikes = parseInt(e.target.value) || 0; applyFiltersToAll(); }); } if (minComments) { minComments.addEventListener('input', (e) => { filterState.minComments = parseInt(e.target.value) || 0; applyFiltersToAll(); }); } if (hideAds) { hideAds.addEventListener('change', (e) => { filterState.hideAds = e.target.checked; applyFiltersToAll(); }); } } // Insert panel into the page with robust positioning function insertPanel() { // Don't insert if panel already exists if (document.getElementById('feed-personalization-panel')) { return true; } // Try to find the main feed container - prioritize primaryColumn const primaryColumn = document.querySelector('[data-testid="primaryColumn"]'); if (!primaryColumn) { console.log('Feed Personalization: primaryColumn not found yet, will retry...'); return false; } // Wait for primaryColumn to have proper dimensions const columnWidth = primaryColumn.offsetWidth; if (columnWidth < 100) { console.log('Feed Personalization: primaryColumn not properly sized yet, will retry...'); return false; } // Find the best insertion point within primaryColumn // Look for the timeline container first const timelineContainer = primaryColumn.querySelector('[aria-label*="timeline"]') || primaryColumn.querySelector('[data-testid="timeline"]'); if (timelineContainer) { // Insert at the beginning of the timeline container const panel = createPersonalizationPanel(); timelineContainer.insertBefore(panel, timelineContainer.firstChild); console.log('Feed Personalization: Panel inserted into timeline container'); setupEventListeners(); applyFiltersToAll(); return true; } // Fallback: insert as first child of primaryColumn const panel = createPersonalizationPanel(); primaryColumn.insertBefore(panel, primaryColumn.firstChild); console.log('Feed Personalization: Panel inserted into primaryColumn'); setupEventListeners(); applyFiltersToAll(); return true; } // Watch for new tweets being added to the DOM function setupMutationObserver() { const observer = new MutationObserver((mutations) => { let hasNewTweets = false; let shouldCheckPanel = false; mutations.forEach((mutation) => { if (mutation.addedNodes.length > 0) { mutation.addedNodes.forEach((node) => { if (node.nodeType === 1) { // Element node // Check if primaryColumn was added (for navigation/page changes) if (node.getAttribute && node.getAttribute('data-testid') === 'primaryColumn') { shouldCheckPanel = true; } // Check if it's a tweet or contains tweets if (node.getAttribute && node.getAttribute('data-testid') === 'tweet') { hasNewTweets = true; stats.total++; applyFilters(node); } else if (node.querySelectorAll) { const newTweets = node.querySelectorAll('article[data-testid="tweet"]'); if (newTweets.length > 0) { hasNewTweets = true; newTweets.forEach(tweet => { stats.total++; applyFilters(tweet); }); } } } }); } }); // If primaryColumn appeared and panel doesn't exist, try to insert it if (shouldCheckPanel && !document.getElementById('feed-personalization-panel')) { console.log('Feed Personalization: primaryColumn detected, attempting panel insertion'); setTimeout(() => { if (insertPanel()) { console.log('Feed Personalization: Panel inserted after primaryColumn detection'); } }, 100); } if (hasNewTweets) { updateStats(); } }); // Start observing the document for changes const config = { childList: true, subtree: true, attributes: false, characterData: false }; observer.observe(document.body, config); } // Initialize with retry mechanism for robustness function initializeWithRetry() { let attempts = 0; const maxAttempts = 10; const retryDelay = 300; // ms function tryInsert() { attempts++; console.log(`Feed Personalization: Insertion attempt ${attempts}/${maxAttempts}`); const success = insertPanel(); if (success) { console.log('Feed Personalization: Successfully inserted panel'); setupMutationObserver(); } else if (attempts < maxAttempts) { console.log(`Feed Personalization: Retrying in ${retryDelay}ms...`); setTimeout(tryInsert, retryDelay); } else { console.error('Feed Personalization: Failed to insert panel after maximum attempts'); } } // Start trying after a short delay to let initial page load setTimeout(tryInsert, 500); } // Initialize when DOM is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initializeWithRetry); } else { initializeWithRetry(); } })();