Learn React - Component Highlighter

Highlights potential React components on any webpage — visually identify Layout, Repeated, and Atomic patterns.

🧩 Learn React — Component Highlighter The fastest way to train your "component-thinking" muscle. Open ANY website, toggle the extension on, and instantly see which HTML elements could be extracted into React components — color-coded with on-hover tooltips. ━━━━━━━━━━━━━━━━━━━━━━ THREE HIGHLIGHT CATEGORIES ━━━━━━━━━━━━━━━━━━━━━━ 🔵 LAYOUT (Blue solid border) Semantic, big-picture components like <Navbar />, <Header />, <Footer />, <Sidebar />, <Form />, and <Modal />. 🟠 REPEATED (Orange dashed border) Patterns that repeat 3+ times under the same parent — perfect candidates for reusable components like <Card />, <ListItem />, <ProductCard />, rendered with .map(). 🟢 ATOMIC (Green solid border) Small, building-block components like <Link />, <Button />, <Input />, <Image />, and <Icon />. ━━━━━━━━━━━━━━━━ HOW IT WORKS ━━━━━━━━━━━━━━━━ 1. Click the "Learn React" icon in your toolbar. 2. Toggle "Component Highlighting" ON. 3. Browse any website — elements are highlighted in real time. 4. Hover over any highlighted element to see: • The suggested React component name (e.g., <Navbar />) • A short hint explaining WHY it should be a component. 5. A legend panel in the bottom-right corner shows the color key. ━━━━━━━━━━━━━━ KEY FEATURES ━━━━━━━━━━━━━━ ✅ Works on ANY website — static HTML, SPAs, React, Vue, Angular, WordPress, you name it. ✅ Real-time detection — a MutationObserver rescans when the DOM changes (great for SPA route transitions). ✅ Zero configuration — install, toggle, and learn. ✅ Lightweight & fast — caps at 400 elements for performance safety. ✅ Hinglish tooltips — beginner-friendly hints in English mixed with Hindi for Indian learners. ✅ Privacy-first — NO data collection, NO tracking, NO network requests. Everything runs locally in your browser. ━━━━━━━━━━━━━━━━━━━━ WHO IS THIS FOR? ━━━━━━━━━━━━━━━━━━━━ • Students starting their React journey. • Bootcamp learners who want to practice "thinking in components." • Self-taught developers transitioning from vanilla HTML/CSS/JS. • Educators and mentors who want a visual teaching aid. ━━━━━━━━━━━━━ PERMISSIONS ━━━━━━━━━━━━━ • activeTab — to inject highlights on the current page. • storage — to remember your ON/OFF toggle preference. • scripting — to programmatically run the highlight script. • host_permissions (<all_urls>) — so it works on every website you visit. We do NOT collect, transmit, or store any browsing data. See our Privacy Policy at https://legal.codeguyakash.in ━━━━━━━━━━━━━━━ OPEN SOURCE ━━━━━━━━━━━━━━━ Built with ❤️ by CODEGUYAKASH — https://codeguyakash.in