Skip to content

Add Focus Blocker to block distracting sites#3

Open
arnelisk wants to merge 1 commit intolevelsio:mainfrom
arnelisk:feat/add-focus-mode
Open

Add Focus Blocker to block distracting sites#3
arnelisk wants to merge 1 commit intolevelsio:mainfrom
arnelisk:feat/add-focus-mode

Conversation

@arnelisk
Copy link
Copy Markdown

@arnelisk arnelisk commented May 3, 2026

Summary

Adds a 🎯 Focus tab to the popup that blocks distracting sites with one toggle. Sites you add (X, Reddit, YouTube, TikTok, etc.) get redirected to a "get back to what matters" page while focus mode is on. Each
site has its own switch so you can keep the list and just toggle individual sites on/off without re-adding them.

Built in the same spirit as the rest of the extension — no build step, no dependencies, no network calls. State lives in chrome.storage.local (focus_enabled, focus_sites).

How it works

  • background.jswebNavigation.onBeforeNavigate listener checks the host against the blocklist on top-level navigations only (frameId === 0, http(s) only) and redirects to blocked.html when focus
    mode is on.
  • blocked.html — minimal static page (no JS deps) that shows which host was blocked, pulled from the query string.
  • popup.{html,js} — new Focus tab with a master toggle, quick-add chips for common time sinks, a free-text input, and per-site on/off switches.
  • Suffix matching — same logic as the tab cleaner's exclusion list (host === s.host || host.endsWith("." + s.host)), so adding x.com also blocks mobile.x.com.

Design choices that match the project rules

  • No new permissions: reuses webNavigation (already granted for the redirect tracer) and storage.
  • No new dependencies, no build step, no remote calls.
  • blocked.html is declared in web_accessible_resources so chrome.runtime.getURL can navigate to it.
  • Manifest bumped 2.0 → 2.1.
image

Test plan

  • Load unpacked, open popup, switch to 🎯 Focus tab.
  • Add x.com via quick-add chip; toggle focus mode on; visit https://x.com → should redirect to blocked page.
  • Visit https://mobile.x.com → should also redirect (suffix match).
  • Toggle the per-site switch off → x.com loads normally even with focus mode on.
  • Toggle focus mode off → all sites load normally.
  • Reload extension → state persists (host list + per-site toggles + master toggle).
  • Adding https://www.reddit.com/r/foo normalises to reddit.com.
  • Subframe / iframe navigation to a blocked host does not redirect the top-level tab.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant