🎫 Kroger Auto Coupon Clipper Bookmarklet

✅ This version works reliably in bookmarklets!

Simplified to focus on core functionality without UI complications.

📋 How to Install:

Note: click the screenshot below for a demonstration of dragging the bookmarklet to your favorites if this isn't clear.
🎫 Kroger Coupon Clipper

🚀 How to Use:

  1. Go to Kroger's coupon page:
  2. Login via the web and go to your Kroger's Coupon Page: savings/cl/coupons
  3. Click the bookmarklet in your bookmarks bar
  4. It will automatically:
    • Preload all available coupons
    • Find and clip all available coupons
    • Show a completion alert
  5. Check the browser console (F12) for detailed progress logs
bookmarklet screenshot gif

🎯 What It Does:

  1. Preloads: Scrolls to bottom, presses End key, clicks load more buttons
  2. Finds: Locates all "Clip" buttons (ignoring "Unclip" buttons)
  3. Clips: Systematically clicks each clip button with delays
  4. Reports: Shows progress in console and final count in alert

📋 Manual Installation

If the drag-and-drop method doesn't work, copy this code and create a bookmark manually:

javascript:(function(){console.log("🎫 Starting Auto Coupon Clipper...");let clipped=0;const delay=ms=>new Promise(r=>setTimeout(r,ms));const log=msg=>console.log(`[Clipper] ${msg}`);async function preloadAll(){log("📦 Preloading all coupons...");let prev=0,stable=0;const start=Date.now();while(Date.now()-start<60000){const count=document.querySelectorAll(`[data-testid*="CouponCard-"]`).length;log(`📊 Coupons loaded: ${count}`);if(count===prev){stable++;if(stable>=3)break;}else stable=0;prev=count;window.scrollTo({top:document.documentElement.scrollHeight,behavior:"instant"});const endEvent=new KeyboardEvent("keydown",{key:"End",keyCode:35,bubbles:true});document.dispatchEvent(endEvent);const loadMore=document.querySelector(`[data-testid*="load-more"], [data-testid*="LoadMore"]`)||[...document.querySelectorAll("button")].find(b=>b.textContent.toLowerCase().includes("load more"));if(loadMore&&!loadMore.disabled)loadMore.click();await delay(2000);}log(`✅ Preloaded ${document.querySelectorAll(`[data-testid*="CouponCard-"]`).length} coupons`);window.scrollTo({top:0,behavior:"smooth"});await delay(1000);}async function clipAll(){const selectors=[`[data-testid*="CouponActionButton"]:not([aria-label*="Unclip"])`,`button[aria-label*="Clip"]:not([aria-label*="Unclip"])`];const buttons=[];selectors.forEach(sel=>{try{document.querySelectorAll(sel).forEach(btn=>{const label=(btn.getAttribute("aria-label")||"").toLowerCase();const text=btn.textContent.trim().toLowerCase();if((label.includes("clip")&&!label.includes("unclip"))||(text.includes("clip")&&!text.includes("unclip")))buttons.push(btn);});}catch(e){}});const unique=[...new Set(buttons)];log(`🔍 Found ${unique.length} clippable coupons`);for(const btn of unique){try{const card=btn.closest(`[data-testid*="CouponCard-"]`);const title=card?.querySelector(`[data-testid*="CouponTitle-"], .CouponCard-heading`)?.textContent.trim()||"Unknown";log(`🎫 Clipping: ${title}`);btn.scrollIntoView({behavior:"smooth",block:"center"});await delay(300);btn.click();await delay(1000);clipped++;log(`✅ Clipped: ${title} (${clipped} total)`);}catch(e){log(`❌ Error clipping: ${e.message}`);}}}async function run(){await preloadAll();await clipAll();log(`🎉 Complete! Clipped ${clipped} coupons total`);alert(`🎫 Coupon Clipper Complete!\n\nClipped ${clipped} coupons total.\n\nCheck the browser console for detailed logs.`);}run();})();

🔍 To See Progress:

  1. Press F12 to open browser developer tools
  2. Click the Console tab
  3. Run the bookmarklet - you'll see live progress updates
  4. Look for messages like "[Clipper] 📦 Preloading..." and "[Clipper] ✅ Clipped..."