Credit Card Rewards Calculator Overlay

WHAT IT DOES

Credit Card Rewards Calculator Overlay automatically detects price amounts on any webpage and calculates the credit card rewards you would earn on that purchase. The tool supports multiple credit cards, each with configurable reward rates, and displays a compact badge next to each price showing the rewards earned with your primary card. When you hover over the badge, a tooltip shows rewards for all your configured cards. This helps you quickly compare rewards across cards and decide which card to use for different purchases, all while browsing shopping sites, checking out, or reviewing product pages.

WHERE IT RUNS

This extension works on any website across the entire web. It functions on e-commerce sites, product pages, checkout pages, shopping carts, and any page that displays prices. The tool works across all domains and adapts to dynamically loaded content and single-page applications.

HOW TO USE

Install the extension and navigate to any webpage with prices. The tool automatically detects price amounts and adds rewards badges. Use the overlay panel to configure your credit cards: enter a card name and reward rate (e.g., "Chase Sapphire Preferred" at 1.25% or "Citi Double Cash" at 2.0%), then click "Add Card." Set your primary card by clicking the ✓ button next to any card — this card's rewards will be displayed in the badge. Toggle "Show rewards as points" to display rewards as points instead of cashback percentage. Click "Calculate Rewards Now" to manually rescan the page after loading new content or adding new cards.

TECHNICAL SECTION — PRICE DETECTION AND REWARDS CALCULATION

The extension uses a dual-layer price detection engine. First, it queries common price selectors (.price, .product-price, .sale-price, .amount, .total, and elements with price-related class names). Second, it uses a TreeWalker to scan text nodes for currency patterns — looking for dollar signs or number patterns with two decimal places. Each detected price is parsed using a regex that handles $XX.XX format and standalone decimal numbers. The reward calculation multiplies the price by the card's reward rate (converted to a decimal). For point-based cards, the result is rounded to a whole number. The tool supports multiple cards stored in GM_setValue as a comma-separated string, and a primary card is selected to show in the badge. Badges are positioned next to the price element with the rewards amount and card name.

THE PANEL — DRAG / PER-SITE POSITION / SNAP / COLLAPSE / RESIZE / ESCAPE

The overlay panel is fully interactive and designed for seamless multitasking. Drag it anywhere on the screen using the handle at the top of the panel; the position is saved per site so it stays where you left it across sessions. The panel includes a snap-to-edge feature that gently anchors the overlay to the nearest screen edge when released. Click the collapse button to minimize the panel to a compact pill showing the current rewards status; expand it again with a single click. Resize the panel vertically by dragging the bottom-right corner to view more controls. Press the Escape key at any time to instantly close the overlay; it reappears on the next page navigation or refresh.

PLEASE NOTE

This extension requires the free BotGentz companion extension to function, as it provides the underlying content script injection and cross-origin communication framework. No personal data, browsing history, or financial data is stored, transmitted, or shared. Card configurations are stored locally in your browser using GM_setValue and are never sent to any external server. The extension does not access or store login credentials, financial data, or personally identifiable information. The tool detects prices displayed on the page and does not access any payment processing or sensitive financial information. Reward calculations are estimates based on user-configured rates and actual rewards may vary based on card terms, categories, and promotions. Users should verify rewards with their card issuer.