// ==UserScript== // @name Airbnb Room View Tracker with Photo Detection // @namespace web.nextbyte.ai // @version 2.3 // @description Track viewed Airbnb rooms with scroll detection on room pages and photo viewing (2+ photos) on search pages. Fixed position indicator at top-right that scrolls with the page. // @author NextByte // @match *://www.airbnb.com/* // @grant GM_setValue // @grant GM_getValue // @run-at document-end // ==/UserScript== (function() { 'use strict'; // Storage key for viewed rooms const STORAGE_KEY = 'airbnb_viewed_rooms'; const STORAGE_KEY_URLS = 'airbnb_viewed_urls'; // Store full URLs as backup const SCROLL_THRESHOLD = 10; // pixels for room pages const PHOTO_VIEW_THRESHOLD = 2; // mark as viewed after viewing 2+ photos (first photo + 1 click) // Configuration: set to true to update view counter on repeated photo views, false to keep original timestamp const update_timer = true; // Detect if we're on a room page or search results page function getPageType() { if (window.location.pathname.match(/\/rooms\/\d+/)) { return 'room'; } else if (window.location.pathname.match(/\/s\//)) { return 'search'; } return 'other'; } // Extract room ID from URL function getRoomId() { const match = window.location.pathname.match(/\/rooms\/(\d+)/); return match ? match[1] : null; } // Extract room ID from a link element function getRoomIdFromLink(link) { const href = link.getAttribute('href'); if (!href) return null; const match = href.match(/\/rooms\/(\d+)/); return match ? match[1] : null; } // Normalize URL for comparison (remove query params and fragments) function normalizeUrl(url) { try { const urlObj = new URL(url, window.location.origin); return urlObj.pathname; } catch (e) { return url; } } // Get viewed URLs from storage function getViewedUrls() { try { const data = GM_getValue(STORAGE_KEY_URLS, '{}'); return JSON.parse(data); } catch (e) { console.error('Error parsing viewed URLs:', e); return {}; } } // Save viewed URLs to storage function saveViewedUrls(urls) { try { GM_setValue(STORAGE_KEY_URLS, JSON.stringify(urls)); } catch (e) { console.error('Error saving viewed URLs:', e); } } // Check if URL was already viewed function checkIfUrlViewed(url) { const normalizedUrl = normalizeUrl(url); const urls = getViewedUrls(); return urls[normalizedUrl] || null; } // Mark URL as viewed function markUrlAsViewed(url) { const normalizedUrl = normalizeUrl(url); const urls = getViewedUrls(); // If update_timer is true, update the timestamp; otherwise, only set if not already viewed if (update_timer || !urls[normalizedUrl]) { urls[normalizedUrl] = Date.now(); saveViewedUrls(urls); console.log(`URL ${normalizedUrl} marked as viewed (timestamp: ${new Date(urls[normalizedUrl]).toLocaleString()})`); } else { console.log(`URL ${normalizedUrl} already viewed - keeping original timestamp (update_timer is false)`); } } // Get viewed rooms from storage function getViewedRooms() { try { const data = GM_getValue(STORAGE_KEY, '{}'); return JSON.parse(data); } catch (e) { console.error('Error parsing viewed rooms:', e); return {}; } } // Save viewed rooms to storage function saveViewedRooms(rooms) { try { GM_setValue(STORAGE_KEY, JSON.stringify(rooms)); } catch (e) { console.error('Error saving viewed rooms:', e); } } // Mark room as viewed function markRoomAsViewed(roomId) { const rooms = getViewedRooms(); // If update_timer is true, update the timestamp; otherwise, only set if not already viewed if (update_timer || !rooms[roomId]) { rooms[roomId] = Date.now(); saveViewedRooms(rooms); console.log(`Room ${roomId} marked as viewed (timestamp: ${new Date(rooms[roomId]).toLocaleString()})`); } else { console.log(`Room ${roomId} already viewed - keeping original timestamp (update_timer is false)`); } } // Mark room as viewed (with URL backup) function markRoomAsViewedWithUrl(roomId, url) { markRoomAsViewed(roomId); if (url) { markUrlAsViewed(url); } } // Check if room was already viewed function checkIfViewed(roomId) { const rooms = getViewedRooms(); return rooms[roomId] || null; } // Format relative time function formatRelativeTime(timestamp) { const now = Date.now(); const diff = now - timestamp; const seconds = Math.floor(diff / 1000); const minutes = Math.floor(seconds / 60); const hours = Math.floor(minutes / 60); const days = Math.floor(hours / 24); const months = Math.floor(days / 30); if (months > 0) return `${months}m ago`; // m for months if (days > 0) return `${days}d ago`; if (hours > 0) return `${hours}h ago`; if (minutes > 0) return `${minutes}min ago`; return 'just now'; } // Create and inject view indicator for room pages function createViewIndicator(timestamp) { // Check if indicator already exists - if so, just update the timestamp const existing = document.getElementById('airbnb-view-indicator'); if (existing) { const span = existing.querySelector('span'); if (span) { span.textContent = `Viewed ${formatRelativeTime(timestamp)}`; } return; // Don't recreate if already present } const indicator = document.createElement('div'); indicator.id = 'airbnb-view-indicator'; indicator.innerHTML = ` Viewed ${formatRelativeTime(timestamp)} `; // Style the indicator to match listing card badge style indicator.style.cssText = ` position: fixed; top: 144px; right: 40px; background: rgb(255, 255, 255); color: rgb(72, 72, 72); border-radius: 30px; padding: 6px 6px; display: flex; align-items: center; gap: 6px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 12px; z-index: 999; pointer-events: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); `; // Append to body since we're using fixed positioning document.body.appendChild(indicator); // Update time periodically setInterval(() => { const span = indicator.querySelector('span'); if (span) { span.textContent = `Viewed ${formatRelativeTime(timestamp)}`; } }, 60000); // Update every minute } // Add visual indicator to listing cards on search pages function addListingIndicator(cardContainer, timestamp) { // Check if indicator already exists if (cardContainer.querySelector('.viewed-listing-badge')) { return; } const badge = document.createElement('div'); badge.className = 'viewed-listing-badge'; badge.innerHTML = ` Viewed ${formatRelativeTime(timestamp)} `; badge.style.cssText = ` position: absolute; top: 13px; left: 13px; background: rgb(255, 255, 255); color: rgb(72, 72, 72); border-radius: 30px; padding: 6px 6px; display: flex; align-items: center; gap: 6px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 12px; z-index: 2; pointer-events: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); `; // Find the image container to append the badge const imageContainer = cardContainer.querySelector('[data-testid="content-scroller"]'); if (imageContainer) { imageContainer.style.position = 'relative'; imageContainer.appendChild(badge); } } // Update badge timestamp function updateListingIndicatorTimestamp(cardContainer, timestamp) { const badge = cardContainer.querySelector('.viewed-listing-badge'); if (badge) { const span = badge.querySelector('span'); if (span) { span.textContent = `Viewed ${formatRelativeTime(timestamp)}`; } } } // Track photo navigation on search results function trackPhotoNavigation(cardContainer, roomId, roomUrl) { let photoViewCount = 1; // Start at 1 since first photo is already visible let hasMarkedAsViewed = false; // Find next/previous photo buttons const buttons = cardContainer.querySelectorAll('button[aria-label*="Next photo"], button[aria-label*="Previous photo"]'); buttons.forEach(button => { button.addEventListener('click', () => { if (hasMarkedAsViewed) return; photoViewCount++; console.log(`Room ${roomId}: Photo view count = ${photoViewCount}`); if (photoViewCount >= PHOTO_VIEW_THRESHOLD) { hasMarkedAsViewed = true; markRoomAsViewedWithUrl(roomId, roomUrl); addListingIndicator(cardContainer, Date.now()); console.log(`Room ${roomId} marked as viewed after viewing ${photoViewCount} photos`); } }); }); } // Initialize tracking for search results page function initSearchPage() { console.log('Initializing search page tracking...'); const viewedRooms = getViewedRooms(); const viewedUrls = getViewedUrls(); // Process existing cards function processCards() { const cardContainers = document.querySelectorAll('[data-testid="card-container"]'); cardContainers.forEach(cardContainer => { // Skip if already processed if (cardContainer.getAttribute('data-photo-tracker-initialized') === 'true') { return; } // Find the room link const roomLink = cardContainer.querySelector('a[href*="/rooms/"]'); if (!roomLink) return; const roomId = getRoomIdFromLink(roomLink); const roomUrl = roomLink.getAttribute('href'); if (!roomId || !roomUrl) return; // Mark as processed cardContainer.setAttribute('data-photo-tracker-initialized', 'true'); // Check if already viewed by room ID or URL const viewedTimestampById = viewedRooms[roomId]; const viewedTimestampByUrl = checkIfUrlViewed(roomUrl); const viewedTimestamp = viewedTimestampById || viewedTimestampByUrl; if (viewedTimestamp) { addListingIndicator(cardContainer, viewedTimestamp); console.log(`Room ${roomId} marked as viewed (found in storage)`); } else { // Track photo navigation for unviewed rooms trackPhotoNavigation(cardContainer, roomId, roomUrl); } }); } // Initial processing processCards(); // Watch for new cards being added (infinite scroll and SPA navigation) const observer = new MutationObserver(() => { processCards(); }); observer.observe(document.body, { childList: true, subtree: true }); console.log('Search page tracking initialized'); } // Initialize tracking for room detail page function initRoomPage() { const roomId = getRoomId(); if (!roomId) { console.log('Not on a room page'); return; } console.log(`Room ID: ${roomId}`); // Check if already viewed by room ID or URL const viewedTimestampById = checkIfViewed(roomId); const viewedTimestampByUrl = checkIfUrlViewed(window.location.pathname); const viewedTimestamp = viewedTimestampById || viewedTimestampByUrl; if (viewedTimestamp) { console.log(`Room already viewed at ${new Date(viewedTimestamp)}`); createViewIndicator(viewedTimestamp); } // Track scroll to mark as viewed let initialScrollY = window.scrollY; let hasScrolled = false; let scrollTimeout = null; function handleScroll() { // Clear previous timeout if (scrollTimeout) { clearTimeout(scrollTimeout); } // Wait for scroll to settle (debounce) scrollTimeout = setTimeout(() => { const currentScrollY = window.scrollY; const scrollDiff = Math.abs(currentScrollY - initialScrollY); if (!hasScrolled && scrollDiff >= SCROLL_THRESHOLD) { hasScrolled = true; console.log(`Scrolled ${scrollDiff}px - marking as viewed`); const timestamp = Date.now(); markRoomAsViewedWithUrl(roomId, window.location.pathname); createViewIndicator(timestamp); // Remove scroll listener after marking as viewed window.removeEventListener('scroll', handleScroll); } }, 100); // Wait 100ms after scroll stops } // Only add scroll listener if not already viewed if (!viewedTimestamp) { window.addEventListener('scroll', handleScroll, { passive: true }); console.log('Scroll tracking enabled'); } } // Main initialization function init() { const pageType = getPageType(); console.log(`Page type: ${pageType}`); if (pageType === 'room') { initRoomPage(); } else if (pageType === 'search') { initSearchPage(); } } // Track URL changes for SPA navigation let lastUrl = window.location.href; const urlChangeObserver = new MutationObserver(() => { const currentUrl = window.location.href; if (currentUrl !== lastUrl) { console.log(`URL changed from ${lastUrl} to ${currentUrl}`); lastUrl = currentUrl; // Re-initialize tracking for the new page setTimeout(init, 500); // Wait for DOM to update } }); // Observe URL changes via history API const originalPushState = window.history.pushState; const originalReplaceState = window.history.replaceState; window.history.pushState = function(...args) { originalPushState.apply(this, args); lastUrl = window.location.href; console.log(`History pushState: ${lastUrl}`); setTimeout(init, 500); }; window.history.replaceState = function(...args) { originalReplaceState.apply(this, args); lastUrl = window.location.href; console.log(`History replaceState: ${lastUrl}`); setTimeout(init, 500); }; // Wait for page to be fully loaded if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } console.log('Airbnb Room View Tracker with Photo Detection loaded'); })();