// ==UserScript== // @name Amazon Price History // @namespace https://tweeks.io/ // @version 1.0.0 // @description Show price history graph on Amazon product pages. Price history sourced from CamelCamelCamel. // @author Tweeks // @match *://www.amazon.com/* // @match *://amazon.com/* // @match *://smile.amazon.com/* // @match *://www.amazon.ca/* // @match *://amazon.ca/* // @match *://www.amazon.co.uk/* // @match *://amazon.co.uk/* // @match *://www.amazon.de/* // @match *://amazon.de/* // @match *://www.amazon.fr/* // @match *://amazon.fr/* // @match *://www.amazon.it/* // @match *://amazon.it/* // @match *://www.amazon.es/* // @match *://amazon.es/* // @match *://www.amazon.co.jp/* // @match *://amazon.co.jp/* // @match *://www.amazon.com.au/* // @match *://amazon.com.au/* // @grant GM_xmlhttpRequest // @grant GM_getValue // @grant GM_setValue // @grant GM_registerMenuCommand // @connect camelcamelcamel.com // @connect charts.camelcamelcamel.com // @run-at document-idle // @noframes // ==/UserScript== (function() { 'use strict'; // ========================================================================= // CONFIGURATION // ========================================================================= const CONFIG = { debug: GM_getValue('debug', false), enabled: GM_getValue('enabled', true), cacheSize: 100, chartWidth: 350, chartHeight: 300, debounceDelay: 300, retryDelay: 3000, maxRetries: 2, containerId: 'ccc-price-history' }; // Amazon TLD to CCC locale mapping const LOCALE_MAP = { 'com': 'us', 'ca': 'ca', 'co.uk': 'uk', 'de': 'de', 'at': 'de', 'fr': 'fr', 'it': 'it', 'es': 'es', 'co.jp': 'jp', 'com.au': 'au' }; // DOM placement anchors in priority order const PLACEMENT_ANCHORS = [ { selector: '#buybox', position: 'prepend' }, { selector: '#buy-box_feature_div', position: 'prepend' }, { selector: '#buybox_feature_div', position: 'prepend' }, { selector: '#rightCol', position: 'prepend' }, { selector: '#desktop_buybox', position: 'prepend' }, { selector: '#ppd-right-col', position: 'prepend' }, { selector: '#price_feature_div', position: 'after' }, { selector: '#corePrice_feature_div', position: 'after' }, { selector: '#apex_desktop', position: 'prepend' } ]; // ========================================================================= // UTILITIES // ========================================================================= function log(...args) { if (CONFIG.debug) { console.log('[CCC]', ...args); } } function logError(...args) { console.error('[CCC]', ...args); } function debounce(func, wait) { let timeout; return function(...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); }; } function waitForElement(selector, timeout = 10000) { return new Promise((resolve, reject) => { const element = document.querySelector(selector); if (element) { return resolve(element); } const observer = new MutationObserver((mutations, obs) => { const element = document.querySelector(selector); if (element) { obs.disconnect(); resolve(element); } }); observer.observe(document.body, { childList: true, subtree: true }); if (timeout > 0) { setTimeout(() => { observer.disconnect(); reject(new Error(`Element ${selector} not found within ${timeout}ms`)); }, timeout); } }); } // ========================================================================= // LRU CACHE // ========================================================================= class LRUCache { constructor(limit) { this.limit = limit; this.cache = new Map(); } get(key) { if (!this.cache.has(key)) return undefined; const value = this.cache.get(key); // Move to end (most recently used) this.cache.delete(key); this.cache.set(key, value); return value; } set(key, value) { if (this.cache.has(key)) { this.cache.delete(key); } else if (this.cache.size >= this.limit) { // Delete oldest (first item) const firstKey = this.cache.keys().next().value; this.cache.delete(firstKey); } this.cache.set(key, value); } has(key) { return this.cache.has(key); } } // ========================================================================= // STATE // ========================================================================= const cache = new LRUCache(CONFIG.cacheSize); let currentASIN = null; let observer = null; let ui = { container: null, shadow: null }; const Status = { NONE: 0, FETCHING: 1, DONE: 2, ERROR: 3 }; // ========================================================================= // LOCALE & ASIN DETECTION // ========================================================================= function getLocaleFromHostname() { const hostname = window.location.hostname; const match = hostname.match(/amazon\.([a-z.]+)$/i); if (!match) return 'us'; return LOCALE_MAP[match[1]] || 'us'; } function getASIN() { // Try DOM elements first const asinElement = document.getElementById('ASIN') || document.getElementById('asin'); if (asinElement && asinElement.value) { log('ASIN from DOM:', asinElement.value); return asinElement.value; } // Try data attribute const dpElement = document.getElementById('dp'); if (dpElement && dpElement.dataset.asin) { log('ASIN from data attribute:', dpElement.dataset.asin); return dpElement.dataset.asin; } // Try URL patterns const urlPatterns = [ /\/dp\/([A-Z0-9]{10})(?:[/?]|$)/i, /\/gp\/product\/([A-Z0-9]{10})(?:[/?]|$)/i, /\/product\/([A-Z0-9]{10})(?:[/?]|$)/i, /[?&]asin=([A-Z0-9]{10})(?:&|$)/i ]; for (const pattern of urlPatterns) { const match = window.location.href.match(pattern); if (match) { log('ASIN from URL:', match[1]); return match[1]; } } log('ASIN not found'); return null; } // ========================================================================= // CCC FETCHER // ========================================================================= function fetchCCCProductPage(asin) { return new Promise((resolve, reject) => { // Always use US CCC - best data coverage, and price trends are globally relevant const url = `https://camelcamelcamel.com/product/${asin}`; log('Fetching CCC page:', url); GM_xmlhttpRequest({ method: 'GET', url: url, headers: { 'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8', 'Accept-Language': 'en-US,en;q=0.5' }, timeout: 15000, onload: (response) => { if (response.status >= 200 && response.status < 400) { resolve(response.responseText); } else { reject(new Error(`HTTP ${response.status}`)); } }, onerror: () => reject(new Error('Network error')), ontimeout: () => reject(new Error('Request timeout')) }); }); } function getCCCProductUrl(asin) { // Always link to US CCC for best data coverage return `https://camelcamelcamel.com/product/${asin}`; } function parseCCCResponse(html, asin, userLocale) { const result = { asin: asin, userLocale: userLocale, // Track user's locale for UI hints camelUrl: getCCCProductUrl(asin), graphAmazonURL: null, graph3PNewURL: null, graph3PUsedURL: null, status: Status.DONE }; // Always use US charts - best data coverage const chartBase = `https://charts.camelcamelcamel.com/us/${asin}`; const chartParams = 'force=1&zero=0&desired=false&legend=1&ilt=1&tp=all&fo=0&lang=en'; // Check Amazon price availability const amazonMatch = html.match(/value="amazon"\s*id="price_type_(0|amazon)"[^>]*>/i); if (amazonMatch && !/disabled="disabled"/i.test(amazonMatch[0])) { result.graphAmazonURL = `${chartBase}/amazon.png?${chartParams}`; log('Amazon graph available'); } // Check 3P New availability const newMatch = html.match(/value="new"\s*id="price_type_(1|new)"[^>]*>/i); if (newMatch && !/disabled="disabled"/i.test(newMatch[0])) { result.graph3PNewURL = `${chartBase}/new.png?${chartParams}`; log('3P New graph available'); } // Check 3P Used availability const usedMatch = html.match(/value="used"\s*id="price_type_(2|used)"[^>]*>/i); if (usedMatch && !/disabled="disabled"/i.test(usedMatch[0])) { result.graph3PUsedURL = `${chartBase}/used.png?${chartParams}`; log('3P Used graph available'); } return result; } function getBestGraphURL(cccData) { const sizeParam = `&w=${CONFIG.chartWidth}&h=${CONFIG.chartHeight}`; // Priority: Amazon > 3P New > 3P Used > Default Amazon let baseUrl = cccData.graphAmazonURL || cccData.graph3PNewURL || cccData.graph3PUsedURL; // Fallback to default Amazon graph (always US) if (!baseUrl) { const chartBase = `https://charts.camelcamelcamel.com/us/${cccData.asin}`; const chartParams = 'force=1&zero=0&desired=false&legend=1&ilt=1&tp=all&fo=0&lang=en'; baseUrl = `${chartBase}/amazon.png?${chartParams}`; } return baseUrl + sizeParam; } function loadImageAsDataURL(url, imgElement) { GM_xmlhttpRequest({ method: 'GET', url: url, responseType: 'blob', onload: (response) => { if (response.status >= 200 && response.status < 400) { const reader = new FileReader(); reader.onloadend = () => { imgElement.src = reader.result; }; reader.readAsDataURL(response.response); } }, onerror: () => logError('Failed to load chart image as data URL') }); } // ========================================================================= // UI (Shadow DOM for isolation) // ========================================================================= function createUI(cccData) { const container = document.createElement('div'); container.id = CONFIG.containerId; // Use closed shadow DOM to prevent page styles from affecting our UI const shadow = container.attachShadow({ mode: 'closed' }); const styles = document.createElement('style'); styles.textContent = ` :host { display: block; margin: 10px 0; } .panel { background: #fff; border: 1px solid #d5d9d9; border-radius: 8px; padding: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); max-width: ${CONFIG.chartWidth + 24}px; font-family: "Amazon Ember", Arial, sans-serif; } .header { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #0F1111; margin-bottom: 8px; } .header svg { flex-shrink: 0; } .chart-link { display: block; text-decoration: none; } .chart-img { width: 100%; max-width: ${CONFIG.chartWidth}px; height: auto; border-radius: 4px; display: block; } .footer { margin-top: 8px; font-size: 11px; color: #565959; } .footer a { color: #007185; text-decoration: none; } .footer a:hover { text-decoration: underline; color: #c7511f; } .locale-hint { font-size: 10px; font-weight: 400; color: #565959; margin-left: 4px; } .error { color: #c40000; font-size: 12px; padding: 8px; text-align: center; } `; const panel = document.createElement('div'); panel.className = 'panel'; // Header - show locale hint for non-US users const header = document.createElement('div'); header.className = 'header'; const localeHint = cccData.userLocale !== 'us' ? '(USD)' : ''; header.innerHTML = ` Price History${localeHint} `; panel.appendChild(header); // Chart image link const link = document.createElement('a'); link.className = 'chart-link'; link.href = cccData.camelUrl; link.target = '_blank'; link.rel = 'noopener noreferrer'; // link.title = 'View full price history on CamelCamelCamel'; const img = document.createElement('img'); img.className = 'chart-img'; img.src = getBestGraphURL(cccData); img.alt = 'Price History Chart'; img.loading = 'lazy'; // Handle image load error - fall back to data URL img.onerror = () => { log('Chart image failed to load, trying data URL fallback'); loadImageAsDataURL(getBestGraphURL(cccData), img); }; link.appendChild(img); panel.appendChild(link); // Footer const footer = document.createElement('div'); footer.className = 'footer'; footer.innerHTML = `View on CamelCamelCamel`; panel.appendChild(footer); shadow.appendChild(styles); shadow.appendChild(panel); ui.container = container; ui.shadow = shadow; return container; } function removeUI() { const existing = document.getElementById(CONFIG.containerId); if (existing) { existing.remove(); log('Removed existing UI'); } ui.container = null; ui.shadow = null; } // ========================================================================= // DOM INJECTION // ========================================================================= function findPlacementAnchor() { for (const anchor of PLACEMENT_ANCHORS) { const element = document.querySelector(anchor.selector); if (element) { log('Found placement anchor:', anchor.selector); return { element, position: anchor.position }; } } log('No placement anchor found'); return null; } function injectUI(cccData) { removeUI(); const anchor = findPlacementAnchor(); if (!anchor) { log('Cannot inject UI - no anchor found'); return false; } const container = createUI(cccData); switch (anchor.position) { case 'prepend': anchor.element.insertBefore(container, anchor.element.firstChild); break; case 'append': anchor.element.appendChild(container); break; case 'before': anchor.element.parentNode.insertBefore(container, anchor.element); break; case 'after': anchor.element.parentNode.insertBefore(container, anchor.element.nextSibling); break; default: anchor.element.insertBefore(container, anchor.element.firstChild); } log('UI injected successfully'); return true; } // ========================================================================= // MAIN LOGIC // ========================================================================= async function processProduct(asin, retryCount = 0) { if (!asin) return; const locale = getLocaleFromHostname(); const cacheKey = `${locale}-${asin}`; // Check cache if (cache.has(cacheKey)) { const cached = cache.get(cacheKey); if (cached.status === Status.DONE) { log('Using cached data for:', cacheKey); injectUI(cached); return; } } // Create initial cache entry const cccData = { asin: asin, userLocale: locale, camelUrl: getCCCProductUrl(asin), status: Status.FETCHING }; cache.set(cacheKey, cccData); try { log('Fetching CCC data for:', asin, '(user locale:', locale + ')'); const html = await fetchCCCProductPage(asin); const result = parseCCCResponse(html, asin, locale); cache.set(cacheKey, result); // Verify ASIN hasn't changed during fetch if (currentASIN === asin) { injectUI(result); } } catch (error) { logError('Error fetching CCC data:', error.message); if (retryCount < CONFIG.maxRetries) { log(`Retrying in ${CONFIG.retryDelay}ms (attempt ${retryCount + 1}/${CONFIG.maxRetries})`); setTimeout(() => { if (currentASIN === asin) { processProduct(asin, retryCount + 1); } }, CONFIG.retryDelay); } else { // Use fallback - direct chart URL without CCC page fetch const fallbackData = { asin: asin, userLocale: locale, camelUrl: getCCCProductUrl(asin), graphAmazonURL: null, status: Status.ERROR }; cache.set(cacheKey, fallbackData); if (currentASIN === asin) { injectUI(fallbackData); } } } } // ========================================================================= // PAGE MONITORING // ========================================================================= function checkForProductPage() { if (!CONFIG.enabled) return; // Verify this is a product page const isProductPage = /\/(dp|gp\/product)\/[A-Z0-9]{10}/i.test(window.location.pathname); if (!isProductPage) { removeUI(); currentASIN = null; return; } const asin = getASIN(); if (!asin) { log('Product page detected but ASIN not found'); return; } if (asin !== currentASIN) { log('ASIN changed:', currentASIN, '->', asin); currentASIN = asin; removeUI(); processProduct(asin); } else if (!document.getElementById(CONFIG.containerId)) { // UI was removed (e.g., by variant change), re-inject log('Re-injecting UI for:', asin); const locale = getLocaleFromHostname(); const cacheKey = `${locale}-${asin}`; if (cache.has(cacheKey) && cache.get(cacheKey).status === Status.DONE) { injectUI(cache.get(cacheKey)); } else { processProduct(asin); } } } const debouncedCheck = debounce(checkForProductPage, CONFIG.debounceDelay); function setupObserver() { if (observer) { observer.disconnect(); } const targetNode = document.getElementById('dp') || document.getElementById('ppd') || document.body; observer = new MutationObserver((mutations) => { const uiRemoved = !document.getElementById(CONFIG.containerId); let significantChange = false; for (const mutation of mutations) { if (mutation.type === 'childList' && (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0)) { const target = mutation.target; if (target.id && /buybox|price|rightCol|centerCol/i.test(target.id)) { significantChange = true; break; } } } if (uiRemoved || significantChange) { debouncedCheck(); } }); observer.observe(targetNode, { childList: true, subtree: true }); log('MutationObserver set up'); } function setupURLChangeDetection() { let lastURL = window.location.href; const originalPushState = history.pushState; const originalReplaceState = history.replaceState; history.pushState = function(...args) { originalPushState.apply(this, args); if (window.location.href !== lastURL) { lastURL = window.location.href; log('URL changed (pushState)'); debouncedCheck(); } }; history.replaceState = function(...args) { originalReplaceState.apply(this, args); if (window.location.href !== lastURL) { lastURL = window.location.href; log('URL changed (replaceState)'); debouncedCheck(); } }; window.addEventListener('popstate', () => { if (window.location.href !== lastURL) { lastURL = window.location.href; log('URL changed (popstate)'); debouncedCheck(); } }); } // ========================================================================= // MENU COMMANDS // ========================================================================= function setupMenuCommands() { GM_registerMenuCommand(CONFIG.enabled ? 'Disable Price History' : 'Enable Price History', () => { CONFIG.enabled = !CONFIG.enabled; GM_setValue('enabled', CONFIG.enabled); if (CONFIG.enabled) { checkForProductPage(); } else { removeUI(); } // Re-register to update label location.reload(); }); GM_registerMenuCommand(CONFIG.debug ? 'Disable Debug Mode' : 'Enable Debug Mode', () => { CONFIG.debug = !CONFIG.debug; GM_setValue('debug', CONFIG.debug); location.reload(); }); } // ========================================================================= // INIT // ========================================================================= function init() { log('Initializing Amazon Price History (CCC)'); log('Locale:', getLocaleFromHostname()); log('Enabled:', CONFIG.enabled); setupMenuCommands(); if (!CONFIG.enabled) { log('Script disabled by user'); return; } setupURLChangeDetection(); setupObserver(); checkForProductPage(); } init(); })();