Netlify Build Time Badge

WHAT IT DOES This userscript adds build time visibility to your Netlify deploy list. It reads build log entries from the page—extracting build timestamps, duration, status (success, error, building), and commit messages—and displays a color-coded badge on every build row. The color system uses a four-tier gradient: green for fast builds (10 minutes). Each badge shows the build time in seconds or minutes and a category label with a status emoji. A summary panel shows average build time, total builds, success rate, and the latest build status. A filter bar lets you show only builds in a specific time range. Each build includes a one-click ↗ button to open the full build log. This is invaluable for developers, DevOps engineers, and team leads who need to monitor build performance, identify slow builds, and optimize CI/CD pipelines. WHERE IT RUNS The script runs on all Netlify web application pages at *.netlify.com/*, with automatic detection of deploy lists, build logs, and any page displaying build entries. It works across all Netlify interfaces by using multiple selector strategies to find build rows, status indicators, durations, timestamps, and commit messages. The script detects dynamic content loading and re-applies build time badges when the build list updates. It runs across the entire Netlify domain, ensuring coverage whether you're viewing your main site dashboard, a specific deploy list, or a build detail page. HOW TO USE Install the script via the BotGentz extension and navigate to any Netlify deploy list. Build time badges will appear automatically on every build row. Each build gets a subtle background tint and a colored left border matching its build time category, along with a badge showing the build time and label. The summary panel appears above your build list showing average build time, total builds, success rate, and latest build status. The filter bar appears as a sticky row with buttons for each category—click any button to show only builds in that category. Click the ↗ button next to any build to open its build log in a new tab. Use the panel controls to toggle badges on or off, show or hide the summary panel, or enable or disable the filter bar. You can customize the minute thresholds for each color category to match your team's build performance goals. The "Refresh" button manually reapplies all badges if the page updates. THE MECHANISM - DURATION EXTRACTION, STATUS DETECTION, AND METRICS AGGREGATION This script identifies build data by scanning each build row using a cascading selector strategy. It extracts build duration from duration elements (.duration, .build-time, .time-taken) by parsing the value and unit (seconds, minutes, milliseconds) and converting to minutes. Status is determined from status badges (.status, .build-status, .deploy-status) using text matching (success, error, building). Timestamps are extracted from date elements or parsed from relative time strings. Commit messages are extracted from message elements. The script calculates metrics including average build time, success rate, and distribution by build time category. The highlighting is applied via inline styles on each build row (background and border-left). The badge is inserted into the build title element using DOM manipulation. The filter bar uses display toggling to show or hide builds based on their build time category. The build log link is extracted from anchor elements and opened with GM_openInTab. THE PANEL The control panel appears as a floating, draggable element that you can position anywhere on the Netlify page. Drag by the header to reposition it, and the position is saved per site using GM_setValue so it stays where you left it across sessions. Release the panel near any edge and it snaps into place, keeping your workspace organized. Click the panel header to collapse it into a small bubble showing only the chart emoji (📊), minimizing distraction while keeping controls accessible. Drag from the bubble to restore the full panel. The panel automatically resizes to fit its content and includes all setting toggles, threshold controls, action buttons, and a color legend. Press the Escape key to quickly collapse the panel to its minimized state. The panel remains visible across page navigation within Netlify, with build time badges updating automatically as you move between views. PLEASE NOTE This script requires the free BotGentz extension to function. It is designed for Netlify users who need to monitor build performance and optimize deployment pipelines. The script reads only visible build data from the DOM—it does not access Netlify's API, your account credentials, or any sensitive information. All settings (threshold values, toggle states, and panel position) are stored locally using GM_setValue and never leave your browser. The script does not modify your Netlify data—it only enhances the visual presentation of the build list. Build time calculations are based on the durations displayed on the page; if Netlify updates its website structure or duration format, the script may need to be updated to match new selectors or parsing logic. The filter bar works on all builds currently visible in the list; if the list is paginated, the filter applies only to the current page. Builds in progress (building) without a duration are not shown with a time badge.