Dev.to Reading Time Badge

WHAT IT DOES

This userscript enhances the Dev.to reading experience by adding clear reading time indicators to every article and listing. It scans the article content, counts the words, and calculates the estimated reading time based on your preferred reading speed. The script displays a badge next to the article title showing the reading time in minutes, and optionally adds a progress bar that tracks your scroll position through the article. On listing pages, each article card receives a small badge indicating how long it will take to read before you even click through. The script also calculates and displays time saved compared to average reading speeds, helping you make informed decisions about which articles to read based on your available time.

WHERE IT RUNS

The script activates automatically on all Dev.to pages (dev.to/*), including the homepage, tag pages, article listings, and individual article pages. It works alongside Dev.to's client-side navigation, detecting page changes and updating reading time indicators without requiring page reloads.

HOW TO USE

After installation, simply browse Dev.to as usual. On article pages, you'll see a badge with the reading time next to the title, and a progress bar at the top of the article that fills as you scroll. On listing pages, each article card shows a small badge with the estimated reading time. Click the panel icon to access settings where you can adjust your words-per-minute reading speed, toggle the progress bar and time saved display, and choose between badge-only, panel-only, or both display formats. The panel also displays detailed statistics for the current article including word count, reading time, and time saved.

THE ACTUAL REASON IT WORKS

Unlike simple plugins that calculate reading time based on a fixed character count, this script performs contextual word counting that accounts for Dev.to's unique content structure. It uses a multi-pass DOM traversal that selectively extracts text from article bodies while ignoring navigation elements, code blocks, and metadata that would skew word counts. The script employs a weighted counting algorithm that gives different importance to headings, paragraphs, and list items, producing more accurate reading times. It also implements a dynamic scroll tracking system that uses the article's bounding rectangle and viewport position to calculate exact progress percentage, updating at 60fps via requestAnimationFrame for smooth performance without jank.

THE PANEL

The settings panel is fully draggable by its header, allowing you to position it anywhere on the screen. It remembers its position across page loads via GM_setValue. The panel collapses to a compact icon when minimized, saving screen space while remaining accessible. Press Escape or click the × button to close the panel. Settings changes apply immediately without needing to refresh the page, and the script automatically re-processes the current page to apply new preferences.

PLEASE NOTE

This userscript requires the free BotGentz extension to run. Dev.to occasionally updates its HTML structure, which may temporarily affect badge placement; we actively maintain the script to ensure compatibility with the latest site version. The script only reads article content from the page and does not transmit any data to external servers. All settings are stored locally in your browser's userscript storage. The reading time calculation is based on word count and your configured WPM setting; the default of 238 WPM represents the average adult reading speed, but you can adjust this to match your personal reading speed for more accurate estimates.