惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

S
SegmentFault 最新的问题
V
Visual Studio Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
量子位
月光博客
月光博客
阮一峰的网络日志
阮一峰的网络日志
T
Tailwind CSS Blog
GbyAI
GbyAI
爱范儿
爱范儿
Y
Y Combinator Blog
宝玉的分享
宝玉的分享
有赞技术团队
有赞技术团队
罗磊的独立博客
Recent Announcements
Recent Announcements
博客园 - 司徒正美
M
MIT News - Artificial intelligence
小众软件
小众软件
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
B
Blog RSS Feed
A
About on SuperTechFans
Hugging Face - Blog
Hugging Face - Blog
Apple Machine Learning Research
Apple Machine Learning Research
雷峰网
雷峰网

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
How to Block Distracting Sites — Free Chrome Extension wi...
SHOTA · 2026-04-28 · via DEV Community

SHOTA

The Problem: Digital Distractions Are Costing You Hours

Studies show the average knowledge worker loses 2.1 hours per day to digital distractions. Social media, news sites, and YouTube become black holes that consume our focus.

I built FocusGuard — a free Chrome extension that not only blocks distracting sites but helps you build mindful browsing habits with built-in breathing exercises.

What FocusGuard Does

Smart Site Blocking

FocusGuard lets you create a blocklist of distracting websites. When you try to visit a blocked site, instead of a boring blocked page, you get a calming interface with options:

  • Breathing exercise: A guided 60-second breathing animation to reset your focus
  • Quick reflection: A gentle prompt asking whether you really need this right now
  • Temporary bypass: Need to check something work-related on Twitter? Grant yourself 5 minutes

Focus Sessions

Start a timed focus session (25, 50, or 90 minutes). During the session:

  • All blocklisted sites are enforced
  • A subtle indicator shows remaining time
  • Session stats are tracked for your weekly review

The Breathing Exercise Feature

This is what makes FocusGuard different from every other site blocker. Instead of just blocking and frustrating you, it offers a 4-7-8 breathing pattern:

  1. Breathe in for 4 seconds
  2. Hold for 7 seconds
  3. Breathe out for 8 seconds

After completing the exercise, most users find they no longer want to visit the distracting site. The urge passes.

Technical Highlights

FocusGuard is built with:

  • Manifest V3 — fully compliant with Chrome's latest extension platform
  • TypeScript for type safety across the entire codebase
  • Vite for fast development builds
  • Chrome Alarms API for session timing without a persistent background page

Why declarativeNetRequest?

In MV3, the old webRequest blocking API is gone. We use for site blocking, which gives us:

  • Native rule evaluation (faster than JavaScript-based blocking)
  • No need for a persistent background service worker
  • Automatic rule matching without wake-ups

Storage Architecture

We split storage across three tiers:

  • chrome.storage.session — focus session state (cleared on browser close)
  • chrome.storage.sync — user preferences like blocklist and schedule (synced across devices)
  • chrome.storage.local — historical stats and analytics (persisted locally)

This means your blocklist follows you across devices, but temporary session state stays clean.

Privacy First

FocusGuard collects zero personal data. No accounts, no servers, no tracking. Everything runs locally in your browser. The only network request is an anonymous analytics ping (which you can disable).

Results After 30 Days of Personal Use

After using FocusGuard daily for a month:

Metric Before After
Daily distraction time 2.1 hours 0.4 hours
Breathing exercises completed 127
Sites unblocked after breathing 12%
Focus sessions completed 89

The breathing exercise is surprisingly effective. 88% of the time, completing the exercise was enough to break the impulse to visit a distracting site.

Getting Started

  1. Install FocusGuard from the Chrome Web Store
  2. Click the extension icon and add sites to your blocklist
  3. Start a focus session or just browse — blocked sites will redirect to the breathing exercise
  4. Review your weekly stats to track improvement

What Users Are Saying

FocusGuard has helped developers, students, and remote workers reclaim their focus. The breathing exercise approach resonates because it treats distraction as a habit to redirect, not a behavior to punish.

Try It Free

FocusGuard is completely free with no account required. Your data stays in your browser, always.

Install FocusGuard from Chrome Web Store


Built by S-Hub — we build Chrome extensions for developers and productivity enthusiasts.

More from S-Hub

  • Procshot — Auto-capture browser steps into visual guides
  • DataPick — Extract data from any webpage
  • ZenRead — Distraction-free reader mode for Chrome
  • ReadMark — Save your reading position on any page