🚀 Add Automatic Coupon Insertions for More Stores (EASY FIRST ISSUE)

[AminDhouib]

Background

Caramel already knows coupon codes for 5 000+ stores, but only 4 of those stores (Amazon, eBay, Codecademy, Best Buy) get their codes auto-applied in the checkout. The logic that drives this lives in two places:

1. supported.json — maps a store’s domain to the CSS selectors we need.
2. Optional custom JS — for edge cases (see amazon.js below).

// apps/caramel-extension/supported.json
[
  {
    "domain": "amazon.com",
    "couponInput": "input[name='ppw-claimCode']",
    "couponSubmit": "input[name='ppw-claimCodeApplyPressed']",
    "priceContainer": "div[id='subtotals-marketplace-table']"
  },
  ...
]

// Example custom logic — apps/caramel-extension/stores/amazon.js
(() => {
  window.getAmazonOrderTotal = async () => {
    const totalEl = document.querySelector(
      '#sc-subtotal-amount-buybox .a-size-medium.a-color-base'
    )
    if (!totalEl) return '0.00'
    return totalEl.innerText.replace(/[^0-9.]/g, '') || '0.00'
  }
})()

---

What to Do

1. Pick a store
   Browse our [supported sites list](https://grabcaramel.com/supported-sites) and choose one not already in supported.json.

2. Find the selectors

   • couponInput – the <input> where a promo code goes.
   • couponSubmit – the button that applies the code.
   • priceContainer – an element that shows the order total.
   • Optional extras:
     • showInput if the input is hidden behind a link or accordion.
     • dismissButton for closing modals that block the page.

3. Add an entry
   Update supported.json with a new object for your store.

4. Need custom logic?
   Some sites require a helper to read the order total, wait for DOM updates, etc. If so:

   • Create apps/caramel-extension/stores/<store>.js.
   • Export functions on window like the Amazon example.

5. Test locally

   • Run the extension in your browser’s developer mode.
   • Verify that Caramel auto-inserts a working coupon (or at least tries).
   • Check the console for errors.

6. Open a PR

   • Title: feat: add <store> support
   • Link this issue.
   • Describe what you added and how you tested.

---

Acceptance Checklist

• supported.json entry with correct selectors
• Optional custom script placed under stores/
• Manual test passes (coupon input appears, no console errors)
• PR follows our code style (pnpm lint/prettier is green)

---

Tips

• If a store uses iframes, try document.querySelector inside the frame’s contentDocument.
• For dynamic sites, MutationObserver can be your friend. Drop a helper in the custom script if needed.
• Keep selector strings as narrow as possible to avoid false positives.

Happy hacking! Feel free to ask questions in the comments or on our Discord.