Browser Extension Manager

An Interactive Browser Extension Manager UI

A fully responsive browser extension manager interface featuring dynamic data rendering, state toggling, filtering, and theme selection.

Mobile Preview (375x812)	Desktop Preview (1440x960)

---

Overview

Browser Extension Manager is a fully responsive, state-driven interface that allows users to manage installed browser extensions through filtering, activation toggling, removal, undo actions, and restoration workflows.

Built with React and custom hooks, the application models soft-deletion, persistent storage, deterministic ordering, and accessible modal interactions. The project emphasizes predictable state management, separation of concerns, and behavior-driven testing.

Created as part of the building challenges from Frontend Mentor.

---

Live Demo

You can check out the live website here

---

Features

• State-driven filtering (All / Active / Inactive) with ARIA-compliant toggle controls
• Soft-delete pattern with confirmation modal
• Undo and restore flows (individual and bulk restore)
• Persistent state using localStorage (extensions + removed items)
• Deterministic reordering based on original data source
• System-aware theme switching with prefers-color-scheme support
• Dynamic asset loading using Vite’s import.meta.glob
• Comprehensive testing (hook unit tests + UI integration tests)
• Accessible dialogs and keyboard-friendly interactions

---

Tech Stack

Libraries & Frameworks:

Core Technologies:

Tooling & Testing:

Platforms & Deployment:

---

Development Workflow

This project uses a feature-based branching workflow with descriptive commits and structured pull requests, mirroring professional team collaboration practices:

---

Performance Report

A Google Lighthouse audit was conducted on the final version of this project. You can view the full report here.

---

How to Run

Open a terminal and type:

git clone https://github.com/CodingWithJiro/frontend-mentor-browser-extension-manager.git
cd frontend-mentor-browser-extension-manager
npm install
npm run dev

---

Testing

Open a terminal and type:

npm test

---

What I Learned

• Thinking beyond simple CRUD interactions and modeling UI state as a system (removal → confirmation → toast → undo → restore)
• Designing state in a way that supports future flexibility, not just immediate UI changes
• Separating business logic from presentation using custom hooks to improve clarity, reusability, and testability
• Handling real-world persistence using localStorage and managing side effects safely with useEffect
• Working with native browser APIs like <dialog> and understanding their behavior in both the browser and test environments
• Writing integration tests that simulate real user behavior instead of testing implementation details
• Managing deterministic data ordering to avoid unpredictable UI results
• Using build tool features like import.meta.glob to automate asset handling and reduce manual code repetition
• Recognizing how accessibility decisions (ARIA, semantic elements) influence both UI design and testing strategy

---

Author

Created by Elmar Chavez

Month/Year: January - February 2026

Journey: 10^th - 11^th month of being a frontend developer.