// ==UserScript== // @name PartsTracker - Copy Part Numbers, Word Phrase Builder & Damage Level // @namespace tweeks.io // @version 1.4 // @description Adds a copy button for part numbers, makes product title words clickable to build a phrase, and adds a damage level input (1-10) per product card // @author Tweeks // @match https://app.partstracker.parts/* // @grant GM_setValue // @grant GM_getValue // ==/UserScript== (function () { 'use strict'; const BUTTON_CLASS = 'pt-copy-pn-btn'; const DAMAGE_CLASS = 'pt-damage-box'; // ----------------------------------------------------------------------- // DAMAGE LEVEL STORAGE (persisted via GM_getValue/GM_setValue) // Key: product card identifier (eBay item number or index) // ----------------------------------------------------------------------- function getDamageKey(card) { // Try to find the eBay item number tag as a unique key const tag = card.querySelector('.ant-tag.ant-tag-checkable span'); if (tag) { const text = tag.textContent.trim(); if (/^#\d+/.test(text)) return 'dmg_' + text.replace('#', ''); } return null; } const style = document.createElement('style'); style.textContent = ` .${BUTTON_CLASS} { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; line-height: 1.5; cursor: pointer; border: 1px solid #4096ff; border-radius: 4px; background: transparent; color: #4096ff; transition: background 0.2s, color 0.2s; white-space: nowrap; margin-left: 8px; vertical-align: middle; } .${BUTTON_CLASS}:hover { background: #4096ff; color: #fff; } .${BUTTON_CLASS}.copied { border-color: #52c41a; color: #52c41a; } .${BUTTON_CLASS}.copied:hover { background: #52c41a; color: #fff; } .${DAMAGE_CLASS} { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; vertical-align: middle; } .${DAMAGE_CLASS} label { font-size: 11px; color: #aaa; white-space: nowrap; user-select: none; } .${DAMAGE_CLASS} input[type="number"] { width: 52px; padding: 2px 5px; font-size: 12px; line-height: 1.5; border: 1px solid #555; border-radius: 4px; background: #1a1a2e; color: #e0e0e0; text-align: center; outline: none; transition: border-color 0.2s; } .${DAMAGE_CLASS} input[type="number"]:focus { border-color: #4096ff; } .${DAMAGE_CLASS} input[type="number"]::-webkit-inner-spin-button, .${DAMAGE_CLASS} input[type="number"]::-webkit-outer-spin-button { opacity: 1; } .${DAMAGE_CLASS}.dmg-saved input[type="number"] { border-color: #52c41a; } .${DAMAGE_CLASS} .dmg-level-badge { display: inline-block; min-width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; font-size: 11px; font-weight: 700; background: #333; color: #aaa; transition: background 0.2s, color 0.2s; } .${DAMAGE_CLASS}.dmg-low .dmg-level-badge { background: #52c41a; color: #fff; } .${DAMAGE_CLASS}.dmg-mid .dmg-level-badge { background: #faad14; color: #fff; } .${DAMAGE_CLASS}.dmg-high .dmg-level-badge { background: #ff4d4f; color: #fff; } `; document.head.appendChild(style); /** * Extract part number codes from a label container div. * The div contains a with the label text and a

with .ant-tag elements. */ function extractCodesFromSection(sectionDiv) { const tags = sectionDiv.querySelectorAll('.ant-tag.ant-tag-checkable'); const codes = []; tags.forEach(tag => { const text = tag.textContent.trim(); if (text) codes.push(text); }); return codes; } /** * Find the section div inside .futured-specifics-wrapper that contains the given label text. */ function findSectionByLabel(wrapper, labelText) { const children = wrapper.querySelectorAll(':scope > div'); for (const child of children) { const label = child.querySelector('span.ant-typography u strong'); if (label && label.textContent.includes(labelText)) { return child; } } return null; } /** * Add a damage level input box to a product card. * The value (1-10) is persisted via GM storage keyed by the eBay item number. */ function addDamageBox(card) { if (card.querySelector('.' + DAMAGE_CLASS)) return; const contentBlock = card.querySelector('.content-block'); if (!contentBlock) return; const key = getDamageKey(card); const savedValue = key ? (GM_getValue(key, '') || '') : ''; const wrapper = document.createElement('div'); wrapper.className = DAMAGE_CLASS; const label = document.createElement('label'); label.textContent = 'Damage:'; const input = document.createElement('input'); input.type = 'number'; input.min = '1'; input.max = '10'; input.step = '1'; input.placeholder = '1-10'; input.title = 'Damage level (1 = minimal, 10 = severe)'; if (savedValue !== '') { input.value = savedValue; wrapper.classList.add('dmg-saved'); } const badge = document.createElement('span'); badge.className = 'dmg-level-badge'; badge.textContent = savedValue !== '' ? savedValue : '-'; function applyDamageColor(el, val) { el.classList.remove('dmg-low', 'dmg-mid', 'dmg-high'); if (!val || isNaN(val)) return; if (val <= 3) el.classList.add('dmg-low'); else if (val <= 6) el.classList.add('dmg-mid'); else el.classList.add('dmg-high'); } // Apply color for already-saved value if (savedValue !== '') { applyDamageColor(wrapper, parseInt(savedValue, 10)); } input.addEventListener('input', function () { let val = parseInt(input.value, 10); if (isNaN(val)) { badge.textContent = '-'; wrapper.classList.remove('dmg-low', 'dmg-mid', 'dmg-high', 'dmg-saved'); return; } // Clamp to 1-10 if (val < 1) { val = 1; input.value = 1; } if (val > 10) { val = 10; input.value = 10; } badge.textContent = val; applyDamageColor(wrapper, val); if (key) { GM_setValue(key, String(val)); wrapper.classList.add('dmg-saved'); } }); input.addEventListener('click', function (e) { e.stopPropagation(); }); wrapper.appendChild(label); wrapper.appendChild(input); wrapper.appendChild(badge); // Insert the damage box at the end of the content-block contentBlock.appendChild(wrapper); } /** * Add a copy button to a product card if it has part number data and no button yet. */ function addCopyButton(card) { if (card.querySelector('.' + BUTTON_CLASS)) return; const wrapper = card.querySelector('.futured-specifics-wrapper'); if (!wrapper) return; const mfgSection = findSectionByLabel(wrapper, 'Manufacturer Part Number'); const oemSection = findSectionByLabel(wrapper, 'OE/OEM Part Number'); if (!mfgSection && !oemSection) return; const mfgCodes = mfgSection ? extractCodesFromSection(mfgSection) : []; const oemCodes = oemSection ? extractCodesFromSection(oemSection) : []; if (mfgCodes.length === 0 && oemCodes.length === 0) return; const btn = document.createElement('button'); btn.className = BUTTON_CLASS; btn.type = 'button'; btn.title = 'Copy part numbers to clipboard'; btn.textContent = 'Copy PN'; btn.addEventListener('click', function (e) { e.stopPropagation(); e.preventDefault(); const allCodes = mfgCodes.concat(oemCodes); const text = allCodes.join('\n'); navigator.clipboard.writeText(text).then(() => { btn.textContent = 'Copied!'; btn.classList.add('copied'); setTimeout(() => { btn.textContent = 'Copy PN'; btn.classList.remove('copied'); }, 2000); }).catch(() => { // Fallback for older browsers const ta = document.createElement('textarea'); ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); btn.textContent = 'Copied!'; btn.classList.add('copied'); setTimeout(() => { btn.textContent = 'Copy PN'; btn.classList.remove('copied'); }, 2000); }); }); // Insert the button right before the futured-specifics-wrapper wrapper.parentNode.insertBefore(btn, wrapper); } /** * Process all product cards currently in the DOM. */ function processCards() { const cards = document.querySelectorAll('.product-item-component'); cards.forEach(card => { addCopyButton(card); addDamageBox(card); }); } // Run on initial load processCards(); // Watch for dynamically loaded cards (pagination, filtering, etc.) const observer = new MutationObserver(() => { processCards(); processWordTitles(); }); observer.observe(document.body, { childList: true, subtree: true }); // ----------------------------------------------------------------------- // WORD PHRASE BUILDER // Click words in product titles to accumulate a phrase in the clipboard. // ----------------------------------------------------------------------- const WORD_TITLE_ATTR = 'data-pt-words-done'; // Persistent phrase stored in memory (reset on page reload) let phraseWords = []; // Inject styles for word spans and the phrase indicator const wordStyle = document.createElement('style'); wordStyle.textContent = ` .pt-word-span { cursor: pointer; border-radius: 3px; padding: 0 1px; transition: background 0.15s, color 0.15s; display: inline-block; } .pt-word-span:hover { background: rgba(64, 150, 255, 0.18); color: #4096ff; } .pt-word-span.pt-word-selected { background: rgba(64, 150, 255, 0.28); color: #1677ff; font-weight: 600; } .pt-word-span.pt-word-flash { background: #52c41a !important; color: #fff !important; } #pt-phrase-bar { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 99999; background: #1a1a2e; color: #e0e0e0; border: 1px solid #4096ff; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-family: monospace; max-width: 80vw; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); pointer-events: auto; } #pt-phrase-bar .pt-phrase-text { flex: 1; word-break: break-word; color: #7ec8e3; } #pt-phrase-bar .pt-phrase-label { color: #888; font-size: 11px; white-space: nowrap; } #pt-phrase-clear { cursor: pointer; background: transparent; border: 1px solid #ff4d4f; color: #ff4d4f; border-radius: 4px; padding: 2px 7px; font-size: 11px; white-space: nowrap; } #pt-phrase-clear:hover { background: #ff4d4f; color: #fff; } `; document.head.appendChild(wordStyle); // Create the phrase bar (shown when phrase has words) const phraseBar = document.createElement('div'); phraseBar.id = 'pt-phrase-bar'; phraseBar.style.display = 'none'; phraseBar.innerHTML = ` Phrase: `; document.body.appendChild(phraseBar); document.getElementById('pt-phrase-clear').addEventListener('click', function () { phraseWords = []; updatePhraseBar(); // Deselect all word spans document.querySelectorAll('.pt-word-span.pt-word-selected').forEach(s => s.classList.remove('pt-word-selected')); }); function updatePhraseBar() { const display = document.getElementById('pt-phrase-display'); if (phraseWords.length === 0) { phraseBar.style.display = 'none'; } else { phraseBar.style.display = 'flex'; display.textContent = phraseWords.join(' '); } } /** * Split the h4 title text into clickable word spans. */ function makeWordsClickable(h4) { if (h4.getAttribute(WORD_TITLE_ATTR)) return; h4.setAttribute(WORD_TITLE_ATTR, '1'); const rawText = h4.textContent; // Split on whitespace, keep tokens (words and separators like "-") const tokens = rawText.split(/(\s+)/); h4.textContent = ''; tokens.forEach(token => { if (/^\s+$/.test(token)) { // Whitespace: keep as text node h4.appendChild(document.createTextNode(token)); } else if (token.length > 0) { const span = document.createElement('span'); span.className = 'pt-word-span'; span.textContent = token; span.addEventListener('click', function (e) { e.stopPropagation(); e.preventDefault(); phraseWords.push(token); span.classList.add('pt-word-selected'); const phrase = phraseWords.join(' '); navigator.clipboard.writeText(phrase).then(() => { span.classList.add('pt-word-flash'); setTimeout(() => span.classList.remove('pt-word-flash'), 400); }).catch(() => { const ta = document.createElement('textarea'); ta.value = phrase; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); span.classList.add('pt-word-flash'); setTimeout(() => span.classList.remove('pt-word-flash'), 400); }); updatePhraseBar(); }); h4.appendChild(span); } }); } /** * Process all product title h4 elements. */ function processWordTitles() { const titles = document.querySelectorAll('div.title-wrapper h4.ant-typography'); titles.forEach(makeWordsClickable); } // Run on initial load processWordTitles(); })();