HackerRank Timer Overlay

WHAT IT DOES

HackerRank Timer Overlay detects the countdown timer on HackerRank coding challenge pages and displays it as a persistent, floating overlay that stays visible no matter where you scroll or click. The overlay shows the remaining time in large, easily readable digits that change color from green to yellow to red as time runs low. A progress bar beneath the timer shows the percentage of time remaining at a glance. The tool also provides audio alerts at configurable time thresholds—for example, you can set alerts at 5 minutes, 1 minute, and 30 seconds to keep you aware of approaching deadlines. The overlay is draggable, so you can reposition it anywhere on your screen to avoid blocking code or problem statements. This gives you full visibility of the countdown without having to look away from your work.

WHERE IT RUNS

This script runs exclusively on HackerRank coding challenge pages (*.hackerrank.com/*). It operates entirely within your browser tab, reading the page's DOM to locate the timer element and extracting the remaining time. The script cannot access other tabs, your browsing history, bookmarks, downloads, or any data outside the current page. All settings—including overlay position, font size, progress bar visibility, alert thresholds, color scheme, audio alerts, and seconds display—are stored locally using GM_setValue and never transmitted anywhere.

HOW TO USE

After installing with the BotGentz extension, the script automatically detects the timer on HackerRank challenge pages (if auto-detect is enabled). The timer overlay appears in the corner of your screen. Click "Start Overlay" to manually activate it if auto-detect is off. Drag the overlay by its header to reposition it anywhere on the screen. The timer updates every second and changes color as time runs down. Configure settings in the panel: choose the overlay position (top-left, top-right, bottom-left, bottom-right), adjust font size (small to extra-large), show or hide the progress bar, set alert thresholds (comma-separated minutes), enable or disable audio alerts, and toggle seconds display. Click "Stop Overlay" to hide the overlay and stop monitoring.

THE REAL MECHANISM

The script detects the timer by scanning the page for elements with timer-related class names (.timer, .countdown-timer, .challenge-timer, .hr-timer) and data-testid attributes, falling back to any element containing a time format (MM:SS or HH:MM:SS). It extracts the remaining time by parsing the text content with regular expressions. The overlay is created as a fixed-position div with a backdrop-blur background, making it visible over any page content. The timer update loop runs every second, updating the displayed time, progress bar width, and color based on the remaining time percentage. Color thresholds are: green above 50%, yellow between 20-50%, red below 20%. Audio alerts use the Web Audio API to generate a simple beep when the remaining time crosses a configured threshold. The progress bar shows the ratio of remaining time to the maximum time observed (cached per session). The drag functionality uses mousedown/mousemove/mouseup events to reposition the overlay. All DOM manipulation uses safe methods with no innerHTML from untrusted content.

THE PANEL

The Timer Overlay panel is a BGPanel component that you can drag anywhere on your screen by its header. It snaps to the nearest edge when released, keeping your workspace organized. The panel collapses to a small bubble showing only the emoji icon when minimised—click to expand it again. You can resize the panel horizontally to see more of the settings. Press the Escape key to collapse the panel instantly. Your panel position and size are saved per-site.

PLEASE NOTE

This script requires the free BotGentz browser extension to function. HackerRank frequently updates its interface, which may change the timer element's class names and DOM structure—the script may require updates to maintain compatibility. The timer detection relies on finding the timer element on the page; if the page loads dynamically, the script may need a few seconds to detect it. The max time is estimated from the initial observed timer value and may not be exact if the timer starts at a non-standard value. Audio alerts use the Web Audio API and may not work in all browsers or may be blocked by autoplay policies. The script never reads or writes password fields, hidden inputs, or file inputs. It stores only your position, font size, progress bar visibility, alert thresholds, color scheme, audio alerts, seconds display, and auto-detect preference locally. No timer data, challenge information, or personal information is ever collected, transmitted, or shared.