Home Renovation Budget Tracker Overlay

WHAT IT DOES

This userscript helps homeowners track renovation costs by extracting prices from product pages, contractor quotes, and material lists. It scans home renovation product pages, contractor quotes, material lists, or project estimates for cost data—item names, quantities, unit prices, labor costs, and total estimates. It provides a budget tracking panel to track spending against a project budget, extract costs from shopping carts, estimate pages, or contractor invoices, and allow users to categorize expenses (Materials, Labor, Permits, Design, Fixtures, Appliances, Other). The script calculates remaining budget, highlights cost overruns, generates a cost breakdown chart, compares estimates from different suppliers, and exports the budget as CSV or HTML. It also suggests cost-saving alternatives and tracks progress against project phases.

WHERE IT RUNS

The script works on home renovation product pages, contractor quotes, material lists, shopping carts, estimate pages, and contractor invoices. It runs entirely within your browser, reading only the visible content of the current page. It does not track your browsing history, access other tabs, or send any data externally. All budget data is processed and stored locally.

HOW TO USE

After installation, open the panel by clicking the tool's icon in the BotGentz sidebar. Set your total budget in the budget input field. Click "Scan page for costs" to extract prices from the current page—the script detects price elements and adds them to your expense list. Manually add expenses using the "Add Expense" form with item name, amount, and category. The summary shows total spent, remaining budget, percentage used, and a progress bar. Category breakdown shows spending by category. The expense list shows recent entries. Use the export dropdown to choose your format—CSV or HTML (report). Click "Export Budget" to download the data.

THE TECHNICAL MECHANISM

This script uses DOM traversal to extract cost data from pages. It scans for price elements using selectors like .price, .cost, .total, .amount, .item-price, [class*="price"], and [class*="cost"]. For each price element, it extracts the numeric amount using regex, and attempts to find a descriptive name from the parent container (looking for text before the price). Extracted items are added to the expenses array, with duplicate detection to avoid double-counting. The budget tracking calculates totals by category, displays a progress bar, and highlights overruns with color coding (green for under budget, yellow for 70-90% used, red for over 90% or over budget). The export function generates CSV with name, amount, and category, or a styled HTML report with summary cards, progress bar, and expense table. All data is persisted using GM_setValue.

THE PANEL

The panel is draggable anywhere on the screen and remembers its position between sessions. It can be collapsed to a small floating bubble to minimize distraction, and expanded again with a single click. The panel's width can be adjusted, and pressing the Escape key closes it instantly. All settings and expense data are persisted locally using GM_setValue, so your budget data remains intact across page reloads and browser restarts.

PLEASE NOTE

This userscript requires the free BotGentz extension to function. The script extracts prices from page text and may not capture all costs correctly, especially on complex pages. Review and adjust extracted items as needed. The budget tracker is designed for home renovation projects—it works on any page with price data but is most useful on product and quote pages. The script does not access external APIs or store any data outside your browser. No data from your browsing is stored or transmitted anywhere—all processing occurs entirely in your browser.