${title}

// ==UserScript== // @name eBay: Min/Max range parser and chart // @namespace tweeks.io // @version 1.12 // @description Adds Min and Max buttons to eBay listings, saves the selected range in a floating panel, parses listings between the saved Max and Min across many eBay pages with retries and throttling, builds a cleaner chart with median and 55-80% market price markers, lets you expand or collapse the chart, and shows each listing price while moving over the graph. // @author Tweeks // @match *://www.ebay.com/sch/i.html* // @grant none // ==/UserScript== (function () { 'use strict'; const RESULTS_SELECTOR = 'ul.srp-results > li.s-card'; const RESULTS_CONTAINER_SELECTOR = 'ul.srp-results'; const PRICE_SELECTOR = '.s-card__price'; const PRICE_BLOCK_SELECTOR = '.su-card-container__attributes__primary'; const PRICE_ROW_SELECTOR = '.s-card__attribute-row'; const TITLE_SELECTOR = '.s-card__title'; const LINK_SELECTOR = 'a[href*="/itm/"]'; const CONTROLS_CLASS = 'tm-ebay-minmax-controls'; const BUTTON_CLASS = 'tm-ebay-minmax-button'; const BUTTON_ACTIVE_CLASS = 'tm-ebay-minmax-button--active'; const PROCESSED_ATTR = 'data-tm-minmax-ready'; const PANEL_ID = 'tm-ebay-minmax-panel'; const PANEL_VALUES_ID = 'tm-ebay-minmax-values'; const PANEL_STATUS_ID = 'tm-ebay-minmax-status'; const PANEL_APPLY_ID = 'tm-ebay-minmax-apply'; const PANEL_PARSE_ID = 'tm-ebay-minmax-parse'; const PANEL_REFRESH_ID = 'tm-ebay-minmax-refresh'; const PANEL_EXPAND_ID = 'tm-ebay-minmax-expand'; const PANEL_CHART_ID = 'tm-ebay-minmax-chart'; const CHART_MODAL_ID = 'tm-ebay-minmax-chart-modal'; const CHART_MODAL_CONTENT_ID = 'tm-ebay-minmax-chart-modal-content'; const CHART_MODAL_CLOSE_ID = 'tm-ebay-minmax-chart-modal-close'; const CHART_MODAL_ZOOM_OUT_ID = 'tm-ebay-minmax-chart-modal-zoom-out'; const CHART_MODAL_ZOOM_IN_ID = 'tm-ebay-minmax-chart-modal-zoom-in'; const CHART_MODAL_SHORTER_ID = 'tm-ebay-minmax-chart-modal-shorter'; const CHART_MODAL_TALLER_ID = 'tm-ebay-minmax-chart-modal-taller'; const CHART_MODAL_SCALE_ID = 'tm-ebay-minmax-chart-modal-scale'; const STORAGE_KEY = 'tm-ebay-minmax-saved-range'; const MAX_PAGE_FETCHES = 120; const FETCH_PAGE_DELAY_MS = 700; const FETCH_RETRY_COUNT = 4; const FETCH_RETRY_DELAY_MS = 1200; let isParsing = false; let panelStatusText = ''; let chartModalWidthScale = 1; let chartModalHeightScale = 1; function injectStyles() { if (document.getElementById('tm-ebay-minmax-style')) return; const style = document.createElement('style'); style.id = 'tm-ebay-minmax-style'; style.textContent = ` .${CONTROLS_CLASS} { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; } .${BUTTON_CLASS}, #${PANEL_ID} button, #${CHART_MODAL_ID} button { appearance: none; border: 1px solid #3665f3; background: #fff; color: #3665f3; border-radius: 16px; padding: 5px 12px; font-size: 12px; line-height: 1.4; cursor: pointer; font-weight: 600; } .${BUTTON_CLASS}:hover, #${PANEL_ID} button:hover, #${CHART_MODAL_ID} button:hover { background: #f0f4ff; } .${BUTTON_CLASS}:active, #${PANEL_ID} button:active, #${CHART_MODAL_ID} button:active { background: #dfe7ff; } .${BUTTON_ACTIVE_CLASS} { background: #3665f3; color: #fff; } #${PANEL_ID} { position: fixed; right: 16px; bottom: 16px; z-index: 99999; width: 380px; max-width: calc(100vw - 24px); max-height: 82vh; overflow: auto; background: #fff; color: #111820; border: 1px solid #c7c7c7; border-radius: 12px; box-shadow: 0 8px 24px rgba(17, 24, 32, 0.18); padding: 12px; font-family: Arial, Helvetica, sans-serif; } #${PANEL_ID} .tm-ebay-minmax-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; } #${PANEL_ID} .tm-ebay-minmax-values { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; font-size: 12px; margin-bottom: 8px; } #${PANEL_ID} .tm-ebay-minmax-values strong { font-weight: 700; } #${PANEL_ID} .tm-ebay-minmax-status { font-size: 12px; color: #5c5f62; margin-bottom: 10px; min-height: 16px; line-height: 1.45; } #${PANEL_ID} .tm-ebay-minmax-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } #${PANEL_ID} #${PANEL_APPLY_ID}, #${PANEL_ID} #${PANEL_PARSE_ID} { background: #3665f3; color: #fff; } #${PANEL_ID} #${PANEL_APPLY_ID}:hover, #${PANEL_ID} #${PANEL_PARSE_ID}:hover { background: #2f59d9; } #${PANEL_ID} button:disabled, #${CHART_MODAL_ID} button:disabled { cursor: default; opacity: 0.55; } #${PANEL_CHART_ID} { border-top: 1px solid #e5e5e5; padding-top: 10px; } .tm-ebay-chart-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 6px 10px; font-size: 12px; margin-bottom: 8px; } .tm-ebay-chart-summary strong { display: block; font-size: 11px; color: #70757a; margin-bottom: 2px; } .tm-ebay-chart-note, .tm-ebay-chart-empty { font-size: 12px; color: #5c5f62; line-height: 1.45; } .tm-ebay-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; margin-bottom: 8px; font-size: 12px; color: #3c4043; } .tm-ebay-chart-legend-item { display: inline-flex; align-items: center; gap: 6px; } .tm-ebay-chart-swatch { width: 18px; height: 0; border-top: 3px solid #3665f3; border-radius: 999px; } .tm-ebay-chart-swatch--median { border-top-color: #d93025; border-top-style: dashed; } .tm-ebay-chart-swatch--market { border-top-color: #f29900; border-top-style: dashed; } .tm-ebay-chart-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; margin-top: 8px; margin-bottom: 10px; } .tm-ebay-chart-level { padding: 8px 10px; border: 1px solid #e2e7ec; border-left-width: 4px; border-radius: 10px; background: #fbfcfe; min-width: 0; } .tm-ebay-chart-level strong { display: block; margin-top: 2px; color: #111820; font-size: 14px; line-height: 1.25; } .tm-ebay-chart-level span { display: block; color: #5c5f62; font-size: 11px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tm-ebay-chart-level--median { border-left-color: #d93025; background: #fff7f6; } .tm-ebay-chart-level--market { border-left-color: #f29900; background: #fffaf1; } .tm-ebay-chart-viewport { display: grid; gap: 8px; } .tm-ebay-chart-hover { min-height: 18px; padding: 7px 10px; border: 1px solid #e2e7ec; border-radius: 10px; background: #f7f9fc; color: #5c5f62; font-size: 12px; line-height: 1.45; } .tm-ebay-chart-hover--active { color: #111820; background: #edf3ff; border-color: #c9d7ff; } .tm-ebay-chart-scroll { overflow: auto; padding-bottom: 2px; } .tm-ebay-chart-scroll--modal { background: #fff; border: 1px solid #e2e7ec; border-radius: 12px; padding: 10px; } .tm-ebay-chart-svg { display: block; height: auto; border: 1px solid #edf0f2; border-radius: 8px; background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); cursor: crosshair; touch-action: none; user-select: none; } .tm-ebay-chart-hover-line, .tm-ebay-chart-hover-dot { pointer-events: none; } .tm-ebay-chart-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(17, 24, 32, 0.62); } .tm-ebay-chart-modal[hidden] { display: none !important; } .tm-ebay-chart-modal__dialog { width: min(96vw, 1500px); max-height: 92vh; display: flex; flex-direction: column; background: #fff; color: #111820; border-radius: 16px; box-shadow: 0 18px 48px rgba(17, 24, 32, 0.32); overflow: hidden; font-family: Arial, Helvetica, sans-serif; } .tm-ebay-chart-modal__header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid #e5e5e5; background: #fff; } .tm-ebay-chart-modal__title { font-size: 18px; font-weight: 700; margin-bottom: 4px; } .tm-ebay-chart-modal__subtitle { font-size: 12px; color: #5c5f62; line-height: 1.45; } .tm-ebay-chart-modal__toolbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; } .tm-ebay-chart-modal__scale { min-width: 92px; text-align: center; font-size: 12px; color: #5c5f62; font-weight: 700; } .tm-ebay-chart-modal__body { padding: 14px 16px 18px; overflow: auto; background: #f7f9fc; } @media (max-width: 720px) { #${PANEL_ID} { right: 8px; bottom: 8px; width: calc(100vw - 16px); } .tm-ebay-chart-modal { padding: 8px; } .tm-ebay-chart-modal__header { flex-direction: column; } .tm-ebay-chart-modal__toolbar { justify-content: flex-start; } } `; document.head.appendChild(style); } function getDefaultState() { return { min: null, max: null, chartData: null }; } function normalizeSelection(selection) { if (!selection || typeof selection !== 'object') return null; const price = Number(selection.price); if (!Number.isFinite(price)) return null; const page = Number(selection.page); const index = Number(selection.index); return { price, title: typeof selection.title === 'string' ? selection.title : '', page: Number.isFinite(page) && page > 0 ? page : null, index: Number.isFinite(index) && index > 0 ? index : null, listingId: typeof selection.listingId === 'string' ? selection.listingId : '', itemUrl: typeof selection.itemUrl === 'string' ? selection.itemUrl : '', searchUrl: typeof selection.searchUrl === 'string' ? selection.searchUrl : '', capturedAt: Number.isFinite(Number(selection.capturedAt)) ? Number(selection.capturedAt) : Date.now() }; } function normalizeChartData(chartData) { if (!chartData || typeof chartData !== 'object' || !Array.isArray(chartData.items)) return null; const items = chartData.items .map((item) => ({ title: typeof item.title === 'string' ? item.title : '', price: Number(item.price), page: Number.isFinite(Number(item.page)) ? Number(item.page) : null, index: Number.isFinite(Number(item.index)) ? Number(item.index) : null, listingId: typeof item.listingId === 'string' ? item.listingId : '', itemUrl: typeof item.itemUrl === 'string' ? item.itemUrl : '' })) .filter((item) => Number.isFinite(item.price)); if (!items.length) return null; const prices = items.map((item) => item.price); return { generatedAt: Number.isFinite(Number(chartData.generatedAt)) ? Number(chartData.generatedAt) : Date.now(), fetchedPages: Number.isFinite(Number(chartData.fetchedPages)) ? Number(chartData.fetchedPages) : null, pageStart: Number.isFinite(Number(chartData.pageStart)) ? Number(chartData.pageStart) : null, pageEnd: Number.isFinite(Number(chartData.pageEnd)) ? Number(chartData.pageEnd) : null, itemCount: items.length, minPrice: Math.min(...prices), maxPrice: Math.max(...prices), swapped: Boolean(chartData.swapped), items }; } function loadState() { try { const raw = localStorage.getItem(STORAGE_KEY); if (!raw) return getDefaultState(); const parsed = JSON.parse(raw); const state = getDefaultState(); state.min = normalizeSelection(parsed?.min); state.max = normalizeSelection(parsed?.max); state.chartData = normalizeChartData(parsed?.chartData); if (!state.min && Number.isFinite(Number(parsed?.min))) { state.min = normalizeSelection({ price: Number(parsed.min) }); } if (!state.max && Number.isFinite(Number(parsed?.max))) { state.max = normalizeSelection({ price: Number(parsed.max) }); } return state; } catch { return getDefaultState(); } } function saveState(state) { localStorage.setItem(STORAGE_KEY, JSON.stringify({ min: state?.min || null, max: state?.max || null, chartData: state?.chartData || null })); } function clearState() { localStorage.removeItem(STORAGE_KEY); } function clamp(value, min, max) { return Math.min(max, Math.max(min, value)); } function escapeHtml(text) { return String(text || '') .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } function formatMoney(value) { if (!Number.isFinite(value)) return 'Not set'; return `$${value.toLocaleString('en-US', { minimumFractionDigits: value % 1 === 0 ? 0 : 2, maximumFractionDigits: 2 })}`; } function parsePrice(text) { if (!text) return null; const normalized = String(text) .replace(/US\s*/gi, '') .replace(/Approx\.?/gi, '') .replace(/[^\d.,]/g, ' ') .trim(); const match = normalized.match(/\d[\d,.]*/); if (!match) return null; let value = match[0].replace(/,/g, ''); if ((value.match(/\./g) || []).length > 1) { value = value.replace(/\./g, ''); } const number = parseFloat(value); return Number.isFinite(number) ? number : null; } function formatFilterValue(price) { if (!Number.isFinite(price)) return null; return Math.floor(price); } function cleanText(text) { return String(text || '') .replace(/Opens in a new window or tab/gi, '') .replace(/\s+/g, ' ') .trim(); } function getCurrentPageNumber() { const fromUrl = Number(new URL(window.location.href).searchParams.get('_pgn')); if (Number.isFinite(fromUrl) && fromUrl > 0) return fromUrl; const currentPageLink = document.querySelector('ol.pagination__items a[aria-current="page"]'); const currentPageText = Number(currentPageLink?.textContent?.trim()); return Number.isFinite(currentPageText) && currentPageText > 0 ? currentPageText : 1; } function getBaseSearchUrl(urlString) { const url = new URL(urlString || window.location.href, window.location.origin); url.hash = ''; return url.toString(); } function getSearchSignature(urlString) { const url = new URL(urlString || window.location.href, window.location.origin); url.hash = ''; url.searchParams.delete('_pgn'); return `${url.origin}${url.pathname}?${url.searchParams.toString()}`; } function buildPageUrl(urlString, pageNumber) { const url = new URL(urlString || window.location.href, window.location.origin); url.hash = ''; if (pageNumber > 1) { url.searchParams.set('_pgn', String(pageNumber)); } else { url.searchParams.delete('_pgn'); } return url.toString(); } function extractListingId(card, href) { const dataListingId = String(card?.getAttribute?.('data-listingid') || '').trim(); if (/^\d{9,15}$/.test(dataListingId)) { return dataListingId; } const match = String(href || '').match(/\/itm\/(?:[^/?#]+\/)?(\d{9,15})/i) || String(href || '').match(/[?&]item=(\d{9,15})/i); return match ? match[1] : ''; } function parseCardData(card, pageNumber) { if (!(card instanceof Element)) return null; const title = cleanText(card.querySelector(TITLE_SELECTOR)?.textContent || ''); const price = parsePrice(card.querySelector(PRICE_SELECTOR)?.textContent || ''); const link = card.querySelector(LINK_SELECTOR); const itemUrl = String(link?.href || link?.getAttribute?.('href') || '').trim(); const listingId = extractListingId(card, itemUrl); if (!title || title.toLowerCase() === 'shop on ebay') return null; if (!Number.isFinite(price)) return null; if (!itemUrl || !/\/itm\//i.test(itemUrl)) return null; if (!listingId) return null; return { title, price, page: Number.isFinite(pageNumber) && pageNumber > 0 ? pageNumber : null, index: null, listingId, itemUrl }; } function getValidCards(root = document, pageNumber = getCurrentPageNumber()) { return Array.from(root.querySelectorAll(RESULTS_SELECTOR)) .map((card) => ({ card, data: parseCardData(card, pageNumber) })) .filter((entry) => entry.data); } function createSelectionFromCard(card) { const pageNumber = getCurrentPageNumber(); const validCards = getValidCards(document, pageNumber); const matchedIndex = validCards.findIndex((entry) => entry.card === card); const matched = matchedIndex >= 0 ? validCards[matchedIndex] : null; if (!matched) return null; return { ...matched.data, index: matchedIndex + 1, searchUrl: getBaseSearchUrl(window.location.href), capturedAt: Date.now() }; } function compareSelections(a, b) { const pageA = Number(a?.page) || 0; const pageB = Number(b?.page) || 0; if (pageA !== pageB) return pageA - pageB; const indexA = Number(a?.index) || 0; const indexB = Number(b?.index) || 0; return indexA - indexB; } function canBuildChart(state) { return Boolean( state?.min && state?.max && Number.isFinite(Number(state.min.page)) && Number.isFinite(Number(state.max.page)) && Number.isFinite(Number(state.min.index)) && Number.isFinite(Number(state.max.index)) && state.min.searchUrl && state.max.searchUrl ); } function formatSelectionSummary(selection) { if (!selection) return 'Not set'; const parts = [formatMoney(selection.price)]; if (Number.isFinite(Number(selection.page)) && Number.isFinite(Number(selection.index))) { parts.push(`p${selection.page} #${selection.index}`); } return parts.join(' · '); } function summarizeTitle(selection) { if (!selection?.title) return 'Not selected'; return selection.title.length > 76 ? `${selection.title.slice(0, 73)}...` : selection.title; } function getPercentilePrice(prices, percentile) { if (!Array.isArray(prices) || !prices.length) return null; const sorted = prices.filter((price) => Number.isFinite(price)).slice().sort((a, b) => a - b); if (!sorted.length) return null; if (sorted.length === 1) return sorted[0]; const safePercentile = clamp(Number(percentile), 0, 100); const rank = ((sorted.length - 1) * safePercentile) / 100; const lowerIndex = Math.floor(rank); const upperIndex = Math.ceil(rank); const lowerValue = sorted[lowerIndex]; const upperValue = sorted[upperIndex]; if (!Number.isFinite(lowerValue)) return null; if (!Number.isFinite(upperValue)) return lowerValue; if (lowerIndex === upperIndex) return lowerValue; return lowerValue + ((upperValue - lowerValue) * (rank - lowerIndex)); } function getMedianPrice(prices) { return getPercentilePrice(prices, 50); } function getClosestIndexByPrice(items, targetPrice) { if (!Array.isArray(items) || !items.length || !Number.isFinite(targetPrice)) return 0; let closestIndex = 0; let closestDiff = Number.POSITIVE_INFINITY; items.forEach((item, index) => { const price = Number(item.price); if (!Number.isFinite(price)) return; const diff = Math.abs(price - targetPrice); if (diff < closestDiff) { closestDiff = diff; closestIndex = index; } }); return closestIndex; } function getMarketPercentileLevels(prices, items) { const levels = [50, 55, 60, 65, 70, 75, 80] .map((percent) => { const price = getPercentilePrice(prices, percent); if (!Number.isFinite(price)) return null; return { percent, price, closestIndex: getClosestIndexByPrice(items, price) }; }) .filter(Boolean); return levels; } function getChartStats(items) { if (!Array.isArray(items) || !items.length) return null; const prices = items.map((item) => Number(item.price)).filter((price) => Number.isFinite(price)); if (!prices.length) return null; const minPrice = Math.min(...prices); const maxPrice = Math.max(...prices); const marketLevels = getMarketPercentileLevels(prices, items); const medianLevel = marketLevels.find((level) => level.percent === 50) || null; const medianPrice = Number.isFinite(medianLevel?.price) ? medianLevel.price : getMedianPrice(prices); return { minPrice, maxPrice, medianPrice, closestMedianIndex: Number.isFinite(medianLevel?.closestIndex) ? medianLevel.closestIndex : getClosestIndexByPrice(items, medianPrice), itemCount: prices.length, marketLevels }; } function getChartDimensions(items, expanded) { const itemCount = Array.isArray(items) ? items.length : 0; if (!expanded) { return { width: 340, height: 208 }; } const baseWidth = Math.max(960, itemCount * 18 + 120); const baseHeight = 480; return { width: Math.round(clamp(baseWidth * chartModalWidthScale, 960, 6000)), height: Math.round(clamp(baseHeight * chartModalHeightScale, 300, 1800)) }; } function getChartGeometry(items, options = {}) { if (!Array.isArray(items) || !items.length) return null; const stats = getChartStats(items); if (!stats) return null; const width = clamp(Math.round(options.width || 340), 220, 6000); const height = clamp(Math.round(options.height || 208), 150, 1800); const expanded = Boolean(options.expanded); const padding = expanded ? { top: 52, right: 34, bottom: 40, left: 72 } : { top: 40, right: 18, bottom: 32, left: 54 }; const innerWidth = Math.max(60, width - padding.left - padding.right); const innerHeight = Math.max(60, height - padding.top - padding.bottom); const valueRange = stats.maxPrice - stats.minPrice; const pointLimit = expanded ? 220 : 80; const guideMidPrice = stats.minPrice + ((stats.maxPrice - stats.minPrice) / 2); const gridColor = '#eef3f8'; const svgStyle = expanded ? `width:${width}px;height:${height}px;max-width:none;` : `width:${width}px;height:${height}px;max-width:100%;`; const getX = (index) => { if (items.length === 1) return padding.left + innerWidth / 2; return padding.left + (innerWidth * index / (items.length - 1)); }; const getY = (price) => { if (!Number.isFinite(price)) return padding.top + innerHeight / 2; if (valueRange <= 0) return padding.top + innerHeight / 2; return padding.top + ((stats.maxPrice - price) / valueRange) * innerHeight; }; const points = items.map((item, index) => ({ x: Number(getX(index).toFixed(2)), y: Number(getY(Number(item.price)).toFixed(2)), item, index })); const polyline = points.map((point) => `${point.x},${point.y}`).join(' '); const area = `${padding.left},${height - padding.bottom} ${polyline} ${points[points.length - 1].x},${height - padding.bottom}`; const medianPoint = points[stats.closestMedianIndex] || points[0]; const marketLevels = stats.marketLevels.map((level) => ({ ...level, y: Number(getY(level.price).toFixed(2)), color: level.percent === 50 ? '#d93025' : '#f29900', strokeWidth: level.percent === 50 ? 2.2 : 1.1, strokeDasharray: level.percent === 50 ? '7 4' : '4 7', opacity: level.percent === 50 ? 0.88 : 0.45, detailText: level.percent === 50 ? 'Median' : `${level.percent}% market`, priceText: formatMoney(level.price) })); return { stats, width, height, expanded, padding, innerHeight, pointLimit, guideMidPrice, gridColor, svgStyle, points, polyline, area, medianPoint, marketLevels }; } function buildChartSvg(items, options = {}) { const geometry = getChartGeometry(items, options); if (!geometry) return ''; const { stats, width, height, expanded, padding, innerHeight, pointLimit, guideMidPrice, gridColor, svgStyle, points, polyline, area, medianPoint, marketLevels } = geometry; const circles = items.length <= pointLimit ? points.map((point) => { const title = escapeHtml(cleanText(`${point.item.title} | ${formatMoney(point.item.price)} | Page ${point.item.page}, #${point.item.index}`)); return `${title}`; }).join('') : ''; const marketLines = marketLevels.map((level) => ` `).join(''); const hoverLineX = points[0].x; const hoverDotR = expanded ? 5.2 : 4.2; return ` `; } function formatChartHoverText(item, index, total, stats) { if (!item) { return 'Move over the chart to inspect each listing price.'; } const parts = [ `Listing ${index + 1} of ${total}`, formatMoney(Number(item.price)) ]; if (Number.isFinite(Number(item.page))) { parts.push(`Page ${item.page}`); } if (Number.isFinite(Number(item.index))) { parts.push(`#${item.index}`); } if (stats && Number.isFinite(Number(stats.medianPrice))) { const delta = Number(item.price) - Number(stats.medianPrice); const absDelta = Math.abs(delta); if (absDelta < 0.005) { parts.push('at median'); } else { parts.push(`${delta > 0 ? '+' : '-'}${formatMoney(absDelta).replace('$', '')} vs median`); } } const title = cleanText(item.title || ''); return `${parts.join(' | ')} | ${title || 'Untitled listing'}`; } function buildEmptyChartMarkup(message) { return `

${escapeHtml(message || 'Select Max and Min on listings. After Min is set, the script can collect all listings between those points and draw a chart here.')}

`; } function buildMarketLevelsMarkup(stats) { if (!stats?.marketLevels?.length) return ''; return `

${stats.marketLevels.map((level) => `

${escapeHtml(level.percent === 50 ? 'Median' : `${level.percent}% market`)} ${escapeHtml(formatMoney(level.price))}

`).join('')}

`; } function buildChartMarkup(chartData, options = {}) { if (!chartData || !Array.isArray(chartData.items) || !chartData.items.length) { return buildEmptyChartMarkup(options.expanded ? 'Build the chart first, then open the expanded view.' : 'Select Max and Min on listings. After Min is set, the script can collect all listings between those points and draw a chart here.'); } const stats = getChartStats(chartData.items); if (!stats) return buildEmptyChartMarkup('No chart data available.'); const generatedAt = new Date(chartData.generatedAt || Date.now()).toLocaleString('en-US'); const pageSpan = Number.isFinite(chartData.pageStart) && Number.isFinite(chartData.pageEnd) ? `${chartData.pageStart} - ${chartData.pageEnd}` : 'Current range'; const dimensions = getChartDimensions(chartData.items, options.expanded); return `

Listings${chartData.items.length}

Pages${escapeHtml(pageSpan)}

Highest${escapeHtml(formatMoney(stats.maxPrice))}

Lowest${escapeHtml(formatMoney(stats.minPrice))}

Median${escapeHtml(formatMoney(stats.medianPrice))}

Fetched pages${Number.isFinite(chartData.fetchedPages) ? chartData.fetchedPages : '-'}

Range goes in search order from saved Max to saved Min. The red dashed line marks the median, and the orange dashed lines mark 55%, 60%, 65%, 70%, 75%, and 80% of the market. Their prices are moved into separate cards below so the chart stays readable. Move over the chart to inspect each listing price. Generated: ${escapeHtml(generatedAt)}.

Listings Median 55-80% market

${buildMarketLevelsMarkup(stats)}

Move over the chart to inspect each listing price.

`; } function attachChartHover(root, chartData, expanded) { if (!root || !chartData?.items?.length) return; const hoverBox = root.querySelector('.tm-ebay-chart-hover'); const svg = root.querySelector('.tm-ebay-chart-svg'); const hoverLine = svg?.querySelector('.tm-ebay-chart-hover-line'); const hoverDot = svg?.querySelector('.tm-ebay-chart-hover-dot'); if (!hoverBox || !svg || !hoverLine || !hoverDot) return; const dimensions = getChartDimensions(chartData.items, expanded); const geometry = getChartGeometry(chartData.items, { width: dimensions.width, height: dimensions.height, expanded }); if (!geometry?.points?.length) return; const setHover = (point) => { if (!point) return; hoverLine.setAttribute('x1', String(point.x)); hoverLine.setAttribute('x2', String(point.x)); hoverLine.setAttribute('opacity', '1'); hoverDot.setAttribute('cx', String(point.x)); hoverDot.setAttribute('cy', String(point.y)); hoverDot.setAttribute('opacity', '1'); hoverBox.textContent = formatChartHoverText(point.item, point.index, geometry.points.length, geometry.stats); hoverBox.classList.add('tm-ebay-chart-hover--active'); }; const clearHover = () => { hoverLine.setAttribute('opacity', '0'); hoverDot.setAttribute('opacity', '0'); hoverBox.textContent = 'Move over the chart to inspect each listing price.'; hoverBox.classList.remove('tm-ebay-chart-hover--active'); }; const pointFromClientX = (clientX) => { const rect = svg.getBoundingClientRect(); if (!rect.width) return geometry.points[0]; const relative = clamp((clientX - rect.left) / rect.width, 0, 1); const x = geometry.width * relative; let bestPoint = geometry.points[0]; let bestDiff = Math.abs(bestPoint.x - x); for (let i = 1; i < geometry.points.length; i += 1) { const point = geometry.points[i]; const diff = Math.abs(point.x - x); if (diff < bestDiff) { bestPoint = point; bestDiff = diff; } } return bestPoint; }; const updateFromEvent = (event) => { const point = pointFromClientX(event.clientX); setHover(point); }; svg.addEventListener('pointerdown', (event) => { event.preventDefault(); updateFromEvent(event); if (svg.setPointerCapture) { try { svg.setPointerCapture(event.pointerId); } catch { // ignore } } }); svg.addEventListener('pointermove', updateFromEvent); svg.addEventListener('pointerenter', updateFromEvent); svg.addEventListener('pointerleave', clearHover); svg.addEventListener('lostpointercapture', clearHover); } function getPanelElements() { return { values: document.getElementById(PANEL_VALUES_ID), status: document.getElementById(PANEL_STATUS_ID), apply: document.getElementById(PANEL_APPLY_ID), parse: document.getElementById(PANEL_PARSE_ID), refresh: document.getElementById(PANEL_REFRESH_ID), expand: document.getElementById(PANEL_EXPAND_ID), chart: document.getElementById(PANEL_CHART_ID) }; } function getChartModalElements() { return { root: document.getElementById(CHART_MODAL_ID), content: document.getElementById(CHART_MODAL_CONTENT_ID), close: document.getElementById(CHART_MODAL_CLOSE_ID), zoomOut: document.getElementById(CHART_MODAL_ZOOM_OUT_ID), zoomIn: document.getElementById(CHART_MODAL_ZOOM_IN_ID), shorter: document.getElementById(CHART_MODAL_SHORTER_ID), taller: document.getElementById(CHART_MODAL_TALLER_ID), scale: document.getElementById(CHART_MODAL_SCALE_ID) }; } function ensureChartModal() { let modal = document.getElementById(CHART_MODAL_ID); if (modal) return modal; modal = document.createElement('div'); modal.id = CHART_MODAL_ID; modal.className = 'tm-ebay-chart-modal'; modal.hidden = true; modal.innerHTML = ` `; document.body.appendChild(modal); modal.addEventListener('click', (event) => { if (event.target === modal) { closeChartModal(); updatePanel(); } }); modal.querySelector(`#${CHART_MODAL_CLOSE_ID}`)?.addEventListener('click', (event) => { event.preventDefault(); closeChartModal(); updatePanel(); }); modal.querySelector(`#${CHART_MODAL_ZOOM_OUT_ID}`)?.addEventListener('click', (event) => { event.preventDefault(); adjustChartModalScale('width', -0.2); }); modal.querySelector(`#${CHART_MODAL_ZOOM_IN_ID}`)?.addEventListener('click', (event) => { event.preventDefault(); adjustChartModalScale('width', 0.2); }); modal.querySelector(`#${CHART_MODAL_SHORTER_ID}`)?.addEventListener('click', (event) => { event.preventDefault(); adjustChartModalScale('height', -0.15); }); modal.querySelector(`#${CHART_MODAL_TALLER_ID}`)?.addEventListener('click', (event) => { event.preventDefault(); adjustChartModalScale('height', 0.15); }); document.addEventListener('keydown', (event) => { if (event.key === 'Escape' && !modal.hidden) { closeChartModal(); updatePanel(); } }); return modal; } function isChartModalOpen() { const { root } = getChartModalElements(); return Boolean(root && !root.hidden); } function syncChartModal() { const modal = ensureChartModal(); const { content, scale } = getChartModalElements(); if (!content || !scale) return; const state = loadState(); content.innerHTML = buildChartMarkup(state.chartData, { expanded: true }); attachChartHover(content, state.chartData, true); scale.textContent = `${Math.round(chartModalWidthScale * 100)}% x ${Math.round(chartModalHeightScale * 100)}%`; if (state.chartData?.items?.length) { modal.hidden = false; document.documentElement.style.overflow = 'hidden'; document.body.style.overflow = 'hidden'; } } function openChartModal() { const state = loadState(); if (!state.chartData?.items?.length) { panelStatusText = 'Build the chart first, then expand it.'; updatePanel(); return; } chartModalWidthScale = 1; chartModalHeightScale = 1; syncChartModal(); updatePanel(); } function closeChartModal() { const { root } = getChartModalElements(); if (!root) return; root.hidden = true; document.documentElement.style.overflow = ''; document.body.style.overflow = ''; } function adjustChartModalScale(type, delta) { if (type === 'width') { chartModalWidthScale = clamp(chartModalWidthScale + delta, 0.6, 4); } else { chartModalHeightScale = clamp(chartModalHeightScale + delta, 0.6, 3); } if (isChartModalOpen()) { syncChartModal(); } } function renderChart(chartRoot, chartData) { if (!chartRoot) return; chartRoot.innerHTML = buildChartMarkup(chartData, { expanded: false }); attachChartHover(chartRoot, chartData, false); } function updatePanel(statusText) { const { values, status, apply, parse, expand, chart } = getPanelElements(); if (!values || !status || !apply || !parse || !expand || !chart) return; if (typeof statusText === 'string') { panelStatusText = statusText; } const state = loadState(); const chartCount = state.chartData?.items?.length || 0; const chartStats = getChartStats(state.chartData?.items || []); const modalOpen = isChartModalOpen(); values.innerHTML = ` Max:${escapeHtml(formatSelectionSummary(state.max))} Max item:${escapeHtml(summarizeTitle(state.max))} Min:${escapeHtml(formatSelectionSummary(state.min))} Min item:${escapeHtml(summarizeTitle(state.min))} Collected:${chartCount ? `${chartCount} listing(s)` : 'No chart yet'} Median:${chartStats ? escapeHtml(formatMoney(chartStats.medianPrice)) : 'Not built yet'} `; if (panelStatusText) { status.textContent = panelStatusText; } else if (!state.min && !state.max) { status.textContent = 'Pick Max and Min on listings.'; } else if (canBuildChart(state)) { status.textContent = state.chartData ? 'Chart is ready. Expand it for a larger view or move over it to inspect each price.' : 'Ready to parse the saved range.'; } else { status.textContent = 'Saved prices are available, but Max and Min should be selected again for cross-page parsing.'; } apply.disabled = !state.min && !state.max; parse.disabled = isParsing || !canBuildChart(state); parse.textContent = isParsing ? 'Parsing...' : 'Build chart'; expand.disabled = !state.chartData?.items?.length; expand.textContent = modalOpen ? 'Collapse chart' : 'Expand chart'; renderChart(chart, state.chartData); syncCardButtonStates(); if (modalOpen) { if (state.chartData?.items?.length) { syncChartModal(); } else { closeChartModal(); expand.textContent = 'Expand chart'; } } } function persistSelection(type, selection) { if (!selection) return; const state = loadState(); state[type] = selection; state.chartData = null; saveState(state); if (isChartModalOpen()) { closeChartModal(); } panelStatusText = `${type === 'min' ? 'Min' : 'Max'} saved: ${formatMoney(selection.price)}${selection.page ? ` on page ${selection.page}` : ''}.`; updatePanel(); if (type === 'min' && canBuildChart(state)) { void parseSavedRange(true); } } function applySavedRange() { const state = loadState(); const url = new URL(window.location.href); const minValue = Number.isFinite(Number(state.min?.price)) ? formatFilterValue(state.min.price) : null; const maxValue = Number.isFinite(Number(state.max?.price)) ? formatFilterValue(state.max.price) : null; if (minValue === null && maxValue === null) { panelStatusText = 'Nothing saved yet.'; updatePanel(); return; } if (minValue !== null) { url.searchParams.set('_udlo', String(minValue)); } else { url.searchParams.delete('_udlo'); } if (maxValue !== null) { url.searchParams.set('_udhi', String(maxValue)); } else { url.searchParams.delete('_udhi'); } window.location.href = url.toString(); } function refreshPanel() { clearState(); panelStatusText = 'Panel refreshed.'; closeChartModal(); updatePanel(); } function createPanel() { if (document.getElementById(PANEL_ID)) return; const panel = document.createElement('div'); panel.id = PANEL_ID; panel.innerHTML = `

Saved price range

`; document.body.appendChild(panel); panel.querySelector(`#${PANEL_APPLY_ID}`)?.addEventListener('click', (event) => { event.preventDefault(); event.stopPropagation(); applySavedRange(); }); panel.querySelector(`#${PANEL_PARSE_ID}`)?.addEventListener('click', async (event) => { event.preventDefault(); event.stopPropagation(); await parseSavedRange(false); }); panel.querySelector(`#${PANEL_EXPAND_ID}`)?.addEventListener('click', (event) => { event.preventDefault(); event.stopPropagation(); if (isChartModalOpen()) { closeChartModal(); updatePanel(); } else { openChartModal(); } }); panel.querySelector(`#${PANEL_REFRESH_ID}`)?.addEventListener('click', (event) => { event.preventDefault(); event.stopPropagation(); refreshPanel(); }); ensureChartModal(); updatePanel(); } function createButton(label, type, card) { const button = document.createElement('button'); button.type = 'button'; button.textContent = label; button.className = BUTTON_CLASS; button.dataset.tmRangeType = type; button.addEventListener('click', (event) => { event.preventDefault(); event.stopPropagation(); const selection = createSelectionFromCard(card); if (!selection) { panelStatusText = 'Could not read this listing.'; updatePanel(); return; } persistSelection(type, selection); }); return button; } function syncCardButtonStates() { const state = loadState(); const maxId = state.max?.listingId || ''; const minId = state.min?.listingId || ''; document.querySelectorAll(`.${CONTROLS_CLASS}`).forEach((controls) => { const card = controls.closest(RESULTS_SELECTOR); const cardId = extractListingId(card, card?.querySelector(LINK_SELECTOR)?.href || ''); controls.querySelectorAll(`.${BUTTON_CLASS}`).forEach((button) => { const type = button.dataset.tmRangeType; const isActive = (type === 'max' && cardId && cardId === maxId) || (type === 'min' && cardId && cardId === minId); button.classList.toggle(BUTTON_ACTIVE_CLASS, isActive); }); }); } function enhanceCard(card) { if (!(card instanceof HTMLElement)) return; if (card.getAttribute(PROCESSED_ATTR) === '1') return; const parsed = parseCardData(card, getCurrentPageNumber()); if (!parsed) { card.setAttribute(PROCESSED_ATTR, '1'); return; } const priceEl = card.querySelector(PRICE_SELECTOR); const host = card.querySelector(PRICE_BLOCK_SELECTOR) || priceEl?.parentElement; if (!priceEl || !host) return; const controls = document.createElement('div'); controls.className = CONTROLS_CLASS; controls.append( createButton('Min', 'min', card), createButton('Max', 'max', card) ); const priceRow = priceEl.closest(PRICE_ROW_SELECTOR); if (priceRow && priceRow.parentElement === host) { priceRow.insertAdjacentElement('afterend', controls); } else { host.insertBefore(controls, host.firstChild); } card.setAttribute(PROCESSED_ATTR, '1'); } function enhanceAll(root = document) { root.querySelectorAll?.(RESULTS_SELECTOR).forEach(enhanceCard); syncCardButtonStates(); } function initObserver() { const results = document.querySelector(RESULTS_CONTAINER_SELECTOR); if (!results) return; const observer = new MutationObserver((mutations) => { for (const mutation of mutations) { for (const node of mutation.addedNodes) { if (!(node instanceof HTMLElement)) continue; if (node.matches?.(RESULTS_SELECTOR)) { enhanceCard(node); } else { enhanceAll(node); } } } }); observer.observe(results, { childList: true, subtree: true }); } function sleep(ms) { return new Promise((resolve) => window.setTimeout(resolve, Math.max(0, Number(ms) || 0))); } function isTemporaryBlockDocument(doc) { if (!(doc instanceof Document)) return false; const text = cleanText(doc.body?.textContent || doc.documentElement?.textContent || '').toLowerCase(); return [ 'to continue, please verify', 'complete the security check', 'puzzle', 'robot', 'captcha', 'sorry, we just need to make sure', 'access to this page has been denied' ].some((fragment) => text.includes(fragment)); } function parseListingsFromDocument(doc, pageNumber) { const items = getValidCards(doc, pageNumber).map((entry, index) => ({ ...entry.data, index: index + 1 })); if (items.length) { return items; } if (isTemporaryBlockDocument(doc)) { throw new Error(`eBay temporarily blocked page ${pageNumber}.`); } const hasResultsShell = Boolean( doc.querySelector(RESULTS_CONTAINER_SELECTOR) || doc.querySelector('.s-pagination, nav.pagination, ol.pagination__items') || doc.querySelector('.srp-controls__count-heading, .srp-save-null-search') ); if (hasResultsShell) { throw new Error(`Page ${pageNumber} loaded without listings. eBay may have rate-limited the requests.`); } throw new Error(`Could not read listings from page ${pageNumber}.`); } async function fetchPageListings(baseUrl, pageNumber) { const targetUrl = buildPageUrl(baseUrl, pageNumber); if (getSearchSignature(targetUrl) === getSearchSignature(window.location.href) && getCurrentPageNumber() === pageNumber) { return getValidCards(document, pageNumber).map((entry, index) => ({ ...entry.data, index: index + 1 })); } let lastError = null; for (let attempt = 1; attempt <= FETCH_RETRY_COUNT; attempt += 1) { try { const response = await fetch(targetUrl, { credentials: 'same-origin', cache: 'no-store' }); if (!response.ok) { throw new Error(`Failed to load page ${pageNumber} (HTTP ${response.status}).`); } const html = await response.text(); const doc = new DOMParser().parseFromString(html, 'text/html'); return parseListingsFromDocument(doc, pageNumber); } catch (error) { lastError = error; if (attempt >= FETCH_RETRY_COUNT) break; panelStatusText = `Page ${pageNumber}: retry ${attempt + 1}/${FETCH_RETRY_COUNT}...`; updatePanel(); await sleep(FETCH_RETRY_DELAY_MS * attempt); } } throw lastError instanceof Error ? lastError : new Error(`Failed to read page ${pageNumber}.`); } function findSelectionIndex(items, selection) { if (!Array.isArray(items) || !items.length || !selection) return null; if (selection.listingId) { const exactIndex = items.findIndex((item) => item.listingId === selection.listingId); if (exactIndex >= 0) return exactIndex + 1; } if (Number.isFinite(Number(selection.index)) && selection.index > 0) { return Math.min(Math.max(1, Number(selection.index)), items.length); } return null; } function sliceItemsForPage(items, pageNumber, startSelection, endSelection) { if (!Array.isArray(items) || !items.length) return []; let startIndex = 1; let endIndex = items.length; if (pageNumber === startSelection.page) { startIndex = findSelectionIndex(items, startSelection) || 1; } if (pageNumber === endSelection.page) { endIndex = findSelectionIndex(items, endSelection) || items.length; } if (startIndex > endIndex) return []; return items.slice(startIndex - 1, endIndex); } async function parseSavedRange(autoStarted) { if (isParsing) return; const state = loadState(); if (!canBuildChart(state)) { panelStatusText = 'Select Max and Min again to build the chart.'; updatePanel(); return; } if (getSearchSignature(state.max.searchUrl) !== getSearchSignature(state.min.searchUrl)) { panelStatusText = 'Max and Min were selected on different searches. Refresh the panel and select them again.'; updatePanel(); return; } let startSelection = state.max; let endSelection = state.min; let swapped = false; if (compareSelections(startSelection, endSelection) > 0) { startSelection = state.min; endSelection = state.max; swapped = true; } const totalPages = endSelection.page - startSelection.page + 1; if (totalPages < 1) { panelStatusText = 'The saved range is invalid. Pick Max and Min again.'; updatePanel(); return; } if (totalPages > MAX_PAGE_FETCHES) { panelStatusText = `This range spans ${totalPages} pages. Limit is ${MAX_PAGE_FETCHES} pages per parse.`; updatePanel(); return; } if (isChartModalOpen()) { closeChartModal(); } isParsing = true; panelStatusText = autoStarted ? `Min saved. Parsing ${totalPages} page(s)...` : `Parsing ${totalPages} page(s)...`; updatePanel(); try { const collected = []; const baseUrl = startSelection.searchUrl || endSelection.searchUrl || window.location.href; for (let page = startSelection.page; page <= endSelection.page; page += 1) { if (page > startSelection.page) { panelStatusText = `Waiting before page ${page}...`; updatePanel(); await sleep(FETCH_PAGE_DELAY_MS); } panelStatusText = `Parsing page ${page} of ${endSelection.page}...`; updatePanel(); const pageItems = await fetchPageListings(baseUrl, page); const sliced = sliceItemsForPage(pageItems, page, startSelection, endSelection); collected.push(...sliced); } if (!collected.length) { throw new Error('No listings were found between the saved Max and Min.'); } const prices = collected.map((item) => item.price); const freshState = loadState(); freshState.chartData = { generatedAt: Date.now(), fetchedPages: totalPages, pageStart: startSelection.page, pageEnd: endSelection.page, itemCount: collected.length, minPrice: Math.min(...prices), maxPrice: Math.max(...prices), swapped, items: collected }; saveState(freshState); panelStatusText = `Chart ready: ${collected.length} listing(s) collected from Max to Min.`; isParsing = false; updatePanel(); } catch (error) { panelStatusText = error instanceof Error ? error.message : 'Failed to build the chart.'; isParsing = false; updatePanel(); } } function init() { injectStyles(); createPanel(); enhanceAll(); initObserver(); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init, { once: true }); } else { init(); } })();