Este script agrega un filtro de ofertas en el sitio de venta en línea* de una conocida cadena de supermercados.

carre4-shopping-assistant.js

/*
 * Carre4 shopping assistant v0.6
 *
 * Este script agrega un filtro de ofertas en el sitio de venta en línea de una conocida cadena de supermercados.
 * Esta versión funciona para https://www.carrefour.com.ar/
 * Si busca una que funcione en https://tupedido.carrefour.com.ar/ use la versión previa (v0.4)
 *
 * INSTALL
 *
 * 1. Si usás Chrome, agregá la extensión "Custom JavaScript for Websites 2" (o "Tampermonkey", o cualquier otra que haga lo mismo)
 *    https://chrome.google.com/webstore/detail/custom-javascript-for-web/ddbjnfjiigjmcpcpkmhogomapikjbjdk
 *    Si usás Firefox, agregá la extensión "Greasemonkey" (o "Code Injector", o cualquier otra que haga lo mismo)
 *    https://addons.mozilla.org/es/firefox/addon/greasemonkey/
 * 2. Navegá al sitio web del supermercado
 * 3. Hacé clic en el botón de Extensiones (pieza de rompecabezas) de la barra de Chrome
 * 4. Hacé clic en "Custom JavaScript for websites"
 * 5. Copiá y pegá todo el script siguiente en la página y hacé clic en "Save"
 * 6. Listo!
 *
 * BUGS
 *
 * Seguro, y más de los que puedo contar. Si desea reportar uno, la dirección está a continuación.
 *
 * LICENSE
 *
 * Copyright (c) 2021 Mauro A. Meloni <com.gmail@maumeloni>
 *
 * Licensed under the Apache License, Version 2.0;
 * you may not use this file except in compliance with the License.
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 */


function filter_offers() {
  // console.log('filter_offers() called');
  const products = document.querySelectorAll('section.vtex-product-summary-2-x-container');
  // console.log(products.length, 'products', filter_type);
  for (let elem of products) {
    let is_offer = (
        (elem.querySelector('.lyracons-carrefourarg-product-price-1-x-listPriceValue') != null) ||
        (elem.querySelector('span[data-specification-name="Precios Cuidados"]') != null)
    );
    let style = elem.parentElement.style;
    if (is_offer) continue;
    switch (Number(filter_type)) {
    case 1:
      style.opacity = 0.2;
      style.removeProperty('display');
      break;
    case 2:
      style.display = 'none';
      break;
    default:
      style.opacity = 1;
      style.removeProperty('display');
      break;
    }
  }
}


function update_offers_filter(elem) {
  if (!document.getElementsByName('offers_filter')) return;
  if (elem && elem.target) filter_type = Number(elem.target.value);
  localStorage.setItem('offers_filter', filter_type);
  // console.log('update_offers_filter() called');
  filter_offers();
}


function add_mutation_observer() {
  // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
  const targetNode = document.querySelector('div.lyracons-search-result-1-x-gallery');
  if (!targetNode) return;
  const config = { attributes: false, childList: true, subtree: false };
  
  const callback = function(mutationsList, observer) {
    // console.log('mutationobserver callback() called');
    setTimeout(update_offers_filter, 100);
  }

  const observer = new MutationObserver(callback);
  observer.observe(targetNode, config);
  // observer.disconnect();
};


function add_offers_filter() {
  // console.log('add_offers_filter() called');
  const div_id = 'div_offers_filter';
  const anchor_selector = 'div.vtex-store-components-3-x-searchBarInnerContainer';
  const anchor = document.querySelector(anchor_selector);
  if (!anchor) {
    console.log("Could not find '%s'", anchor_selector);
    return;
  }
  // console.log('Found ', anchor);

  let div = document.getElementById(div_id)
  if (div) div.remove();
  div = document.createElement('div');
  div.id = div_id;
  div.setAttribute('style', 'padding-top: 0.5rem; text-align: right;');
  
  const labels = ['Mostrar todo', 'Destacar ofertas', 'Solo ofertas'];
  for (let i = 0; i < 3; i++) {
    let opt = document.createElement('input');
    opt.id = 'offers_filter_' + i;
    opt.setAttribute('type', 'radio');
    opt.setAttribute('name', 'offers_filter');
    opt.setAttribute('value', i);
    opt.setAttribute('style', 'appearance: auto; margin: 0 0.3rem 0 1rem; vertical-align: -25%;');
    opt.addEventListener('change', update_offers_filter);
    let lbl = document.createElement('label');
    lbl.setAttribute('for', opt.id);
    lbl.appendChild(document.createTextNode(labels[i]));
    div.appendChild(opt);
    div.appendChild(lbl);
  }
  
  anchor.after(div);
  // console.log('Intentando adicionar', anchor, div);
  document.getElementsByName('offers_filter')[filter_type].checked = true;
  update_offers_filter();
  add_mutation_observer();
}


function waitForEl(selector, callback) {
  // https://gist.github.com/chrisjhoughton/7890303
  if (document.querySelector(selector)) {
    callback();
  } else {
    setTimeout(function() { waitForEl(selector, callback) }, 100);
  }
}


var filter_type = Number(localStorage.getItem('offers_filter')) | 0;
waitForEl('div.vtex-store-components-3-x-searchBarInnerContainer', add_offers_filter);
waitForEl('div.lyracons-search-result-1-x-gallery', add_mutation_observer);