Subscription Cost Aggregator Overlay

WHAT IT DOES

This script scans any page for subscription prices, recurring charges, and billing amounts—from checkout pages, account dashboards, subscription lists, and pricing tables—and aggregates them into a single, easy-to-read overlay. It displays the total monthly cost, a breakdown by service, and an annual projection so you can see exactly what you're spending each month and year. A floating badge shows the total at a glance, and you can manually add subscriptions that aren't automatically detected. Perfect for tracking streaming services, SaaS tools, gym memberships, and any recurring expense.

WHERE IT RUNS

The script works on any page with subscription pricing—account dashboards (Netflix, Spotify, Adobe), SaaS pricing pages, checkout pages, subscription management portals, and any site that displays recurring charges. It detects prices using currency symbols and subscription-related keywords, and works on any website regardless of framework.

HOW TO USE

After installation, the script automatically scans the page for subscription prices. A floating badge shows your total monthly spend. Click the badge to toggle the full overlay with breakdown and annual projection. Open the panel to customize: enable or disable the overlay and badge, choose overlay position (top-right, top-left, bottom-right, bottom-left), adjust opacity, select dark or light theme, toggle breakdown and annual projection display, set currency symbol, enable or disable auto-detection, and choose badge position. Click "Scan Now" to manually re-scan the page, or use "Clear All" to reset detected subscriptions. You can also add subscriptions manually via JSON array in the panel.

TECHNICAL MECHANISM

The script uses a multi-stage subscription detection pipeline. First, it scans the DOM for pricing elements using a comprehensive set of selectors (.price, .cost, .amount, .subscription, .plan, .billing) with fallback to text-based detection across common content containers. Second, it extracts price values using regex pattern matching for currency symbols ($, €, £) followed by numbers, with validation to filter out unrealistic prices (0-10000 range). Third, it identifies subscription context by checking for keywords in the element text and parent elements: "subscription," "monthly," "annual," "recurring," "per month," "/mo," "premium," "pro," "plan," "membership." Fourth, it deduplicates detected subscriptions by name and price to avoid counting the same service twice. Fifth, it calculates the total monthly cost by summing all detected prices. Sixth, it renders the overlay with the total, optional breakdown, and annual projection (total × 12). The overlay updates dynamically when new subscriptions are added manually or detected via the MutationObserver.

THE PANEL

The settings panel is fully draggable and can be positioned anywhere on your screen. It automatically snaps to the nearest edge when released, keeping your workspace organized. The panel can be collapsed to a small bubble showing only a gear icon, and restored with a single click. Its position is remembered across page reloads using GM_setValue. The panel also responds to the Escape key, which instantly hides it until you click the bubble again. All settings are saved immediately when changed and persist across browser sessions.

PLEASE NOTE

This script requires the free BotGentz extension to run. Subscription detection relies on text parsing and may not capture all formats or services. The script does not access, store, or transmit any personal data, financial information, or browsing history. All processing happens locally in your browser and never leaves your device.