How to use
Dev to Hero

Installation

Dev to Hero is a free Chrome extension. Here's how to install it in under a minute.

Understanding the badges

Each section heading on a documentation page receives a colored badge indicating its difficulty level. The badge is determined by analyzing the section's title, content, code examples, and its position in the learning chain.

Reading the prerequisites

Below each badge, Dev to Hero shows a list of concepts you should already understand before diving into that section. Prerequisites are split into two categories:

• ★ Required (yellow) — you genuinely need these to understand the section. Don't skip them.
• ○ Optional (grey) — useful context that enriches understanding, but not strictly necessary.
• ✓ Mastered (green, strikethrough) — concepts you've already marked as learned.

Click any prerequisite chip to toggle it as mastered. Your choices are saved automatically and will be remembered the next time you visit any page with the same prerequisite.

Tracking your progress

Every section heading has a ☐ Mark as read button next to its badge. Click it to mark the section as read — it turns into a green ✅.

Your reading progress is reflected in two places:

• The page summary banner at the top of each page shows 📖 X/Y (Z%) — how many sections you've read out of the total.
• The progress bar in the banner fills up as you mark sections as read. It updates instantly without reloading.

The popup

Click the Dev to Hero icon in your Chrome toolbar to open the popup. It gives you a quick overview of the current page and access to all settings.

• ON/OFF toggle — instantly enable or disable all badges on the page.
• Counter — shows the number of 🟢 / 🟡 / 🔴 sections on the current page.
• Focus mode toggle — hide all 🔴 Advanced sections (see below).
• Corrections — shows any badge corrections you've reported, with an option to clear them.

Focus mode

Enable Focus mode in the popup to automatically hide all 🔴 Advanced sections. The heading remains visible but faded, so you know the content exists — you just don't see it.

This is particularly useful when you're starting a new topic and want to read without being intimidated by content that isn't relevant yet. Focus mode is saved between sessions and applies to all supported sites.

Exporting your study plan

Each page has an "Export study plan" button in the summary banner. Clicking it downloads a .txt file containing:

• All sections organized by difficulty level (🟢 → 🟡 → 🔴)
• Your reading status for each section (✅ Read / ⬜ Not read)
• All prerequisites with their mastery status (✓ mastered / to learn)
• Estimated reading time for the page

The plan is generated fresh each time, so it always reflects your current progress. You can paste it into Notion, keep it as a reference, or share it with a study buddy.

Reporting an incorrect badge

Every badge has a small ✎ button next to it. If you think a section has been classified at the wrong level, click it to suggest a correction.

• A small menu appears with the two other possible levels.
• Select the level you think is more appropriate.
• The button turns blue showing your correction is saved.
• You can review all your corrections in the popup under "Corrections signalées".

Keyboard shortcut

You can toggle Dev to Hero on and off without opening the popup using the keyboard shortcut:

Alt + Shift + M

This is useful when you want to quickly compare a page with and without badges, or temporarily disable the extension without losing your settings.

To customize the shortcut, go to chrome://extensions/shortcuts in your browser.

Supported sites

Dev to Hero currently works on the following documentation sites:

FAQ

Is Dev to Hero really free?
Yes, completely free, forever. No account, no API key, no subscription, no ads.

Does it work offline?
Yes. The classifier runs entirely in your browser. No network requests are made.

Will it slow down my browser?
No. The extension is lightweight and only activates on the four supported documentation sites.

Where is my progress stored?
Everything is stored locally in Chrome's extension storage on your device. Nothing is sent anywhere. If you uninstall the extension, your data is cleared.

A badge seems wrong — what should I do?
Use the ✎ vote button next to the badge to suggest a correction. You can also open a GitHub issue if you'd like to discuss it.

Can I use it on other sites?
Not yet, but more sites are planned. If you'd like to see a specific site supported, let us know at contact@devtohero.com.

Is it open source?
Yes — the source code is available on GitHub.