Supervisa los cambios de precios en los sitios de comercio electrónico y los destaca
Detecta automáticamente los elementos de precio en sitios web de comercio electrónico utilizando patrones de expresiones regulares y los resalta con un fondo verde. Ideal para identificar rápidamente ofertas y comparar precios entre diferentes productos.
*://*/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