diff --git a/README.md b/README.md index 84d4c78..825735d 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,9 @@ You should do this for **every** Chrome extension you use. Most extensions are c ### 🚮 Tab Cleaner Automatically closes inactive tabs after a configurable timeout (default: 5 minutes). Set excluded hosts to keep important tabs alive. View and re-open recently closed tabs. +### 🎯 Focus Blocker +Block distracting sites with one toggle. Add hosts (X, Reddit, Facebook, Instagram, YouTube, TikTok, etc.) and switch focus mode on — visiting them redirects to a "get back to what matters" page. Toggle individual sites on/off without deleting them. Suffix-matched, so `x.com` also blocks `mobile.x.com`. + ### 🍪 Cookie Editor Full cookie manager for the current site. View, edit, add, and delete cookies. Export cookies as JSON. Expand any cookie to see and modify all fields including domain, path, SameSite, secure, and httpOnly flags. diff --git a/background.js b/background.js index 3573677..c254559 100644 --- a/background.js +++ b/background.js @@ -223,3 +223,30 @@ chrome.runtime.onInstalled.addListener(() => { } }); }); + +// ═══════════════════════════════════ +// Focus Blocker +// ═══════════════════════════════════ +// Cancels top-level navigation to any host on the user's blocklist +// when focus mode is on, redirecting the tab to blocked.html. +chrome.webNavigation.onBeforeNavigate.addListener(async (details) => { + if (details.frameId !== 0) return; + if (!/^https?:/.test(details.url)) return; + + const data = await chrome.storage.local.get(["focus_enabled", "focus_sites"]); + if (!data.focus_enabled) return; + const sites = data.focus_sites || []; + if (!sites.length) return; + + let host; + try { host = new URL(details.url).hostname; } catch { return; } + + const hit = sites.find( + (s) => s.on && (host === s.host || host.endsWith("." + s.host)) + ); + if (!hit) return; + + chrome.tabs.update(details.tabId, { + url: chrome.runtime.getURL("blocked.html") + "?host=" + encodeURIComponent(host), + }); +}); diff --git a/blocked.html b/blocked.html new file mode 100644 index 0000000..e2775cd --- /dev/null +++ b/blocked.html @@ -0,0 +1,52 @@ + + + + + + 🎯 Focus mode + + + +
+
🎯
+

Focus mode

+

… is blocked.

+

Get back to what matters.

+
Open the SuperLevels popup → 🎯 Focus tab to toggle this site off or turn focus mode off.
+
+ + + diff --git a/manifest.json b/manifest.json index b54f2cc..5e4de15 100644 --- a/manifest.json +++ b/manifest.json @@ -1,8 +1,8 @@ { "manifest_version": 3, "name": "🚀 SuperLevels", - "version": "2.0", - "description": "The super Chrome extension by @levelsio — dark mode, GDPR cookie dismisser, YouTube unhook, tab cleaner, cookie editor, redirect tracer, live CSS editor, X/Twitter dim mode, JS toggle, JSON formatter, music recognizer, picture-in-picture, Google Maps links, and view image.", + "version": "2.1", + "description": "The super Chrome extension by @levelsio — dark mode, GDPR cookie dismisser, YouTube unhook, tab cleaner, cookie editor, redirect tracer, live CSS editor, X/Twitter dim mode, JS toggle, JSON formatter, music recognizer, picture-in-picture, focus blocker, Google Maps links, and view image.", "permissions": ["tabs", "storage", "alarms", "cookies", "activeTab", "webRequest", "webNavigation", "tabCapture", "contentSettings", "scripting"], "host_permissions": [""], "background": { @@ -41,5 +41,9 @@ "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" - } + }, + "web_accessible_resources": [{ + "resources": ["blocked.html"], + "matches": [""] + }] } diff --git a/popup.html b/popup.html index ec790ef..5f8e649 100644 --- a/popup.html +++ b/popup.html @@ -159,6 +159,52 @@ color: #555; font-size: 12px; text-align: center; padding: 12px; } + /* ── Focus Blocker ── */ + .focus-note { + font-size: 11px; color: #666; + margin-bottom: 12px; line-height: 1.5; + } + .focus-note b { color: #aaa; } + .focus-chips { + display: flex; flex-wrap: wrap; gap: 6px; + margin-bottom: 12px; + } + .focus-chip { + padding: 5px 10px; background: #16213e; color: #ccc; + border: 1px solid #2a2a4a; border-radius: 12px; + font-size: 11px; cursor: pointer; + transition: background 0.15s, border-color 0.15s, color 0.15s; + } + .focus-chip:hover { background: #1b2a4a; border-color: #e94560; color: #fff; } + .focus-chip.added { opacity: 0.35; cursor: default; } + .focus-chip.added:hover { background: #16213e; border-color: #2a2a4a; color: #ccc; } + .focus-item { + display: flex; align-items: center; gap: 8px; + padding: 6px 10px; background: #16213e; + border-radius: 6px; margin-bottom: 4px; font-size: 13px; + } + .focus-item .host { flex: 1; word-break: break-all; } + .switch-sm { position: relative; width: 30px; height: 16px; flex-shrink: 0; } + .switch-sm input { opacity: 0; width: 0; height: 0; } + .slider-sm { + position: absolute; inset: 0; + background: #444; border-radius: 16px; + cursor: pointer; transition: background 0.2s; + } + .slider-sm::before { + content: ''; position: absolute; + width: 12px; height: 12px; left: 2px; bottom: 2px; + background: #fff; border-radius: 50%; + transition: transform 0.2s; + } + .switch-sm input:checked + .slider-sm { background: #e94560; } + .switch-sm input:checked + .slider-sm::before { transform: translateX(14px); } + .focus-item button.del { + background: none; border: none; color: #e94560; + font-size: 16px; cursor: pointer; padding: 0 4px; line-height: 1; + } + .focus-item button.del:hover { color: #ff6b81; } + /* ── Cookie Editor ── */ .cookie-header { display: flex; align-items: center; justify-content: space-between; @@ -732,6 +778,7 @@
+ @@ -771,6 +818,30 @@

Excluded Hosts

+ +
+
+
+ + +
+
+ When focus mode is on, listed sites redirect to a block page. Suffix-matched: x.com also blocks mobile.x.com. +
+

Quick add

+
+

Blocked sites

+
+ + +
+
+
+
+
diff --git a/popup.js b/popup.js index 9002b20..6ca64fd 100644 --- a/popup.js +++ b/popup.js @@ -1125,6 +1125,116 @@ jsonformatToggle.addEventListener("change", async () => { } }); +// ═══════════════════════════════════ +// Focus Blocker +// ═══════════════════════════════════ +const focusEnabledEl = document.getElementById("focusEnabled"); +const focusHostInput = document.getElementById("focusHostInput"); +const focusAddBtn = document.getElementById("focusAddBtn"); +const focusListEl = document.getElementById("focusList"); +const focusChipsEl = document.getElementById("focusChips"); + +const FOCUS_QUICK_ADD = [ + "x.com", + "twitter.com", + "reddit.com", + "facebook.com", + "instagram.com", + "youtube.com", + "tiktok.com", + "news.ycombinator.com", +]; + +chrome.storage.local.get(["focus_enabled", "focus_sites"], (data) => { + focusEnabledEl.checked = !!data.focus_enabled; + renderFocusList(data.focus_sites || []); +}); + +focusEnabledEl.addEventListener("change", () => { + chrome.storage.local.set({ focus_enabled: focusEnabledEl.checked }); +}); + +function normalizeFocusHost(s) { + return String(s || "").trim().toLowerCase() + .replace(/^https?:\/\//, "") + .replace(/^www\./, "") + .replace(/\/.*$/, ""); +} + +function addFocusSite(rawHost) { + const host = normalizeFocusHost(rawHost); + if (!host) return; + chrome.storage.local.get(["focus_sites"], (data) => { + const sites = data.focus_sites || []; + if (sites.some((s) => s.host === host)) { + focusHostInput.value = ""; + return; + } + sites.push({ host, on: true }); + chrome.storage.local.set({ focus_sites: sites }, () => { + focusHostInput.value = ""; + renderFocusList(sites); + }); + }); +} + +focusAddBtn.addEventListener("click", () => addFocusSite(focusHostInput.value)); +focusHostInput.addEventListener("keydown", (e) => { + if (e.key === "Enter") addFocusSite(focusHostInput.value); +}); + +function removeFocusSite(host) { + chrome.storage.local.get(["focus_sites"], (data) => { + const sites = (data.focus_sites || []).filter((s) => s.host !== host); + chrome.storage.local.set({ focus_sites: sites }, () => renderFocusList(sites)); + }); +} + +function toggleFocusSite(host, on) { + chrome.storage.local.get(["focus_sites"], (data) => { + const sites = (data.focus_sites || []).map((s) => + s.host === host ? { host: s.host, on } : s + ); + chrome.storage.local.set({ focus_sites: sites }); + }); +} + +function renderFocusList(sites) { + const existing = new Set(sites.map((s) => s.host)); + focusChipsEl.innerHTML = FOCUS_QUICK_ADD.map((h) => { + const cls = existing.has(h) ? "focus-chip added" : "focus-chip"; + return `+ ${esc(h)}`; + }).join(""); + focusChipsEl.querySelectorAll(".focus-chip").forEach((el) => { + if (el.classList.contains("added")) return; + el.addEventListener("click", () => addFocusSite(el.dataset.host)); + }); + + if (!sites.length) { + focusListEl.innerHTML = '
No sites blocked yet — add one above
'; + return; + } + focusListEl.innerHTML = sites + .map( + (s) => ` +
+ ${esc(s.host)} + + +
` + ) + .join(""); + focusListEl.querySelectorAll("input[data-toggle]").forEach((cb) => { + cb.addEventListener("change", () => toggleFocusSite(cb.dataset.toggle, cb.checked)); + }); + focusListEl.querySelectorAll("button[data-del]").forEach((btn) => { + btn.addEventListener("click", () => removeFocusSite(btn.dataset.del)); + }); +} + // ═══════════════════════════════════ // Helpers // ═══════════════════════════════════