Home Depot Web Project Calculator Overlay

WHAT IT DOES

Home Depot Web Project Calculator Overlay reads product price and dimensions from Home Depot product pages and displays a floating calculator overlay for project estimation. The overlay shows the product name, unit price, and an input field where you enter the project area in square feet. Based on this input, the calculator estimates the quantity of units needed (assuming each unit covers roughly 10 square feet) and calculates the total project cost. The overlay persists your area input per product, so when you return to the same product page, your last project settings are remembered. The overlay is fully draggable and resizable, and it can be shown or hidden with a single toggle. The overlay also remembers its position, size, and opacity across sessions.

WHERE IT RUNS

This extension works on all Home Depot pages at homedepot.com and its subdomains, specifically on product detail pages where pricing and product information are displayed. It runs on the main product view, the product listing page, and any page showing product pricing. The extension operates entirely within your browser and does not access Home Depot's servers directly—it reads only what is visible on the page you are viewing. It works alongside the free BotGentz extension, which provides the necessary scripting environment.

HOW TO USE

Install the extension, then navigate to homedepot.com and open any product page. The extension automatically creates a floating calculator overlay on the page. Click the extension's icon in your browser toolbar to open the settings panel. Use the "Show Overlay" / "Hide Overlay" button to toggle visibility. The overlay shows the product name and price. Enter your project area in square feet in the input field—the calculator updates the estimated quantity needed and total cost in real time. The area value is saved per product for future visits. Adjust the overlay transparency using the opacity dropdown (70%, 82%, 92%, or 100%). The "Refresh" button manually updates the overlay with the latest product information. Drag the overlay by clicking and holding anywhere inside it. Resize it by dragging the bottom-right corner. Close the overlay with the × button.

SELECTOR-BASED PRODUCT DATA EXTRACTION WITH PER-PRODUCT PERSISTENCE

Unlike simple page scrapers that rely on a single price element, this extension uses a fallback chain of product name and price selectors. It attempts multiple common Home Depot class patterns for product names (.product-title, .product-name, h1) and prices (.price-now, .price, .product-price), falling back to the next pattern if the first fails. The unit of measurement is detected using a regex-based scan of page text, looking for common units like "sq ft," "each," "per case," and others. Each product's project area is stored using a unique key derived from the product name, allowing the calculator to remember your area input for each product individually. This per-product persistence means that when you return to a product page, your previous project estimate is automatically restored.

THE PANEL

The panel supports drag-to-move anywhere on the page. It remembers its position per site, so it stays where you placed it on homedepot.com. Click the panel header to collapse it down to just the minimized bubble, or click the expand handle to show the full panel. The panel can be resized by dragging the bottom-right corner. Press the Escape key to close the expanded panel and return to the minimized state. All panel settings, including position, size, collapsed state, opacity, and per-product area values, are saved per site and persist across browsing sessions.

PLEASE NOTE

This extension requires the free BotGentz extension to be installed and active, as it provides the underlying DOM injection and script execution environment. Home Depot's website changes periodically, and product element structures, class names, and page layouts may be updated. When that happens, the extension may stop detecting product data until an update is released. The extension stores your overlay position, size, opacity, visibility, and per-product area values locally in your browser's storage using GM_setValue. Per-product area values are stored with keys derived from product names. The calculator's coverage assumption (10 square feet per unit) is a rough estimate and may not be accurate for all products—always verify with product specifications and manufacturer guidelines. No data is ever sent to any server, and no personal information is collected. You can clear all stored settings at any time by clearing your browser data for homedepot.com.