이커머스 사이트의 가격 변동 사항을 모니터링하고 이를 강조 표시합니다.
이 스크립트는 정규 표현식 패턴을 사용하여 전자상거래 웹사이트의 가격 요소를 자동으로 감지하고 녹색 배경으로 강조 표시합니다. 할인 상품을 빠르게 찾아내고 다양한 제품의 가격을 비교하는 데 매우 유용합니다.
*://*/product/*,*://*/item/*
On Each Page Refresh
After Page Load
1// Price Tracker - Detect and highlight prices on any site
2(function() {
3 'use strict';
4
5 // Regex patterns for different currency formats
6 const pricePatterns = [
7 /\$\d+(?:,\d{3})*(?:\.\d{2})?/g, // $1,234.56
8 /\€\d+(?:,\d{3})*(?:\.\d{2})?/g, // €1,234.56
9 /\£\d+(?:,\d{3})*(?:\.\d{2})?/g, // £1,234.56
10 /\d+(?:,\d{3})*(?:\.\d{2})?\s*(?:USD|EUR|GBP)/gi, // 1234.56 USD
11 ];
12
13 function highlightPrices() {
14 const walker = document.createTreeWalker(
15 document.body,
16 NodeFilter.SHOW_TEXT,
17 null
18 );
19
20 const priceNodes = [];
21 let node;
22
23 while (node = walker.nextNode()) {
24 const text = node.textContent || '';
25 const hasPrice = pricePatterns.some(pattern => pattern.test(text));
26
27 if (hasPrice && node.parentElement) {
28 priceNodes.push(node.parentElement);
29 }
30 }
31
32 // Highlight found prices
33 priceNodes.forEach(element => {
34 if (!element.dataset.priceHighlighted) {
35 element.style.backgroundColor = '#46b881';
36 element.style.color = 'white';
37 element.style.padding = '2px 6px';
38 element.style.borderRadius = '4px';
39 element.style.fontWeight = 'bold';
40 element.dataset.priceHighlighted = 'true';
41 console.log('[Price Tracker] Highlighted:', element.textContent);
42 }
43 });
44 }
45
46 // Run on page load
47 highlightPrices();
48
49 // Re-run when content changes
50 const observer = new MutationObserver(() => {
51 setTimeout(highlightPrices, 300);
52 });
53
54 observer.observe(document.body, { childList: true, subtree: true });
55})();
56