مراقبة تغيرات الأسعار على مواقع التجارة الإلكترونية وتسليط الضوء عليها
يكتشف تلقائيًا عناصر الأسعار على مواقع التجارة الإلكترونية باستخدام أنماط التعبيرات العادية (regex) ويبرزها بخلفية خضراء. وهو أداة رائعة لاكتشاف العروض بسرعة ومقارنة الأسعار بين المنتجات المختلفة.
*://*/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