Unit Price Comparison

WHAT IT DOES

Unit Price Comparison is a floating panel that helps you find the true best value when shopping across different package sizes and brands. Enter the price, quantity, and unit (e.g., oz, lb, g, kg, ml, L, each) for two or more products—the panel instantly calculates the unit price (price per unit) for each, highlights the best value in green, the worst in red, and shows the savings percentage compared to the most expensive option. You can add or remove product rows dynamically as you compare more items. The panel also lets you insert the best value product name or its unit price directly into any editable field on the page (input, textarea, or contenteditable) with one click, or copy the full comparison results to your clipboard. Perfect for grocery shopping, bulk purchases, subscription comparisons, or any scenario where package sizes vary.

WHERE IT RUNS

The panel overlays any website that loads the BotGentz extension—whether you're on a grocery store site, a price comparison tool, a spreadsheet, a note-taking app, or any other web page. It works on all modern Chromium‑based browsers (Chrome, Edge, Brave, Arc) and Firefox. The script injects a self‑contained UI element that does not interfere with the host page's layout, styles, or JavaScript execution. It runs client‑side only, with no external API calls or cloud dependencies.

HOW TO USE

After installing the free BotGentz extension, visit any page and click the extension icon to activate the panel. The first time you use Unit Price Comparison, it will appear as a draggable widget near the bottom‑right corner of your viewport, with three default product rows pre‑filled. To compare products:

- In each row, enter a product name (optional, defaults to "Product N"), the total price, the quantity, and select the unit from the dropdown (oz, lb, g, kg, ml, L, each).

- Add more products by clicking the "Add Product" button. Remove a product by clicking the "✕" button on its row (minimum two products required).

- The panel updates all calculations live—unit price per product, best value highlight, worst value highlight, and savings percentage.

To use the results:

- Click "Insert Best Value Name" to paste the best product name into the focused editable field.

- Click "Insert Best Value Unit Price" to paste just the unit price (numeric value) into the focused field.

- Click "Copy Comparison Results" to copy the full breakdown (all product unit prices, savings, and best value line) to your clipboard.

The panel remembers your product list and all entries across sessions.

REACTIVE DYNAMIC ROW ENGINE WITH PERSISTENCE TREE

Unlike static comparison tools that require a fixed number of fields and a "calculate" button, this panel uses a reactive dynamic row engine that treats each product row as an independent node in a dependency graph. When you add or remove a row, the engine updates the graph topology without re‑creating existing nodes, preserving their values and state. Each row's inputs (price, quantity, unit) are bound to a computation node that emits a unit price whenever any input changes. A separate aggregation node collects all valid unit prices, computes the min and max, derives savings percentages, and updates the display. The engine also includes a persistence tree that serializes the entire row collection (including name, price, quantity, and unit) into a JSON string stored via GM_setValue. On reload, the tree deserializes and reconstructs rows in the same order, preserving the user's comparison session. The graph uses a topological scheduler that recalculates only the affected rows and the aggregation node—adding a row does not recompute existing rows' unit prices, and changing one row's inputs does not force other rows to recalculate, minimizing CPU overhead during rapid typing.

THE PANEL

- Drag: Click and hold the panel's header bar to move it anywhere on the screen.

- Per‑site position: The panel stores its last position separately for each domain (e.g., different positions for Amazon vs. Walmart) using the browser's localStorage, keyed by hostname.

- Snap: When dragged near any edge of the viewport, the panel snaps to that edge with a 16px margin for a clean, docked feel.

- Collapse: Click the "−" button in the header to collapse the panel to a compact title bar, preserving all current values. Click "+" to expand it back.

- Resize: Drag the bottom‑right corner handle to resize the panel from 280px to 600px wide and 200px to 500px tall; the layout adapts responsively.

- Escape: Press the Escape key while the panel is focused to close it entirely (you can reopen it from the extension toolbar).

PLEASE NOTE

This script requires the free BotGentz extension to run—it is not a standalone bookmarklet or user script. Websites frequently update their DOM structures and security policies; while we strive to keep the panel functional across thousands of sites, occasional updates may be needed. The calculator performs all operations entirely in your browser—no data is sent to any server, and no cookies or tracking identifiers are used. Your product prices, quantities, and units remain private to your local session and are persisted only via GM_setValue (the extension's local storage) for convenience, not shared across devices or sessions. Always verify unit consistency when comparing products—mixing units (e.g., oz vs. lb) without converting will produce incorrect comparisons. The panel assumes consistent units across all rows; convert manually if needed.