DEV Community

Cover image for That blocks distracting websites using AI. Here's the full code (Next.js + TypeScript)
Hashir Khan
Hashir Khan

Posted on

That blocks distracting websites using AI. Here's the full code (Next.js + TypeScript)

Combines your 3 strengths (Chrome Extension + AI + TypeScript). "Full code" promise = massive click driver.

Opening hook:

"I wasted 3 hours on Reddit yesterday while 'working'. So I built a Chrome Extension that fights back — using AI to detect distracting patterns and block them dynamically. Here's everything, including the full source code."

Outline:

The problem (relatable: developers losing focus)
Demo GIF of the extension in action ← , critical, embed this!
Architecture overview: manifest v3 + content scripts + TypeScript
Calling an AI API (OpenAI/Gemini) to score distracting URLs
Full code walkthrough — 3 key files with comments
How to publish to Chrome Web Store (bonus value)
CTA: "What sites distract YOU most? Drop it in the comments 👇"

Top comments (0)