Flight Price Calendar Overlay

WHAT IT DOES

Flight Price Calendar Overlay transforms flight booking calendars into visual price heatmaps, making it instantly obvious which dates are cheapest and which are most expensive. The extension scans flight booking and travel websites for price data displayed on date pickers and calendar grids, extracts the price for each date, and overlays a color-coded heatmap directly on the calendar. Cheapest dates appear in green, the most expensive in red, and intermediate prices in yellow or orange. Hover over any date to see the exact price in a tooltip. The overlay works across multiple airlines and booking sites, and you can toggle it on/off, adjust the price range sensitivity, and choose from different color schemes including a colorblind-friendly option.

WHERE IT RUNS

The extension works on every website with flight booking calendars, including major travel sites like Expedia, Kayak, Skyscanner, Google Flights, airline websites, and any page with a date picker that displays flight prices. It runs locally in your browser, scanning the page's DOM for price data and overlaying the heatmap without sending any data to external servers. The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly.

HOW TO USE

After installation, the extension automatically scans flight calendars and overlays the price heatmap. Cheaper dates are shown in green, more expensive dates in red. Hover over any date to see the exact price in a tooltip. To customize the experience, open the extension panel and click "Scan & Overlay" to refresh the heatmap, or "Remove Overlay" to clear it. Choose your preferred color scheme (Default, High Contrast, or Colorblind-Friendly). Toggle "Show price labels on overlay" to display prices directly on the calendar. Toggle "Show tooltip on hover" to enable or disable the price tooltip. Adjust the price range sensitivity (Tight, Medium, or Wide) to control how much contrast you see between price differences. For per-site customization, enable or disable the extension on specific websites using the per-site controls.

THE ACTUAL MECHANISM — DOM PRICE EXTRACTION WITH HEATMAP COLOR RENDERING

The extension uses a comprehensive DOM scanning approach to detect price data in flight calendars. It queries the page for common calendar cell selectors (td, .day, .date, [role="gridcell"], .DayPicker-Day, .react-datepicker__day, .flatpickr-day, and many others) and extracts numeric price values using regex matching (`/\$\s*(\d{1,3}(?:,\d{3})*|\d+)/`). The extension then calculates the minimum and maximum prices in the dataset, normalizes each price to a value between 0 and 1, and applies the user's selected sensitivity factor. The heatmap colors are generated using a three-color interpolation: green (cheapest) to yellow (mid-range) to red (most expensive). Each date cell is overlaid with a semi-transparent div positioned absolutely using the cell's bounding rectangle. The overlay divs are child elements of a container positioned relative to the calendar parent, ensuring the heatmap stays aligned with the calendar as the page scrolls. Tooltip functionality is implemented with mouseenter/mouseleave events that show a floating div with the price and date. The overlay is re-applied when the page content changes (using MutationObserver) or when the user navigates to a new page.

THE PANEL

The settings panel is a lightweight, draggable overlay that appears in the center of your screen. You can reposition it by clicking and dragging the title bar; release it near the screen edge and it will snap into place automatically. To collapse the panel into a compact title bar, click the minimize button, expanding it again with the same control. The panel is fully responsive, adapting to different screen resolutions with a minimum width of 300px and a maximum of 480px. Press the Escape key at any time to dismiss the panel without applying changes. All controls—the enable/disable toggle, scan & overlay button, remove overlay button, color scheme selector, price labels toggle, tooltip toggle, sensitivity selector, and per-site controls—are accessible within a clean, high-contrast interface that respects your system's color scheme.

PLEASE NOTE

This extension requires the free BotGentz companion extension to be installed and active, which provides the underlying DOM access and storage engine. The price extraction relies on the page's existing price display—if the flight booking site does not show prices on the calendar, the extension will not have data to overlay. The extension works with the page's current state and may need to be re-scanned if the calendar is updated dynamically. The color heatmap is designed to highlight relative price differences within the current calendar view—absolute price values are still displayed in tooltips and labels. No personal data, browsing history, or flight data is ever collected, stored, or transmitted. All settings are saved using the browser's storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.