FocusTabs AI

• 

  LOGO

As a daily Chrome user and a student, I often found myself drowning in too many tabs, distractions, and loss of focus. Managing work, studies, and online research across tabs became mentally exhausting. That’s where the idea for FocusTabs AI came from — a smart, privacy-first Chrome Extension that helps users focus better, organize tabs intelligently, and track their digital wellbeing.

What it does

FocusTabs AI is an intelligent tab and focus manager designed for Chrome users. It helps users:

🧠 Stay productive with real-time focus stats (active time, tab count, top domains, focus score)

⚙️ Manage open tabs intuitively — group, close, or focus on selected ones

💬 Get AI-powered suggestions for improving productivity and managing distractions

🌙 Track digital wellbeing metrics inside the browser itself

Even if you’re offline, the extension provides insights locally using Chrome APIs, and integrates Gemini for smart suggestions.

How I built it

Built using:

HTML, CSS (Material Design + Tailwind Lite) for a clean, minimal popup UI

JavaScript (Manifest V3) for tab management and AI logic

Chrome Built-in AI APIs for integrating Gemini-based suggestions

Chrome Tabs API and Storage API for querying, managing, and persisting tab data

The architecture focuses on client-side AI — ensuring privacy and speed — and can later scale to hybrid AI (Firebase + Gemini Developer API).

Challenges I ran into

The biggest challenge was AI integration. As a 17-year-old still learning about API requests and manifest permissions, I faced issues with connecting to the Gemini endpoint inside Chrome’s MV3 environment. Even though the current AI implementation isn’t fully functional yet, the interface, logic, and event system are ready for production once the API permissions are stabilized.

Accomplishments that I’m proud of

Created my first working Chrome extension from scratch

Designed and implemented a real-time Digital Wellbeing dashboard

Integrated the structure for Gemini-powered suggestions

Gained deep understanding of Manifest V3, Tabs API, and Chrome permissions

What I learned

I learned how powerful client-side AI can be when integrated directly inside Chrome — and how challenging real-time browser development is under Manifest V3’s strict policies. I also learned structured debugging, UI responsiveness, and manifest security best practices.

What’s next for FocusTabs AI

Fully enable Gemini Nano once the API becomes available in stable Chrome

Add personalized focus analytics and reminders

Build a sync feature across devices using Chrome Sync Storage

Publish to the Chrome Web Store as an open-source, privacy-first focus assistant

Built With

• ai
• api
• apis
• built-in
• chrome
• design
• html-css-(tailwindcss
• javascript
• lite)
• material
• storage
• tabs