Smart Shield

Your silent guardian for meetings and browsing

Comment

Inspiration

During countless online meetings and screen-sharing sessions, I noticed how easily digital privacy can be compromised — forgetting to mute the mic, accidentally leaving the camera on, or sharing personal tabs while presenting. At the same time, while working on group projects, we often needed to check website uptime manually through terminal commands.

These everyday situations inspired SmartShield — a smart, AI-powered Chrome extension that acts as a silent guardian, protecting your privacy and improving focus without interrupting your workflow.

What It Does

SmartShield is a Chrome web extension that combines privacy control, visual security, and utility features in one seamless package.

It includes three core features:

  1. Auto Mic & Camera Control — Automatically mutes or disables your mic/camera when no sound or face is detected during online meetings.
  2. Screen Blur Tool — Lets you blur either the whole screen or specific areas by drawing a box or clicking on elements, ideal during screen sharing.
  3. URL Pinger — Quickly checks if a pasted URL or server is live or down, without needing to open a terminal.

Together, these make SmartShield a complete privacy assistant for anyone working, presenting, or browsing online.

How We Built It

SmartShield was built as a Next.js-based Chrome extension using TypeScript for strong type safety and modular code design. The UI was crafted with Tailwind CSS, Radix UI, and Lucide React, giving it a modern, minimalist aesthetic. For functionality:

  • Chrome APIs handle mic/camera access and content manipulation.
  • CSS & Canvas filters are used for screen blur effects.
  • Google Genkit integrates with the Gemini 2.5 Flash model to detect user presence (audio/video).
  • Recharts and Chart.js visualize ping results and AI metrics.

The extension follows a modular architecture with background scripts managing automation and the popup dashboard handling user interaction.

Challenges We Ran Into

  • Balancing privacy and permissions: Ensuring camera/mic access without violating user trust.
  • Real-time blur rendering: Keeping the blur smooth and non-intrusive required careful optimization of CSS filters.
  • Asynchronous Chrome messaging: Managing data flow between background, popup, and content scripts was complex.
  • Lightweight AI integration: Using Gemini efficiently on-device while keeping the extension responsive and under memory limits.

Each challenge pushed me to think critically about performance, privacy, and user experience.

Accomplishments That We're Proud Of

  • Built a fully functional AI-integrated Chrome extension from scratch.
  • Designed an intuitive, accessible, and polished UI with responsive controls.
  • Achieved local-only AI inference for privacy-safe presence detection.
  • Created a brand identity and animated logo (using Manim) to represent the concept of a smart, active privacy shield.
  • Reduced total action latency by 40% through optimization and caching.

What We Learned

  • Gained deep insights into Chrome Extension architecture and API capabilities.
  • Learned to design with privacy-by-default as a core principle.
  • Improved knowledge of AI integration in browser environments.
  • Strengthened skills in TypeScript, Next.js, and asynchronous event handling.
  • Understood how to create meaningful, user-focused automation that feels natural and secure.

What’s Next for SmartShield

  1. Enhanced AI Detection — Smarter voice and face tracking for context-based muting.
  2. Background Blur for Video Calls — Real-time segmentation using on-device ML.
  3. Cloud Sync — Sync privacy settings across devices.
  4. Smart Alerts — Notifications for accidental mic/camera activation.
  5. Cross-Browser Expansion — Bringing SmartShield to Firefox and Microsoft Edge.
Share this project:

Updates