☰

Enable Text Selection and Copy Data on Grupo Andres

Enable text selection and add a button to copy to clipboard the item data on https://online.grupoandres.com/

  1. // ==UserScript==
  2. // @name         Enable Text Selection and Copy Data on Grupo Andres
  3. // @namespace    http://SrGeneroso/
  4. // @version      1.0
  5. // @license      MIT
  6. // @description  Enable text selection and add a button to copy to clipboard the item data on https://online.grupoandres.com/
  7. // @author       SrGeneroso
  8. // @match        https://online.grupoandres.com/*
  9. // @grant        GM_addStyle
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     function modifyPage() {
  16.         // Add custom styles to enable text selection
  17.         GM_addStyle('.search-by-two-measures { user-select: text !important; -webkit-user-select: text !important; }');
  18.  
  19.         // Function to extract and copy data
  20.         function copyData(tableResult, button) {
  21.             var clipboardData = '';
  22.  
  23.             var brand = tableResult.querySelector('.image-brand')?.querySelector('img')?.getAttribute('title');
  24.             var model = tableResult.querySelector('.description')?.querySelector('p')?.textContent.trim();
  25.             var properties = tableResult.querySelector('.properties')?.textContent.trim().replace(/\s*\|$/, '');
  26.             var price = tableResult.querySelector('.base-price')?.innerText;
  27.             var stock = tableResult.querySelector('.stock-item')?.textContent.trim();
  28.  
  29.             console.log(`${brand} ${model} | ${properties} | ${stock} | ${price}`.replace(/\s+/g, ' '))
  30.             if (brand && model && price && stock) {
  31.                 clipboardData = `${brand} ${model} | ${properties} | ${stock} | ${price}`.replace(/\s+/g, ' ')
  32.             }
  33.  
  34.             // Copy data to clipboard
  35.             navigator.clipboard.writeText(clipboardData).then(function() {
  36.                 // Change button text after successful copy
  37.                 button.textContent = buttonMsgExecuted;
  38.                 setTimeout(function() {
  39.                     // Reset button text after a brief delay
  40.                     button.textContent = buttonMsgReady;
  41.                 }, 2000);
  42.             }).catch(function(err) {
  43.                 console.error('Error copying to clipboard:', err);
  44.                 // Change button text after an error
  45.                 button.textContent = buttonMsgError;
  46.                 setTimeout(function() {
  47.                     // Reset button text after a brief delay
  48.                     button.textContent = buttonMsgReady;
  49.                 }, 2000);
  50.             });
  51.         }
  52.  
  53.         // Items
  54.         var tableResults = document.querySelectorAll('.results-body .table-result');
  55.         var buttonMsgReady = '📎 Copy to clipboard'
  56.         var buttonMsgExecuted = '📋 Data copied to clipboard'
  57.         var buttonMsgError = '💥 Copy failed'
  58.  
  59.         tableResults.forEach(function(tableResult) {
  60.             var existingButton = tableResult.querySelector('.copy-button');
  61.             if (!existingButton) {
  62.                 // Create and append the button element
  63.                 var button = document.createElement('button');
  64.                 button.className = 'copy-button';
  65.                 button.textContent = buttonMsgReady;
  66.  
  67.                 // Add click event listener to the button
  68.                 button.addEventListener('click', function() {
  69.                     copyData(tableResult, button);
  70.                 });
  71.  
  72.                 tableResult.appendChild(button);
  73.             }
  74.         });
  75.     }
  76.  
  77.     // Wait until the document is fully loaded
  78.     setTimeout(function() {
  79.         // Run the script
  80.         modifyPage();
  81.         // Monitor mutations on .results-body
  82.         var observer = new MutationObserver(function(mutations) {
  83.             mutations.forEach(function(mutation) {
  84.                 modifyPage();
  85.  
  86.             });
  87.         });
  88.         var results = document.querySelector('.results-body');
  89.         if (results) {
  90.             // Start observing .results-body for childList changes
  91.             observer.observe(results, { childList: true });
  92.         } else {
  93.             console.error('.results-body element not found.');
  94.         }
  95.     }, 1000);
  96. })();