From b80019598ec0c66d57870f5494d059183a77f4f2 Mon Sep 17 00:00:00 2001
From: utopiaeh <utopiaeh01@gmail.com>
Date: Thu, 20 Aug 2026 19:27:42 +0300
Subject: [PATCH] feat: Added a backup export/import, protected lists and
 updated the api calling

---
 components/options/BackupSection.tsx         |  64 ++++++++++++
 components/options/ClearLogSection.tsx       |  48 +++++++++
 components/options/GlobalSection.tsx         |   3 +
 components/options/PerSiteSection.tsx        |   7 ++
 components/options/ProtectedSitesSection.tsx |  24 +++++
 components/options/VisitedSitesSection.tsx   |  12 +++
 entrypoints/background.ts                    |  56 ++++++++++
 entrypoints/options/App.tsx                  |  97 ++++++++++++-----
 entrypoints/popup/App.tsx                    |  40 ++++---
 store/clearLog.test.ts                       |  44 ++++++++
 store/clearLog.ts                            |  44 ++++++++
 store/settings.test.ts                       |  16 +++
 store/settings.ts                            |  10 +-
 utils/browser-info.test.ts                   |  38 +++++++
 utils/browser-info.ts                        |  14 +++
 utils/clearing.firefox.test.ts               |  48 +++++----
 utils/clearing.test.ts                       |  48 +++++++++
 utils/clearing.ts                            |  72 ++++++++++---
 utils/i18n.ts                                | 103 ++++++++++++++++++-
 utils/settings-transfer.test.ts              |  53 ++++++++++
 utils/settings-transfer.ts                   |  40 +++++++
 utils/storage-adapter.test.ts                |  82 +++++++++++++++
 utils/storage-adapter.ts                     |  85 +++++++++++++++
 23 files changed, 971 insertions(+), 77 deletions(-)
 create mode 100644 components/options/BackupSection.tsx
 create mode 100644 components/options/ClearLogSection.tsx
 create mode 100644 components/options/ProtectedSitesSection.tsx
 create mode 100644 entrypoints/background.ts
 create mode 100644 store/clearLog.test.ts
 create mode 100644 store/clearLog.ts
 create mode 100644 utils/browser-info.test.ts
 create mode 100644 utils/settings-transfer.test.ts
 create mode 100644 utils/settings-transfer.ts
 create mode 100644 utils/storage-adapter.test.ts

diff --git a/components/options/BackupSection.tsx b/components/options/BackupSection.tsx
new file mode 100644
index 0000000..91ace85
--- /dev/null
+++ b/components/options/BackupSection.tsx
@@ -0,0 +1,64 @@
+import { useRef, useState } from 'react';
+import { useTranslation } from '../../hooks/useTranslation';
+import { useSettingsStore } from '../../store/settings';
+import { exportSettingsJson, parseImportedSettings } from '../../utils/settings-transfer';
+
+export function BackupSection() {
+  const t = useTranslation();
+  const settings = useSettingsStore();
+  const [importError, setImportError] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  function handleExport() {
+    const json = exportSettingsJson(settings);
+    const url = URL.createObjectURL(new Blob([json], { type: 'application/json' }));
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'bleep-settings.json';
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  async function handleImportFile(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    if (!file) return;
+    try {
+      const data = parseImportedSettings(await file.text());
+      settings.importSettings(data);
+      setImportError(false);
+    } catch (err) {
+      console.error('Bleep: settings import failed', err);
+      setImportError(true);
+    }
+  }
+
+  return (
+    <div className="mb-3 max-w-xl">
+      <label className="block text-sm mb-1">{t('backupTitle')}</label>
+      <p className="text-xs text-stone-500 mb-2">{t('backupHint')}</p>
+      <div className="flex gap-2">
+        <button
+          onClick={handleExport}
+          className="rounded-md border border-stone-300 hover:bg-stone-100 dark:border-stone-600 dark:hover:bg-stone-700 cursor-pointer px-3 py-1.5 text-xs"
+        >
+          {t('exportSettings')}
+        </button>
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          className="rounded-md border border-stone-300 hover:bg-stone-100 dark:border-stone-600 dark:hover:bg-stone-700 cursor-pointer px-3 py-1.5 text-xs"
+        >
+          {t('importSettings')}
+        </button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="application/json"
+          className="hidden"
+          onChange={handleImportFile}
+        />
+      </div>
+      {importError && <p className="text-xs text-red-500 mt-1">{t('importInvalidFile')}</p>}
+    </div>
+  );
+}
diff --git a/components/options/ClearLogSection.tsx b/components/options/ClearLogSection.tsx
new file mode 100644
index 0000000..048734f
--- /dev/null
+++ b/components/options/ClearLogSection.tsx
@@ -0,0 +1,48 @@
+import { useTranslation } from '../../hooks/useTranslation';
+import { useClearLogStore } from '../../store/clearLog';
+import type { TranslationKey } from '../../utils/i18n';
+
+export function ClearLogSection() {
+  const t = useTranslation();
+  const entries = useClearLogStore((s) => s.entries);
+  const clearLog = useClearLogStore((s) => s.clearLog);
+
+  return (
+    <div className="mt-4">
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="text-sm uppercase tracking-wide text-stone-500 dark:text-stone-400">
+          {t('clearLogTitle')}
+        </h3>
+        {entries.length > 0 && (
+          <button
+            onClick={clearLog}
+            className="text-xs text-stone-500 hover:text-stone-900 dark:hover:text-stone-100 cursor-pointer underline"
+          >
+            {t('clearLogClear')}
+          </button>
+        )}
+      </div>
+      {entries.length === 0 ? (
+        <p className="text-xs text-stone-500">{t('clearLogEmpty')}</p>
+      ) : (
+        <ul className="divide-y divide-stone-200 rounded-md border border-stone-200 dark:divide-stone-700 dark:border-stone-700 max-h-60 overflow-y-auto">
+          {entries.map((entry) => (
+            <li key={entry.id} className="px-3 py-2">
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-sm truncate">{entry.hostname}</span>
+                <span className="text-xs text-stone-500 shrink-0">
+                  {new Date(entry.timestamp).toLocaleString()}
+                </span>
+              </div>
+              <p className="text-xs text-stone-500 truncate">
+                {entry.types.map((id) => t(`dt_${id}` as TranslationKey)).join(', ')}
+                {entry.linkedTargets.length > 0 &&
+                  ` + ${t('clearLogLinkedCount', { count: entry.linkedTargets.length })}`}
+              </p>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/components/options/GlobalSection.tsx b/components/options/GlobalSection.tsx
index 47cdb82..9420bda 100644
--- a/components/options/GlobalSection.tsx
+++ b/components/options/GlobalSection.tsx
@@ -18,6 +18,7 @@ interface GlobalSectionProps {
   historyStatus: ClearStatus;
   onClearAllHistory: () => void;
   onDeleteHistoryItem: (url: string) => void;
+  hasProtectedSites: boolean;
 }
 
 export function GlobalSection({
@@ -32,6 +33,7 @@ export function GlobalSection({
   historyStatus,
   onClearAllHistory,
   onDeleteHistoryItem,
+  hasProtectedSites,
 }: GlobalSectionProps) {
   const t = useTranslation();
 
@@ -51,6 +53,7 @@ export function GlobalSection({
           onConfirm={onClear}
         />
       </div>
+      {hasProtectedSites && <p className="text-xs text-stone-500 mt-2">{t('protectedSitesGlobalNote')}</p>}
 
       {showHistory && (
         <HistorySection
diff --git a/components/options/PerSiteSection.tsx b/components/options/PerSiteSection.tsx
index b4986a1..f22d586 100644
--- a/components/options/PerSiteSection.tsx
+++ b/components/options/PerSiteSection.tsx
@@ -6,6 +6,7 @@ import type { VisitedSite } from '../../utils/clearing';
 import { DataTypeGrid } from '../DataTypeGrid';
 import { OriginMappingsEditor } from '../OriginMappingsEditor';
 import { type ClearStatus } from '../StatusButton';
+import { ProtectedSitesSection } from './ProtectedSitesSection';
 import { SiteTabsSection } from './SiteTabsSection';
 import { VisitedSitesSection } from './VisitedSitesSection';
 
@@ -19,6 +20,8 @@ interface PerSiteSectionProps {
   onUseOriginMappingsChange: (value: boolean) => void;
   linkedOrigins: string;
   onLinkedOriginsChange: (value: string) => void;
+  protectedSites: string;
+  onProtectedSitesChange: (value: string) => void;
   siteFilter: string;
   onSiteFilterChange: (value: string) => void;
   bulkStatus: ClearStatus;
@@ -48,6 +51,8 @@ export function PerSiteSection({
   onUseOriginMappingsChange,
   linkedOrigins,
   onLinkedOriginsChange,
+  protectedSites,
+  onProtectedSitesChange,
   siteFilter,
   onSiteFilterChange,
   bulkStatus,
@@ -104,6 +109,8 @@ export function PerSiteSection({
         <OriginMappingsEditor value={linkedOrigins} onChange={onLinkedOriginsChange} />
       </div>
 
+      <ProtectedSitesSection value={protectedSites} onChange={onProtectedSitesChange} />
+
       <hr className="border-stone-200 dark:border-stone-700 mb-3" />
 
       {!isGeckoBased() && (
diff --git a/components/options/ProtectedSitesSection.tsx b/components/options/ProtectedSitesSection.tsx
new file mode 100644
index 0000000..ea50eb7
--- /dev/null
+++ b/components/options/ProtectedSitesSection.tsx
@@ -0,0 +1,24 @@
+import { useTranslation } from '../../hooks/useTranslation';
+
+interface ProtectedSitesSectionProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function ProtectedSitesSection({ value, onChange }: ProtectedSitesSectionProps) {
+  const t = useTranslation();
+
+  return (
+    <div className="mb-3 max-w-xl">
+      <label className="block text-sm mb-1">{t('protectedSites')}</label>
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={t('protectedSitesPlaceholder')}
+        rows={2}
+        className="w-full rounded-md border border-stone-300 bg-stone-50 dark:border-stone-600 dark:bg-stone-800 px-3 py-1.5 text-sm placeholder:text-stone-500 focus:outline-none focus:border-blue-500 resize-y"
+      />
+      <p className="text-xs text-stone-500 mt-2">{t('protectedSitesHint')}</p>
+    </div>
+  );
+}
diff --git a/components/options/VisitedSitesSection.tsx b/components/options/VisitedSitesSection.tsx
index d68b1ef..f120902 100644
--- a/components/options/VisitedSitesSection.tsx
+++ b/components/options/VisitedSitesSection.tsx
@@ -1,4 +1,6 @@
+import { useEffect, useState } from 'react';
 import { useTranslation } from '../../hooks/useTranslation';
+import { getBrowserName, isGeckoBased } from '../../utils/browser-info';
 import type { VisitedSite } from '../../utils/clearing';
 import { DangerConfirmButton } from '../DangerConfirmButton';
 import { type ClearStatus } from '../StatusButton';
@@ -26,6 +28,11 @@ export function VisitedSitesSection({
   onClearSite,
 }: VisitedSitesSectionProps) {
   const t = useTranslation();
+  const [browserName, setBrowserName] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isGeckoBased()) getBrowserName().then(setBrowserName);
+  }, []);
 
   return (
     <div className="mt-4">
@@ -33,6 +40,11 @@ export function VisitedSitesSection({
         {t('visitedSites')}
       </h3>
       <p className="text-xs text-stone-500 mb-2">{t('visitedSitesDescription')}</p>
+      {browserName && (
+        <p className="text-xs text-stone-500 mb-2">
+          {t('visitedSitesContainerCaveat', { browser: browserName })}
+        </p>
+      )}
 
       <div className="flex gap-2 mb-2">
         <input
diff --git a/entrypoints/background.ts b/entrypoints/background.ts
new file mode 100644
index 0000000..fe2d770
--- /dev/null
+++ b/entrypoints/background.ts
@@ -0,0 +1,56 @@
+import { browser } from 'wxt/browser';
+import { defineBackground } from 'wxt/utils/define-background';
+import { linkedOriginsFor, tabOrigin } from '../utils/clearing';
+import { readPersistedSettingsRaw } from '../utils/storage-adapter';
+
+const BADGE_COLOR = '#2563eb';
+const SETTINGS_KEY = 'cache-cleaner-settings';
+
+interface PersistedShape {
+  state?: { linkedOrigins?: string; useOriginMappings?: boolean };
+}
+
+async function readMappingSettings(): Promise<{ linkedOrigins: string; useOriginMappings: boolean }> {
+  const raw = (await readPersistedSettingsRaw(SETTINGS_KEY)) as PersistedShape | null;
+  return {
+    linkedOrigins: raw?.state?.linkedOrigins ?? '',
+    useOriginMappings: raw?.state?.useOriginMappings ?? false,
+  };
+}
+
+async function updateBadge(tabId: number, url: string | undefined) {
+  const origin = url ? tabOrigin({ url }) : null;
+  if (!origin) {
+    await browser.action.setBadgeText({ tabId, text: '' });
+    return;
+  }
+
+  const { linkedOrigins, useOriginMappings } = await readMappingSettings();
+  const hasMapping = useOriginMappings && linkedOriginsFor(linkedOrigins, origin).length > 0;
+
+  await browser.action.setBadgeText({ tabId, text: hasMapping ? '●' : '' });
+  if (hasMapping) {
+    await browser.action.setBadgeBackgroundColor({ tabId, color: BADGE_COLOR });
+  }
+}
+
+export default defineBackground(() => {
+  browser.tabs.onActivated.addListener(({ tabId }) => {
+    browser.tabs.get(tabId).then((tab) => updateBadge(tabId, tab.url));
+  });
+
+  browser.tabs.onUpdated.addListener((tabId, info, tab) => {
+    if (info.status === 'complete') updateBadge(tabId, tab.url);
+  });
+
+  // Editing the mapping list or toggling "Use origin mappings" should update the
+  // badge immediately, not just on the next tab switch/navigation.
+  browser.storage.onChanged.addListener((changes, areaName) => {
+    if (areaName !== 'sync' || !Object.keys(changes).some((key) => key.startsWith(SETTINGS_KEY))) return;
+    browser.tabs.query({ active: true }).then((tabs) => {
+      for (const tab of tabs) {
+        if (tab.id != null) updateBadge(tab.id, tab.url);
+      }
+    });
+  });
+});
diff --git a/entrypoints/options/App.tsx b/entrypoints/options/App.tsx
index 0a65063..90d6bce 100644
--- a/entrypoints/options/App.tsx
+++ b/entrypoints/options/App.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useMemo, useState } from 'react';
 import { browser, type Browser } from 'wxt/browser';
 import { HelpPanel } from '../../components/HelpPanel';
+import { BackupSection } from '../../components/options/BackupSection';
+import { ClearLogSection } from '../../components/options/ClearLogSection';
 import { GlobalSection } from '../../components/options/GlobalSection';
 import { LanguageSection } from '../../components/options/LanguageSection';
 import { PerSiteSection } from '../../components/options/PerSiteSection';
@@ -10,6 +12,7 @@ import { type ClearStatus } from '../../components/StatusButton';
 import { useReloadGuard } from '../../hooks/useReloadGuard';
 import { useTheme } from '../../hooks/useTheme';
 import { useTranslation } from '../../hooks/useTranslation';
+import { recordClear } from '../../store/clearLog';
 import { useSettingsStore } from '../../store/settings';
 import { isGeckoBased } from '../../utils/browser-info';
 import {
@@ -18,6 +21,8 @@ import {
   clearTab,
   clearTabData,
   dedupeSitesByHostname,
+  filterProtectedTargets,
+  isProtectedSite,
   linkedOriginsFor,
   requestOriginPermission,
   siteScopedIds,
@@ -49,6 +54,8 @@ export default function App() {
     setLinkedOrigins,
     useOriginMappings,
     setUseOriginMappings,
+    protectedSites,
+    setProtectedSites,
     theme,
     setTheme,
     language,
@@ -91,9 +98,12 @@ export default function App() {
 
   const filteredTabs = useMemo(() => {
     const q = siteFilter.trim().toLowerCase();
-    if (!q) return tabs;
-    return tabs.filter((tab) => (tabDomain(tab) ?? '').toLowerCase().includes(q));
-  }, [tabs, siteFilter]);
+    return tabs.filter((tab) => {
+      const domain = tabDomain(tab) ?? '';
+      if (isProtectedSite(protectedSites, domain)) return false;
+      return !q || domain.toLowerCase().includes(q);
+    });
+  }, [tabs, siteFilter, protectedSites]);
 
   const filteredHistory = useMemo(() => {
     const q = historyFilter.trim().toLowerCase();
@@ -104,9 +114,9 @@ export default function App() {
   const visitedSites = useMemo(
     () =>
       dedupeSitesByHostname(visitedHistory.map((item) => item.url)).filter(
-        (site) => !clearedHostnames.has(site.hostname),
+        (site) => !clearedHostnames.has(site.hostname) && !isProtectedSite(protectedSites, site.hostname),
       ),
-    [visitedHistory, clearedHostnames],
+    [visitedHistory, clearedHostnames, protectedSites],
   );
 
   const filteredVisitedSites = useMemo(() => {
@@ -119,6 +129,7 @@ export default function App() {
     setGlobalStatus('clearing');
     try {
       await clearGlobal(selectedTypesGlobal);
+      recordClear('(global)', selectedTypesGlobal);
       setGlobalStatus('done');
     } catch (err) {
       console.error('Bleep: global clear failed', err);
@@ -129,6 +140,7 @@ export default function App() {
 
   async function handleSiteClear(tab: Tab) {
     if (tab.id == null || isReloading(tab.id)) return;
+    if (isProtectedSite(protectedSites, tabDomain(tab) ?? '')) return;
     setBusyTabIds((s) => new Set(s).add(tab.id!));
     setFailedTabIds((s) => {
       const next = new Set(s);
@@ -141,13 +153,14 @@ export default function App() {
       if (!ok) setFailedTabIds((s) => new Set(s).add(tab.id!));
       else {
         const origin = tabOrigin(tab);
+        let linkedTargets: string[] = [];
         if (useOriginMappings && origin) {
+          linkedTargets = filterProtectedTargets(linkedOriginsFor(linkedOrigins, origin), protectedSites);
           await Promise.all(
-            linkedOriginsFor(linkedOrigins, origin).map((target) =>
-              clearLinkedOrigin(target, ids, tabCookieStoreId(tab)),
-            ),
+            linkedTargets.map((target) => clearLinkedOrigin(target, ids, tabCookieStoreId(tab))),
           );
         }
+        recordClear(tabDomain(tab) ?? origin ?? tab.url ?? '?', ids, linkedTargets);
         if (autoReloadAfterClear) {
           markReloading(tab.id);
           browser.tabs.reload(tab.id, { bypassCache: true });
@@ -184,6 +197,7 @@ export default function App() {
       const clearedTabIds: number[] = [];
       const linkedTasks: Promise<unknown>[] = [];
       const seenLinkedClears = new Set<string>();
+      const allLinkedTargets: string[] = [];
       for (const result of results) {
         if (result.status === 'rejected') continue;
         const { tab, ok } = result.value;
@@ -196,14 +210,18 @@ export default function App() {
         const origin = tabOrigin(tab);
         if (!origin) continue;
         const storeId = tabCookieStoreId(tab);
-        for (const target of linkedOriginsFor(linkedOrigins, origin)) {
+        for (const target of filterProtectedTargets(linkedOriginsFor(linkedOrigins, origin), protectedSites)) {
           const key = `${storeId ?? ''}||${target}`;
           if (seenLinkedClears.has(key)) continue;
           seenLinkedClears.add(key);
+          allLinkedTargets.push(target);
           linkedTasks.push(clearLinkedOrigin(target, ids, storeId));
         }
       }
       await Promise.all(linkedTasks);
+      if (clearedTabIds.length > 0) {
+        recordClear(t('clearLogBulkTabs', { count: clearedTabIds.length }), ids, allLinkedTargets);
+      }
       if (autoReloadAfterClear) {
         for (const tabId of clearedTabIds) {
           markReloading(tabId);
@@ -220,20 +238,31 @@ export default function App() {
     setTimeout(() => setBulkStatus('idle'), 1500);
   }
 
-  async function clearVisitedSite(site: VisitedSite): Promise<boolean> {
+  async function clearVisitedSite(site: VisitedSite): Promise<string[]> {
     const ids = siteScopedIds(selectedTypesSite);
-    await clearLinkedOrigin(site.origin, ids);
+    // Firefox has no native per-site clear for cache/localStorage/sessionStorage, so
+    // clearLinkedOrigin falls back to a throwaway background tab for those. If the
+    // site is already open in a real tab, clear through that instead — no extra tab,
+    // and it picks up the tab's actual cookieStoreId (Firefox container) for free.
+    const openTab = (await browser.tabs.query({})).find((tab) => tabDomain(tab) === site.hostname);
+    const cookieStoreId = openTab ? tabCookieStoreId(openTab) : undefined;
+
+    if (openTab?.id != null) {
+      await clearTabData(openTab, ids);
+    } else {
+      await clearLinkedOrigin(site.origin, ids);
+    }
+
+    let linkedTargets: string[] = [];
     if (useOriginMappings) {
-      await Promise.all(
-        linkedOriginsFor(linkedOrigins, site.origin).map((target) =>
-          clearLinkedOrigin(target, ids),
-        ),
-      );
+      linkedTargets = filterProtectedTargets(linkedOriginsFor(linkedOrigins, site.origin), protectedSites);
+      await Promise.all(linkedTargets.map((target) => clearLinkedOrigin(target, ids, cookieStoreId)));
     }
-    return true;
+    return linkedTargets;
   }
 
   async function handleClearVisitedSite(site: VisitedSite) {
+    if (isProtectedSite(protectedSites, site.hostname)) return;
     setBusyVisitedHostnames((s) => new Set(s).add(site.hostname));
     setFailedVisitedHostnames((s) => {
       const next = new Set(s);
@@ -243,7 +272,8 @@ export default function App() {
     try {
       const granted = await requestOriginPermission();
       if (!granted) throw new Error('permission denied');
-      await clearVisitedSite(site);
+      const linkedTargets = await clearVisitedSite(site);
+      recordClear(site.hostname, siteScopedIds(selectedTypesSite), linkedTargets);
       setClearedHostnames((s) => new Set(s).add(site.hostname));
     } catch (err) {
       console.error('Bleep: visited site clear failed', err);
@@ -270,18 +300,30 @@ export default function App() {
       setBusyVisitedHostnames(new Set(targets.map((s) => s.hostname)));
       const results = await mapWithConcurrency(targets, VISITED_CLEAR_CONCURRENCY, async (site) => {
         try {
-          await clearVisitedSite(site);
-          return { site, ok: true };
+          const linkedTargets = await clearVisitedSite(site);
+          return { site, ok: true, linkedTargets };
         } catch (err) {
           console.error('Bleep: visited site clear failed', site.hostname, err);
-          return { site, ok: false };
+          return { site, ok: false, linkedTargets: [] as string[] };
         }
       });
       const failed = new Set<string>();
       const cleared = new Set<string>();
-      for (const { site, ok } of results) {
-        if (ok) cleared.add(site.hostname);
-        else failed.add(site.hostname);
+      const allLinkedTargets: string[] = [];
+      for (const { site, ok, linkedTargets } of results) {
+        if (ok) {
+          cleared.add(site.hostname);
+          allLinkedTargets.push(...linkedTargets);
+        } else {
+          failed.add(site.hostname);
+        }
+      }
+      if (cleared.size > 0) {
+        recordClear(
+          t('clearLogBulkVisited', { count: cleared.size }),
+          siteScopedIds(selectedTypesSite),
+          allLinkedTargets,
+        );
       }
       setClearedHostnames((s) => new Set([...s, ...cleared]));
       setFailedVisitedHostnames(failed);
@@ -332,6 +374,10 @@ export default function App() {
           <>
             <ThemeSection theme={theme} onChange={setTheme} />
             <LanguageSection language={language} onChange={setLanguage} />
+            <hr className="border-stone-200 dark:border-stone-700 mb-3" />
+            <BackupSection />
+            <hr className="border-stone-200 dark:border-stone-700 mb-3" />
+            <ClearLogSection />
           </>
         )}
 
@@ -348,6 +394,7 @@ export default function App() {
             historyStatus={historyBulkStatus}
             onClearAllHistory={handleClearAllHistory}
             onDeleteHistoryItem={handleDeleteHistoryItem}
+            hasProtectedSites={protectedSites.trim().length > 0}
           />
         )}
 
@@ -362,6 +409,8 @@ export default function App() {
             onUseOriginMappingsChange={setUseOriginMappings}
             linkedOrigins={linkedOrigins}
             onLinkedOriginsChange={setLinkedOrigins}
+            protectedSites={protectedSites}
+            onProtectedSitesChange={setProtectedSites}
             siteFilter={siteFilter}
             onSiteFilterChange={setSiteFilter}
             bulkStatus={bulkStatus}
diff --git a/entrypoints/popup/App.tsx b/entrypoints/popup/App.tsx
index f41753d..599936d 100644
--- a/entrypoints/popup/App.tsx
+++ b/entrypoints/popup/App.tsx
@@ -7,15 +7,19 @@ import { StatusButton, type ClearStatus } from '../../components/StatusButton';
 import { useReloadGuard } from '../../hooks/useReloadGuard';
 import { useTheme } from '../../hooks/useTheme';
 import { useTranslation } from '../../hooks/useTranslation';
+import { recordClear } from '../../store/clearLog';
 import { useSettingsStore } from '../../store/settings';
 import {
   clearGlobal,
   clearLinkedOrigin,
   clearTabData,
+  filterProtectedTargets,
+  isProtectedSite,
   linkedOriginsFor,
   requestOriginPermission,
   siteScopedIds,
   tabCookieStoreId,
+  tabDomain,
   tabOrigin,
 } from '../../utils/clearing';
 import { siteScopedDataTypes } from '../../utils/data-types';
@@ -33,21 +37,27 @@ export default function App() {
   const linkedOrigins = useSettingsStore((s) => s.linkedOrigins);
   const useOriginMappings = useSettingsStore((s) => s.useOriginMappings);
   const setUseOriginMappings = useSettingsStore((s) => s.setUseOriginMappings);
+  const protectedSites = useSettingsStore((s) => s.protectedSites);
   const [status, setStatus] = useState<ClearStatus>('idle');
   const [tabStatus, setTabStatus] = useState<ClearStatus>('idle');
   const [activeTabId, setActiveTabId] = useState<number | null>(null);
+  const [activeTabDomain, setActiveTabDomain] = useState<string | null>(null);
   const { markReloading, isReloading } = useReloadGuard();
 
   useEffect(() => {
     browser.tabs.query({ active: true, currentWindow: true }).then(([tab]) => {
       setActiveTabId(tab?.id ?? null);
+      setActiveTabDomain(tab ? tabDomain(tab) : null);
     });
   }, []);
 
+  const isActiveTabProtected = activeTabDomain != null && isProtectedSite(protectedSites, activeTabDomain);
+
   async function handleClear() {
     setStatus('clearing');
     try {
       await clearGlobal(selectedTypesGlobal);
+      recordClear('(global)', selectedTypesGlobal);
       setStatus('done');
     } catch (err) {
       console.error('Bleep: global clear failed', err);
@@ -57,6 +67,7 @@ export default function App() {
   }
 
   async function handleClearActiveTab() {
+    if (isActiveTabProtected) return;
     setTabStatus('clearing');
     try {
       const granted = await requestOriginPermission();
@@ -66,16 +77,19 @@ export default function App() {
       } else {
         const ids = siteScopedIds(selectedTypesSite);
         const ok = granted && activeTab ? await clearTabData(activeTab, ids) : false;
-        if (ok && activeTab && useOriginMappings) {
-          const origin = tabOrigin(activeTab);
-          const cookieStoreId = tabCookieStoreId(activeTab);
-          if (origin) {
-            await Promise.all(
-              linkedOriginsFor(linkedOrigins, origin).map((target) =>
-                clearLinkedOrigin(target, ids, cookieStoreId),
-              ),
-            );
+        if (ok && activeTab) {
+          let linkedTargets: string[] = [];
+          if (useOriginMappings) {
+            const origin = tabOrigin(activeTab);
+            const cookieStoreId = tabCookieStoreId(activeTab);
+            if (origin) {
+              linkedTargets = filterProtectedTargets(linkedOriginsFor(linkedOrigins, origin), protectedSites);
+              await Promise.all(
+                linkedTargets.map((target) => clearLinkedOrigin(target, ids, cookieStoreId)),
+              );
+            }
           }
+          recordClear(tabDomain(activeTab) ?? activeTab.url ?? '?', ids, linkedTargets);
         }
         setTabStatus(ok ? 'done' : 'failed');
         if (ok && autoReloadAfterClear && activeTab?.id != null) {
@@ -118,12 +132,14 @@ export default function App() {
       <StatusButton
         status={isReloading(activeTabId) ? 'clearing' : tabStatus}
         onClick={handleClearActiveTab}
-        disabled={isReloading(activeTabId)}
-        idleLabel={t('clearActiveTabOnly')}
+        disabled={isReloading(activeTabId) || isActiveTabProtected}
+        idleLabel={isActiveTabProtected ? t('protectedSiteLabel') : t('clearActiveTabOnly')}
         clearingLabel={isReloading(activeTabId) ? t('reloading') : t('clearing')}
         failedLabel={t('failedOrDenied')}
       />
-      <p className="text-xs text-stone-500 mt-1">{t('activeTabHint')}</p>
+      <p className="text-xs text-stone-500 mt-1">
+        {isActiveTabProtected ? t('protectedSiteHint') : t('activeTabHint')}
+      </p>
 
       <div className="mt-3">
         <DangerConfirmButton
diff --git a/store/clearLog.test.ts b/store/clearLog.test.ts
new file mode 100644
index 0000000..c2bc9f9
--- /dev/null
+++ b/store/clearLog.test.ts
@@ -0,0 +1,44 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { recordClear, useClearLogStore } from './clearLog';
+
+beforeEach(() => {
+  useClearLogStore.setState({ entries: [] });
+});
+
+describe('logClear / recordClear', () => {
+  it('adds an entry with the given fields', () => {
+    recordClear('domain.com', ['cache', 'cookies'], ['auth.domain.com']);
+    const [entry] = useClearLogStore.getState().entries;
+    expect(entry).toMatchObject({
+      hostname: 'domain.com',
+      types: ['cache', 'cookies'],
+      linkedTargets: ['auth.domain.com'],
+    });
+    expect(typeof entry!.timestamp).toBe('number');
+    expect(typeof entry!.id).toBe('string');
+  });
+
+  it('newest entry goes first', () => {
+    recordClear('first.com', ['cache']);
+    recordClear('second.com', ['cache']);
+    const entries = useClearLogStore.getState().entries;
+    expect(entries[0]!.hostname).toBe('second.com');
+    expect(entries[1]!.hostname).toBe('first.com');
+  });
+
+  it('caps the log at 20 entries, dropping the oldest', () => {
+    for (let i = 0; i < 25; i++) recordClear(`site${i}.com`, ['cache']);
+    const entries = useClearLogStore.getState().entries;
+    expect(entries).toHaveLength(20);
+    expect(entries[0]!.hostname).toBe('site24.com');
+    expect(entries.at(-1)!.hostname).toBe('site5.com');
+  });
+});
+
+describe('clearLog', () => {
+  it('empties the entries list', () => {
+    recordClear('domain.com', ['cache']);
+    useClearLogStore.getState().clearLog();
+    expect(useClearLogStore.getState().entries).toEqual([]);
+  });
+});
diff --git a/store/clearLog.ts b/store/clearLog.ts
new file mode 100644
index 0000000..143e2b8
--- /dev/null
+++ b/store/clearLog.ts
@@ -0,0 +1,44 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+import type { DataTypeId } from '../utils/data-types';
+import { browserLocalStorage } from '../utils/storage-adapter';
+
+export interface ClearLogEntry {
+  id: string;
+  timestamp: number;
+  hostname: string;
+  types: DataTypeId[];
+  linkedTargets: string[];
+}
+
+const MAX_LOG_ENTRIES = 20;
+
+interface ClearLogState {
+  entries: ClearLogEntry[];
+  logClear: (entry: Omit<ClearLogEntry, 'id'>) => void;
+  clearLog: () => void;
+}
+
+// Device-specific activity, not a preference — kept in local storage rather than the
+// synced settings store so it doesn't consume the sync quota or show up on other
+// machines as "stuff that happened somewhere else".
+export const useClearLogStore = create<ClearLogState>()(
+  persist(
+    (set, get) => ({
+      entries: [],
+      logClear: (entry) => {
+        const id = `${entry.timestamp}-${Math.random().toString(36).slice(2)}`;
+        set({ entries: [{ ...entry, id }, ...get().entries].slice(0, MAX_LOG_ENTRIES) });
+      },
+      clearLog: () => set({ entries: [] }),
+    }),
+    {
+      name: 'cache-cleaner-clear-log',
+      storage: createJSONStorage(() => browserLocalStorage),
+    },
+  ),
+);
+
+export function recordClear(hostname: string, types: DataTypeId[], linkedTargets: string[] = []): void {
+  useClearLogStore.getState().logClear({ timestamp: Date.now(), hostname, types, linkedTargets });
+}
diff --git a/store/settings.test.ts b/store/settings.test.ts
index 90a8653..7ed9b45 100644
--- a/store/settings.test.ts
+++ b/store/settings.test.ts
@@ -29,6 +29,7 @@ describe('simple setters', () => {
     s.setAutoReloadAfterClear(false);
     s.setLinkedOrigins('a.com => b.com');
     s.setUseOriginMappings(false);
+    s.setProtectedSites('protected.com');
     s.setTheme('dark');
     s.setLanguage('ru');
 
@@ -36,11 +37,26 @@ describe('simple setters', () => {
     expect(state.autoReloadAfterClear).toBe(false);
     expect(state.linkedOrigins).toBe('a.com => b.com');
     expect(state.useOriginMappings).toBe(false);
+    expect(state.protectedSites).toBe('protected.com');
     expect(state.theme).toBe('dark');
     expect(state.language).toBe('ru');
   });
 });
 
+describe('importSettings', () => {
+  it('merges only the provided fields, leaving the rest untouched', () => {
+    const s = useSettingsStore.getState();
+    s.setAutoReloadAfterClear(false);
+
+    s.importSettings({ theme: 'dark', linkedOrigins: 'a.com => b.com' });
+
+    const state = useSettingsStore.getState();
+    expect(state.theme).toBe('dark');
+    expect(state.linkedOrigins).toBe('a.com => b.com');
+    expect(state.autoReloadAfterClear).toBe(false);
+  });
+});
+
 describe('resetSettings', () => {
   it('restores every field to DEFAULTS', () => {
     const s = useSettingsStore.getState();
diff --git a/store/settings.ts b/store/settings.ts
index 2b88be4..b4107c9 100644
--- a/store/settings.ts
+++ b/store/settings.ts
@@ -2,7 +2,7 @@ import { create } from 'zustand';
 import { createJSONStorage, persist } from 'zustand/middleware';
 import type { DataTypeId } from '../utils/data-types';
 import type { Language } from '../utils/i18n';
-import { browserLocalStorage } from '../utils/storage-adapter';
+import { browserSyncStorage } from '../utils/storage-adapter';
 
 export type Theme = 'system' | 'light' | 'dark';
 
@@ -20,6 +20,7 @@ export const DEFAULTS = {
   autoReloadAfterClear: true,
   linkedOrigins: '',
   useOriginMappings: true,
+  protectedSites: '',
   theme: 'system' as Theme,
   language: 'auto' as Language,
 };
@@ -30,6 +31,7 @@ interface SettingsState {
   autoReloadAfterClear: boolean;
   linkedOrigins: string;
   useOriginMappings: boolean;
+  protectedSites: string;
   theme: Theme;
   language: Language;
   toggleTypeGlobal: (id: DataTypeId) => void;
@@ -37,9 +39,11 @@ interface SettingsState {
   setAutoReloadAfterClear: (value: boolean) => void;
   setLinkedOrigins: (value: string) => void;
   setUseOriginMappings: (value: boolean) => void;
+  setProtectedSites: (value: string) => void;
   setTheme: (theme: Theme) => void;
   setLanguage: (language: Language) => void;
   resetSettings: () => void;
+  importSettings: (data: Partial<typeof DEFAULTS>) => void;
 }
 
 function toggleIn(
@@ -61,13 +65,15 @@ export const useSettingsStore = create<SettingsState>()(
       setAutoReloadAfterClear: (value) => set({ autoReloadAfterClear: value }),
       setLinkedOrigins: (value) => set({ linkedOrigins: value }),
       setUseOriginMappings: (value) => set({ useOriginMappings: value }),
+      setProtectedSites: (value) => set({ protectedSites: value }),
       setTheme: (theme) => set({ theme }),
       setLanguage: (language) => set({ language }),
       resetSettings: () => set(DEFAULTS),
+      importSettings: (data) => set(data),
     }),
     {
       name: 'cache-cleaner-settings',
-      storage: createJSONStorage(() => browserLocalStorage),
+      storage: createJSONStorage(() => browserSyncStorage),
     },
   ),
 );
diff --git a/utils/browser-info.test.ts b/utils/browser-info.test.ts
new file mode 100644
index 0000000..d729723
--- /dev/null
+++ b/utils/browser-info.test.ts
@@ -0,0 +1,38 @@
+import { browser } from 'wxt/browser';
+import { afterEach, describe, expect, it } from 'vitest';
+import { getBrowserName, isGeckoBased } from './browser-info';
+
+afterEach(() => {
+  delete (browser.runtime as { getBrowserInfo?: unknown }).getBrowserInfo;
+});
+
+describe('isGeckoBased', () => {
+  it('is false when getBrowserInfo is absent (Chromium-family browsers)', () => {
+    expect(isGeckoBased()).toBe(false);
+  });
+
+  it('is true when getBrowserInfo exists (any Gecko-based browser)', () => {
+    (browser.runtime as { getBrowserInfo?: unknown }).getBrowserInfo = () => {};
+    expect(isGeckoBased()).toBe(true);
+  });
+});
+
+describe('getBrowserName', () => {
+  it('returns the self-reported name from getBrowserInfo', async () => {
+    (browser.runtime as { getBrowserInfo?: () => Promise<{ name: string }> }).getBrowserInfo = async () => ({
+      name: 'Zen',
+    });
+    expect(await getBrowserName()).toBe('Zen');
+  });
+
+  it('falls back to "Firefox" when getBrowserInfo is absent', async () => {
+    expect(await getBrowserName()).toBe('Firefox');
+  });
+
+  it('falls back to "Firefox" when getBrowserInfo rejects', async () => {
+    (browser.runtime as { getBrowserInfo?: () => Promise<{ name: string }> }).getBrowserInfo = async () => {
+      throw new Error('boom');
+    };
+    expect(await getBrowserName()).toBe('Firefox');
+  });
+});
diff --git a/utils/browser-info.ts b/utils/browser-info.ts
index 43929d3..fb1f242 100644
--- a/utils/browser-info.ts
+++ b/utils/browser-info.ts
@@ -3,3 +3,17 @@ import { browser } from 'wxt/browser';
 export function isGeckoBased(): boolean {
   return typeof (browser.runtime as { getBrowserInfo?: unknown }).getBrowserInfo === 'function';
 }
+
+/** The actual browser's self-reported name (e.g. "Firefox", "Zen", "LibreWolf") for
+ * Gecko-based forks — only call after isGeckoBased() confirms getBrowserInfo exists.
+ * Chromium-family browsers don't implement this API at all. */
+export async function getBrowserName(): Promise<string> {
+  const getBrowserInfo = (browser.runtime as { getBrowserInfo?: () => Promise<{ name: string }> })
+    .getBrowserInfo;
+  if (!getBrowserInfo) return 'Firefox';
+  try {
+    return (await getBrowserInfo()).name;
+  } catch {
+    return 'Firefox';
+  }
+}
diff --git a/utils/clearing.firefox.test.ts b/utils/clearing.firefox.test.ts
index 8ebe93c..58c02b7 100644
--- a/utils/clearing.firefox.test.ts
+++ b/utils/clearing.firefox.test.ts
@@ -65,8 +65,10 @@ beforeEach(() => {
 });
 
 describe('clearLinkedOrigin (Firefox path)', () => {
-  it('clears cookies and IndexedDB natively, and cache via a background tab', async () => {
-    await clearLinkedOrigin('https://auth.domain.com', ['cache', 'cookies', 'indexedDB']);
+  const NATIVE_IDS = ['cookies', 'indexedDB', 'localStorage', 'serviceWorkers'] as const;
+
+  it('clears cookies/indexedDB/localStorage/serviceWorkers natively, and cacheStorage via a background tab', async () => {
+    await clearLinkedOrigin('https://auth.domain.com', ['cacheStorage', ...NATIVE_IDS]);
 
     expect(browser.tabs.create).toHaveBeenCalledWith(
       expect.objectContaining({ url: 'https://auth.domain.com', active: false }),
@@ -78,43 +80,49 @@ describe('clearLinkedOrigin (Firefox path)', () => {
     expect(browser.cookies.getAll).toHaveBeenCalled();
     expect(browser.browsingData.remove).toHaveBeenCalledWith(
       { hostnames: ['auth.domain.com'] },
-      { indexedDB: true },
+      { indexedDB: true, localStorage: true, serviceWorkers: true },
     );
   });
 
-  it('closes the background tab before clearing cookies/IndexedDB, so a page reload cannot repopulate them after the wipe', async () => {
-    await clearLinkedOrigin('https://auth.domain.com', ['cache', 'cookies', 'indexedDB']);
+  it('never needs a tab for HTTP Cache — Firefox has no per-site API for it at all', async () => {
+    await clearLinkedOrigin('https://auth.domain.com', ['cache', 'cookies']);
+    expect(browser.tabs.create).not.toHaveBeenCalled();
+  });
+
+  it('closes the background tab before clearing cookies/indexedDB/localStorage/serviceWorkers, so a page reload cannot repopulate them after the wipe', async () => {
+    await clearLinkedOrigin('https://auth.domain.com', ['cacheStorage', ...NATIVE_IDS]);
 
     const tabRemoveIndex = calls.indexOf('tabs.remove');
     const cookiesIndex = calls.indexOf('cookies.getAll');
-    const indexedDbIndex = calls.indexOf('browsingData.remove');
+    const nativeIndex = calls.indexOf('browsingData.remove');
 
     expect(tabRemoveIndex).toBeGreaterThanOrEqual(0);
     expect(tabRemoveIndex).toBeLessThan(cookiesIndex);
-    expect(tabRemoveIndex).toBeLessThan(indexedDbIndex);
+    expect(tabRemoveIndex).toBeLessThan(nativeIndex);
   });
 
   it('passes the cookieStoreId (Firefox container) through to the background tab', async () => {
-    await clearLinkedOrigin('https://auth.domain.com', ['cache'], 'firefox-container-1');
+    await clearLinkedOrigin('https://auth.domain.com', ['cacheStorage'], 'firefox-container-1');
     expect(browser.tabs.create).toHaveBeenCalledWith(
       expect.objectContaining({ cookieStoreId: 'firefox-container-1' }),
     );
   });
 
-  it('skips opening a tab entirely when only cookies/IndexedDB are requested', async () => {
-    await clearLinkedOrigin('https://auth.domain.com', ['cookies', 'indexedDB']);
+  it('skips opening a tab entirely when only natively-scopeable types are requested', async () => {
+    await clearLinkedOrigin('https://auth.domain.com', [...NATIVE_IDS]);
     expect(browser.tabs.create).not.toHaveBeenCalled();
     expect(browser.cookies.getAll).toHaveBeenCalled();
-    expect(browser.browsingData.remove).toHaveBeenCalled();
+    expect(browser.browsingData.remove).toHaveBeenCalledWith(
+      { hostnames: ['auth.domain.com'] },
+      { indexedDB: true, localStorage: true, serviceWorkers: true },
+    );
   });
 
-  it('still clears cookies/IndexedDB even if the background-tab step fails, then rethrows', async () => {
-    (browser.scripting.executeScript as ReturnType<typeof vi.fn>).mockRejectedValue(
-      new Error('boom'),
-    );
+  it('still clears cookies/indexedDB even if the background-tab step fails, then rethrows', async () => {
+    (browser.scripting.executeScript as ReturnType<typeof vi.fn>).mockRejectedValue(new Error('boom'));
 
     await expect(
-      clearLinkedOrigin('https://auth.domain.com', ['cache', 'cookies', 'indexedDB']),
+      clearLinkedOrigin('https://auth.domain.com', ['cacheStorage', ...NATIVE_IDS]),
     ).rejects.toThrow('boom');
 
     expect(browser.tabs.remove).toHaveBeenCalled();
@@ -133,9 +141,11 @@ describe('clearLinkedOrigin (Firefox path)', () => {
 describe('clearTabData (Firefox path)', () => {
   it('clears an already-open tab via the content script, no navigation needed', async () => {
     const ok = await clearTabData({ id: 42, url: 'https://domain.com' }, [
-      'cache',
+      'cacheStorage',
       'cookies',
       'indexedDB',
+      'localStorage',
+      'serviceWorkers',
     ]);
 
     expect(ok).toBe(true);
@@ -146,12 +156,12 @@ describe('clearTabData (Firefox path)', () => {
     expect(browser.cookies.getAll).toHaveBeenCalled();
     expect(browser.browsingData.remove).toHaveBeenCalledWith(
       { hostnames: ['domain.com'] },
-      { indexedDB: true },
+      { indexedDB: true, localStorage: true, serviceWorkers: true },
     );
   });
 
   it('returns false without touching any browser API when the tab has no url', async () => {
-    const ok = await clearTabData({ id: 42 }, ['cache']);
+    const ok = await clearTabData({ id: 42 }, ['cacheStorage']);
     expect(ok).toBe(false);
     expect(browser.scripting.executeScript).not.toHaveBeenCalled();
   });
diff --git a/utils/clearing.test.ts b/utils/clearing.test.ts
index 90a267c..5162631 100644
--- a/utils/clearing.test.ts
+++ b/utils/clearing.test.ts
@@ -1,6 +1,8 @@
 import { describe, expect, it } from 'vitest';
 import {
   dedupeSitesByHostname,
+  filterProtectedTargets,
+  isProtectedSite,
   isValidHost,
   linkedOriginsFor,
   parseOriginMappings,
@@ -139,6 +141,11 @@ describe('dedupeSitesByHostname', () => {
     ]);
   });
 
+  it('skips non-http(s) urls (chrome://, about:, file://)', () => {
+    const urls = ['chrome://extensions/', 'about:blank', 'file:///Users/me/index.html', 'https://domain.com'];
+    expect(dedupeSitesByHostname(urls)).toEqual([{ hostname: 'domain.com', origin: 'https://domain.com' }]);
+  });
+
   it('returns an empty list for no input', () => {
     expect(dedupeSitesByHostname([])).toEqual([]);
   });
@@ -166,3 +173,44 @@ describe('tabOrigin / tabDomain / tabCookieStoreId', () => {
     expect(tabCookieStoreId({})).toBeUndefined();
   });
 });
+
+describe('isProtectedSite', () => {
+  const list = 'app.your-company.com\nother.com';
+
+  it('matches an exact protected hostname', () => {
+    expect(isProtectedSite(list, 'app.your-company.com')).toBe(true);
+  });
+
+  it('matches a subdomain of a protected hostname', () => {
+    expect(isProtectedSite(list, 'sso.app.your-company.com')).toBe(true);
+  });
+
+  it('does not match an unrelated site', () => {
+    expect(isProtectedSite(list, 'unrelated.com')).toBe(false);
+  });
+
+  it('does not match a superstring host', () => {
+    expect(isProtectedSite(list, 'evilapp.your-company.com')).toBe(false);
+  });
+
+  it('treats an empty list as protecting nothing', () => {
+    expect(isProtectedSite('', 'anything.com')).toBe(false);
+  });
+});
+
+describe('filterProtectedTargets', () => {
+  it('drops targets whose hostname is protected', () => {
+    const targets = ['https://auth.domain.com', 'https://other.com'];
+    expect(filterProtectedTargets(targets, 'auth.domain.com')).toEqual(['https://other.com']);
+  });
+
+  it('keeps everything when the protected list is empty', () => {
+    const targets = ['https://auth.domain.com'];
+    expect(filterProtectedTargets(targets, '')).toEqual(targets);
+  });
+
+  it('keeps everything when nothing matches', () => {
+    const targets = ['https://a.com', 'https://b.com'];
+    expect(filterProtectedTargets(targets, 'unrelated.com')).toEqual(targets);
+  });
+});
diff --git a/utils/clearing.ts b/utils/clearing.ts
index 316cf49..b65f61f 100644
--- a/utils/clearing.ts
+++ b/utils/clearing.ts
@@ -71,23 +71,18 @@ async function clearInMainWorld(ids: string[]): Promise<{ failed: Record<string,
     });
   }
 
+  // Only cacheStorage/sessionStorage land here — indexedDB, localStorage, and
+  // serviceWorkers are all natively hostname-scoped by browsingData.remove on
+  // Firefox (see clearHostnameScopedNative), so they never need a tab at all.
   const handlers: Record<string, () => Promise<void> | void> = {
     async cacheStorage() {
       if (!('caches' in self)) return;
       const keys = await caches.keys();
       await Promise.all(keys.map((key) => caches.delete(key)));
     },
-    localStorage() {
-      localStorage.clear();
-    },
     sessionStorage() {
       sessionStorage.clear();
     },
-    async serviceWorkers() {
-      if (!('serviceWorker' in navigator)) return;
-      const registrations = await navigator.serviceWorker.getRegistrations();
-      await Promise.all(registrations.map((r) => r.unregister()));
-    },
   };
 
   const results = await Promise.allSettled(
@@ -103,10 +98,26 @@ async function clearInMainWorld(ids: string[]): Promise<{ failed: Record<string,
   return { failed };
 }
 
-async function clearIndexedDBForHostname(hostname: string): Promise<void> {
+// Firefox's browsingData.remove({hostnames}) natively scopes these three to one
+// site (indexedDB since FF77, localStorage/serviceWorkers since FF56) — no tab or
+// content script needed, unlike cacheStorage/sessionStorage/cache which Firefox has
+// no per-site API for at all.
+const NATIVE_HOSTNAME_KEYS: Partial<Record<DataTypeId, string>> = {
+  indexedDB: 'indexedDB',
+  localStorage: 'localStorage',
+  serviceWorkers: 'serviceWorkers',
+};
+
+async function clearHostnameScopedNative(hostname: string, ids: DataTypeId[]): Promise<void> {
+  const dataToRemove: Record<string, boolean> = {};
+  for (const id of ids) {
+    const key = NATIVE_HOSTNAME_KEYS[id];
+    if (key) dataToRemove[key] = true;
+  }
+  if (Object.keys(dataToRemove).length === 0) return;
   await browser.browsingData.remove(
     { hostnames: [hostname] } as Parameters<typeof browser.browsingData.remove>[0],
-    { indexedDB: true },
+    dataToRemove,
   );
 }
 
@@ -134,7 +145,7 @@ async function clearSiteViaContentScript(
   cookieStoreId?: string,
 ): Promise<void> {
   const scoped = siteScopedIds(ids);
-  const scriptIds = scoped.filter((id) => id !== 'cookies' && id !== 'indexedDB');
+  const scriptIds = scoped.filter((id) => id === 'cacheStorage' || id === 'sessionStorage');
 
   const tasks: Promise<unknown>[] = [];
   if (scriptIds.length > 0) {
@@ -143,8 +154,8 @@ async function clearSiteViaContentScript(
   if (scoped.includes('cookies')) {
     tasks.push(withTimeout(clearCookiesForOrigin(origin, cookieStoreId), 15000));
   }
-  if (scoped.includes('indexedDB')) {
-    tasks.push(withTimeout(clearIndexedDBForHostname(new URL(origin).hostname), 15000));
+  if (scoped.some((id) => id in NATIVE_HOSTNAME_KEYS)) {
+    tasks.push(withTimeout(clearHostnameScopedNative(new URL(origin).hostname, scoped), 15000));
   }
   await Promise.all(tasks);
 }
@@ -257,6 +268,30 @@ export function linkedOriginsFor(raw: string, activeOrigin: string): string[] {
     .flatMap((m) => m.targets);
 }
 
+function parseHostList(raw: string): string[] {
+  return raw
+    .split('\n')
+    .map((line) => extractHostname(line))
+    .filter(Boolean);
+}
+
+/** Same subdomain-covering semantics as linkedOriginsFor's source matching — a
+ * protected entry of "domain.com" also protects "sso.domain.com". Doesn't apply to
+ * the Global scope: browsingData.remove has no way to exclude specific origins from
+ * an unscoped clear, so protection only guards the per-site clear surfaces (tabs,
+ * visited sites, and mapped linked-origin targets). */
+export function isProtectedSite(raw: string, hostname: string): boolean {
+  const host = hostname.toLowerCase();
+  return parseHostList(raw).some((protectedHost) => host === protectedHost || host.endsWith(`.${protectedHost}`));
+}
+
+/** Drops any linked-origin target that's itself protected, so a mapping can't be
+ * used to route around the protected-sites list. */
+export function filterProtectedTargets(targets: string[], protectedRaw: string): string[] {
+  if (!protectedRaw.trim()) return targets;
+  return targets.filter((target) => !isProtectedSite(protectedRaw, extractHostname(target)));
+}
+
 function waitForTabComplete(tabId: number, ms: number): Promise<void> {
   return withTimeout(
     new Promise<void>((resolve) => {
@@ -281,7 +316,7 @@ export async function clearLinkedOrigin(
   if (scoped.length === 0) return;
 
   if (import.meta.env.FIREFOX) {
-    const scriptIds = scoped.filter((id) => id !== 'cookies' && id !== 'indexedDB');
+    const scriptIds = scoped.filter((id) => id === 'cacheStorage' || id === 'sessionStorage');
     let scriptError: unknown;
     if (scriptIds.length > 0) {
       try {
@@ -307,8 +342,8 @@ export async function clearLinkedOrigin(
     if (scoped.includes('cookies')) {
       tasks.push(withTimeout(clearCookiesForOrigin(origin, cookieStoreId), 15000));
     }
-    if (scoped.includes('indexedDB')) {
-      tasks.push(withTimeout(clearIndexedDBForHostname(new URL(origin).hostname), 15000));
+    if (scoped.some((id) => id in NATIVE_HOSTNAME_KEYS)) {
+      tasks.push(withTimeout(clearHostnameScopedNative(new URL(origin).hostname, scoped), 15000));
     }
     await Promise.all(tasks);
 
@@ -352,6 +387,11 @@ export function dedupeSitesByHostname(urls: Array<string | undefined>): VisitedS
     if (!url) continue;
     try {
       const parsed = new URL(url);
+      // Only http(s) sites are real per-site clear targets. chrome://, about:, and
+      // file:// all parse without throwing, but either have no hostname at all (blank
+      // row) or a bogus one (e.g. "chrome://extensions/" parses to hostname
+      // "extensions", which isn't a site anyone meant to clear).
+      if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') continue;
       if (!seen.has(parsed.hostname)) seen.set(parsed.hostname, parsed.origin);
     } catch {
       // not a parsable URL — skip
diff --git a/utils/i18n.ts b/utils/i18n.ts
index 9148cbc..340d60f 100644
--- a/utils/i18n.ts
+++ b/utils/i18n.ts
@@ -36,6 +36,8 @@ const en = {
   clearActiveTabOnly: 'Clear active tab only',
   failedOrDenied: 'Failed / denied',
   activeTabHint: 'Only the site open in this tab is affected.',
+  protectedSiteLabel: 'Protected site',
+  protectedSiteHint: 'This site is on your protected list (Settings → Per Site) and can\'t be cleared from here.',
   clearAllSites: 'Clear all sites',
   yesClearEverything: 'Yes, clear everything',
   yesClearAllVisited: 'Yes, clear these',
@@ -83,12 +85,33 @@ const en = {
   noMatchingHistory: 'No history yet.',
   visitedSites: 'Visited sites',
   visitedSitesDescription:
-    "Any site from your history, not just open tabs — cleared the same way as the checklist above. On Firefox, this only clears the default container; a site open in a named container (e.g. Multi-Account Containers) needs clearing from its own open tab instead.",
+    'Any site from your history, not just open tabs — cleared the same way as the checklist above.',
+  visitedSitesContainerCaveat:
+    'On {browser}, this only clears the default container; a site open in a named container (e.g. Multi-Account Containers) needs clearing from its own open tab instead.',
   filterVisitedSitesPlaceholder: 'Filter visited sites by domain…',
   noMatchingSites: 'No matching sites.',
   recentHistory: 'Recent history',
   remove: 'Remove',
 
+  protectedSites: 'Protected sites',
+  protectedSitesPlaceholder: 'One hostname per line, e.g. app.your-company.com',
+  protectedSitesHint:
+    "Never cleared by any per-site action (tabs, visited sites, or as a mapped origin target) — a source also protects its subdomains. Doesn't apply to Global's \"Clear all sites\", which has no way to exclude specific sites.",
+  protectedSitesGlobalNote: "Protected sites list doesn't apply here — Global clear always clears everything.",
+
+  backupTitle: 'Backup',
+  backupHint: 'Export your settings (including origin mappings) to a file, or import one on another machine.',
+  exportSettings: 'Export settings',
+  importSettings: 'Import settings',
+  importInvalidFile: "That file couldn't be read as Bleep settings.",
+
+  clearLogTitle: 'Recently cleared',
+  clearLogEmpty: 'Nothing cleared yet.',
+  clearLogClear: 'Clear log',
+  clearLogLinkedCount: '{count} linked',
+  clearLogBulkTabs: '{count} tabs (bulk)',
+  clearLogBulkVisited: '{count} visited sites (bulk)',
+
   helpTitle: 'How Bleep works',
   helpPopupTitle: 'Popup',
   helpPopupText:
@@ -134,6 +157,8 @@ const ru: typeof en = {
   failedOrDenied: 'Ошибка / отказано',
   activeTabHint:
     'Затрагивает только сайт, открытый в этой вкладке. При первом использовании запросит разрешение.',
+  protectedSiteLabel: 'Защищённый сайт',
+  protectedSiteHint: 'Этот сайт в списке защищённых (Настройки → Для сайта) и не может быть очищен отсюда.',
   clearAllSites: 'Очистить все сайты',
   yesClearEverything: 'Да, очистить всё',
   yesClearAllVisited: 'Да, очистить эти',
@@ -181,12 +206,34 @@ const ru: typeof en = {
   noMatchingHistory: 'История пуста.',
   visitedSites: 'Посещённые сайты',
   visitedSitesDescription:
-    'Любой сайт из истории, а не только открытые вкладки — очищается так же, как и по чек-листу выше. В Firefox это очищает только контейнер по умолчанию; сайт, открытый в именованном контейнере (например, Multi-Account Containers), нужно очищать из его собственной открытой вкладки.',
+    'Любой сайт из истории, а не только открытые вкладки — очищается так же, как и по чек-листу выше.',
+  visitedSitesContainerCaveat:
+    'В {browser} это очищает только контейнер по умолчанию; сайт, открытый в именованном контейнере (например, Multi-Account Containers), нужно очищать из его собственной открытой вкладки.',
   filterVisitedSitesPlaceholder: 'Фильтр посещённых сайтов по домену…',
   noMatchingSites: 'Нет подходящих сайтов.',
   recentHistory: 'Недавняя история',
   remove: 'Удалить',
 
+  protectedSites: 'Защищённые сайты',
+  protectedSitesPlaceholder: 'По одному домену на строку, напр. app.your-company.com',
+  protectedSitesHint:
+    'Никогда не очищаются никакими действиями для сайта (вкладки, посещённые сайты или как связанный целевой домен) — источник также защищает свои поддомены. Не действует для «Очистить все сайты» в разделе «Глобально» — там нет способа исключить отдельные сайты.',
+  protectedSitesGlobalNote:
+    'Список защищённых сайтов здесь не действует — глобальная очистка всегда очищает всё.',
+
+  backupTitle: 'Резервная копия',
+  backupHint: 'Экспортируйте настройки (включая сопоставления источников) в файл или импортируйте их на другом устройстве.',
+  exportSettings: 'Экспортировать настройки',
+  importSettings: 'Импортировать настройки',
+  importInvalidFile: 'Не удалось прочитать этот файл как настройки Bleep.',
+
+  clearLogTitle: 'Недавно очищено',
+  clearLogEmpty: 'Пока ничего не очищено.',
+  clearLogClear: 'Очистить журнал',
+  clearLogLinkedCount: 'связанных: {count}',
+  clearLogBulkTabs: '{count} вкладок (массово)',
+  clearLogBulkVisited: '{count} посещённых сайтов (массово)',
+
   helpTitle: 'Как работает Bleep',
   helpPopupTitle: 'Всплывающее окно',
   helpPopupText:
@@ -232,6 +279,8 @@ const ro: typeof en = {
   failedOrDenied: 'Eroare / refuzat',
   activeTabHint:
     'Afectează doar site-ul deschis în această filă. Va cere permisiune o singură dată la prima utilizare.',
+  protectedSiteLabel: 'Site protejat',
+  protectedSiteHint: 'Acest site e în lista de site-uri protejate (Setări → Per site) și nu poate fi șters de aici.',
   clearAllSites: 'Șterge toate site-urile',
   yesClearEverything: 'Da, șterge totul',
   yesClearAllVisited: 'Da, șterge acestea',
@@ -279,12 +328,34 @@ const ro: typeof en = {
   noMatchingHistory: 'Niciun istoric încă.',
   visitedSites: 'Site-uri vizitate',
   visitedSitesDescription:
-    'Orice site din istoric, nu doar filele deschise — șters la fel ca lista de mai sus. Pe Firefox, se șterge doar containerul implicit; un site deschis într-un container numit (ex. Multi-Account Containers) trebuie șters din propria filă deschisă.',
+    'Orice site din istoric, nu doar filele deschise — șters la fel ca lista de mai sus.',
+  visitedSitesContainerCaveat:
+    'Pe {browser}, se șterge doar containerul implicit; un site deschis într-un container numit (ex. Multi-Account Containers) trebuie șters din propria filă deschisă.',
   filterVisitedSitesPlaceholder: 'Filtrează site-urile vizitate după domeniu…',
   noMatchingSites: 'Niciun site corespunzător.',
   recentHistory: 'Istoric recent',
   remove: 'Elimină',
 
+  protectedSites: 'Site-uri protejate',
+  protectedSitesPlaceholder: 'Câte un domeniu pe linie, ex. app.compania-ta.com',
+  protectedSitesHint:
+    'Nu sunt șterse niciodată de nicio acțiune per site (file, site-uri vizitate sau ca țintă de corespondență) — o sursă protejează și subdomeniile ei. Nu se aplică la „Șterge toate site-urile” din Global, care nu poate exclude anumite site-uri.',
+  protectedSitesGlobalNote:
+    'Lista de site-uri protejate nu se aplică aici — ștergerea globală șterge întotdeauna totul.',
+
+  backupTitle: 'Backup',
+  backupHint: 'Exportă setările (inclusiv corespondențele de origini) într-un fișier sau importă-le pe alt dispozitiv.',
+  exportSettings: 'Exportă setările',
+  importSettings: 'Importă setările',
+  importInvalidFile: 'Acest fișier nu a putut fi citit ca setări Bleep.',
+
+  clearLogTitle: 'Șters recent',
+  clearLogEmpty: 'Nimic șters încă.',
+  clearLogClear: 'Șterge jurnalul',
+  clearLogLinkedCount: '{count} corespondențe',
+  clearLogBulkTabs: '{count} file (în masă)',
+  clearLogBulkVisited: '{count} site-uri vizitate (în masă)',
+
   helpTitle: 'Cum funcționează Bleep',
   helpPopupTitle: 'Fereastra popup',
   helpPopupText:
@@ -330,6 +401,8 @@ const uk: typeof en = {
   failedOrDenied: 'Помилка / відмовлено',
   activeTabHint:
     'Стосується лише сайту, відкритого в цій вкладці. При першому використанні запитає дозвіл.',
+  protectedSiteLabel: 'Захищений сайт',
+  protectedSiteHint: 'Цей сайт у списку захищених (Налаштування → Для сайту) і не може бути очищений звідси.',
   clearAllSites: 'Очистити всі сайти',
   yesClearEverything: 'Так, очистити все',
   yesClearAllVisited: 'Так, очистити ці',
@@ -377,12 +450,34 @@ const uk: typeof en = {
   noMatchingHistory: 'Історія порожня.',
   visitedSites: 'Відвідані сайти',
   visitedSitesDescription:
-    'Будь-який сайт з історії, а не лише відкриті вкладки — очищається так само, як за чек-листом вище. У Firefox це очищає лише контейнер за замовчуванням; сайт, відкритий у іменованому контейнері (напр. Multi-Account Containers), потрібно очищати з його власної відкритої вкладки.',
+    'Будь-який сайт з історії, а не лише відкриті вкладки — очищається так само, як за чек-листом вище.',
+  visitedSitesContainerCaveat:
+    'У {browser} це очищає лише контейнер за замовчуванням; сайт, відкритий у іменованому контейнері (напр. Multi-Account Containers), потрібно очищати з його власної відкритої вкладки.',
   filterVisitedSitesPlaceholder: 'Фільтр відвіданих сайтів за доменом…',
   noMatchingSites: 'Немає відповідних сайтів.',
   recentHistory: 'Недавня історія',
   remove: 'Видалити',
 
+  protectedSites: 'Захищені сайти',
+  protectedSitesPlaceholder: 'По одному домену на рядок, напр. app.your-company.com',
+  protectedSitesHint:
+    'Ніколи не очищаються жодною дією для сайту (вкладки, відвідані сайти або як зіставлена ціль) — джерело також захищає свої піддомени. Не діє для «Очистити всі сайти» у Глобальному розділі — там немає способу виключити окремі сайти.',
+  protectedSitesGlobalNote:
+    'Список захищених сайтів тут не діє — глобальне очищення завжди очищає все.',
+
+  backupTitle: 'Резервна копія',
+  backupHint: 'Експортуйте налаштування (включно зі зіставленнями джерел) у файл або імпортуйте їх на іншому пристрої.',
+  exportSettings: 'Експортувати налаштування',
+  importSettings: 'Імпортувати налаштування',
+  importInvalidFile: 'Не вдалося прочитати цей файл як налаштування Bleep.',
+
+  clearLogTitle: 'Нещодавно очищено',
+  clearLogEmpty: 'Поки нічого не очищено.',
+  clearLogClear: 'Очистити журнал',
+  clearLogLinkedCount: 'пов’язаних: {count}',
+  clearLogBulkTabs: '{count} вкладок (масово)',
+  clearLogBulkVisited: '{count} відвіданих сайтів (масово)',
+
   helpTitle: 'Як працює Bleep',
   helpPopupTitle: 'Спливаюче вікно',
   helpPopupText:
diff --git a/utils/settings-transfer.test.ts b/utils/settings-transfer.test.ts
new file mode 100644
index 0000000..c5259ca
--- /dev/null
+++ b/utils/settings-transfer.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest';
+import { DEFAULTS } from '../store/settings';
+import { exportSettingsJson, parseImportedSettings } from './settings-transfer';
+
+describe('exportSettingsJson', () => {
+  it('serializes only the known settings fields', () => {
+    const state = { ...DEFAULTS, linkedOrigins: 'a.com => b.com', someExtraField: 'ignored' };
+    const json = JSON.parse(exportSettingsJson(state));
+    expect(json).toEqual({ ...DEFAULTS, linkedOrigins: 'a.com => b.com' });
+    expect(json.someExtraField).toBeUndefined();
+  });
+});
+
+describe('parseImportedSettings', () => {
+  it('round-trips a full valid export', () => {
+    const json = exportSettingsJson({ ...DEFAULTS, linkedOrigins: 'a.com => b.com', theme: 'dark' });
+    expect(parseImportedSettings(json)).toEqual({ ...DEFAULTS, linkedOrigins: 'a.com => b.com', theme: 'dark' });
+  });
+
+  it('drops unknown fields', () => {
+    const result = parseImportedSettings(JSON.stringify({ ...DEFAULTS, notARealField: 'x' }));
+    expect(result).not.toHaveProperty('notARealField');
+  });
+
+  it('drops a field with the wrong type instead of importing garbage', () => {
+    const result = parseImportedSettings(JSON.stringify({ ...DEFAULTS, autoReloadAfterClear: 'yes' }));
+    expect(result).not.toHaveProperty('autoReloadAfterClear');
+  });
+
+  it('rejects a theme value outside the known enum', () => {
+    const result = parseImportedSettings(JSON.stringify({ ...DEFAULTS, theme: 'banana' }));
+    expect(result).not.toHaveProperty('theme');
+  });
+
+  it('rejects a language value outside the known enum (would otherwise crash translate())', () => {
+    const result = parseImportedSettings(JSON.stringify({ ...DEFAULTS, language: 'fr' }));
+    expect(result).not.toHaveProperty('language');
+  });
+
+  it('rejects a non-array value for an array field', () => {
+    const result = parseImportedSettings(JSON.stringify({ ...DEFAULTS, selectedTypesGlobal: 'cache' }));
+    expect(result).not.toHaveProperty('selectedTypesGlobal');
+  });
+
+  it('rejects an array with non-string elements', () => {
+    const result = parseImportedSettings(JSON.stringify({ ...DEFAULTS, selectedTypesGlobal: [1, 2] }));
+    expect(result).not.toHaveProperty('selectedTypesGlobal');
+  });
+
+  it('throws on invalid JSON, same as JSON.parse', () => {
+    expect(() => parseImportedSettings('not json')).toThrow();
+  });
+});
diff --git a/utils/settings-transfer.ts b/utils/settings-transfer.ts
new file mode 100644
index 0000000..f294321
--- /dev/null
+++ b/utils/settings-transfer.ts
@@ -0,0 +1,40 @@
+import { DEFAULTS, type Theme } from '../store/settings';
+import type { Language } from './i18n';
+
+export type ExportableSettings = typeof DEFAULTS;
+
+const THEMES: Theme[] = ['system', 'light', 'dark'];
+const LANGUAGES: Language[] = ['auto', 'en', 'ru', 'ro', 'uk'];
+
+export function exportSettingsJson(state: ExportableSettings): string {
+  const data: Partial<ExportableSettings> = {};
+  for (const key of Object.keys(DEFAULTS) as (keyof ExportableSettings)[]) {
+    (data as Record<string, unknown>)[key] = state[key];
+  }
+  return JSON.stringify(data, null, 2);
+}
+
+function isValidField(key: keyof ExportableSettings, value: unknown): boolean {
+  if (key === 'theme') return typeof value === 'string' && THEMES.includes(value as Theme);
+  if (key === 'language') return typeof value === 'string' && LANGUAGES.includes(value as Language);
+  const defaultValue = DEFAULTS[key];
+  if (Array.isArray(defaultValue)) {
+    return Array.isArray(value) && value.every((v) => typeof v === 'string');
+  }
+  return typeof value === typeof defaultValue;
+}
+
+/** Only known keys with the right shape survive — an untrusted/edited-by-hand file
+ * can't inject unexpected fields or crash the UI with e.g. an unrecognized theme or
+ * language string (translate() would throw on a language not in its dictionary). */
+export function parseImportedSettings(json: string): Partial<ExportableSettings> {
+  const parsed = JSON.parse(json) as Record<string, unknown>;
+  const result: Partial<ExportableSettings> = {};
+  for (const key of Object.keys(DEFAULTS) as (keyof ExportableSettings)[]) {
+    const value = parsed[key];
+    if (value !== undefined && isValidField(key, value)) {
+      (result as Record<string, unknown>)[key] = value;
+    }
+  }
+  return result;
+}
diff --git a/utils/storage-adapter.test.ts b/utils/storage-adapter.test.ts
new file mode 100644
index 0000000..b4b900d
--- /dev/null
+++ b/utils/storage-adapter.test.ts
@@ -0,0 +1,82 @@
+import { browser } from 'wxt/browser';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { browserSyncStorage } from './storage-adapter';
+
+// fake-browser doesn't implement storage.sync at all — back it with a plain in-memory
+// object so get/set/remove behave like the real StorageArea API.
+function stubSyncStorage() {
+  const data: Record<string, unknown> = {};
+  Object.assign(browser, {
+    storage: {
+      ...browser.storage,
+      sync: {
+        get: vi.fn(async (keys: string | string[]) => {
+          const list = Array.isArray(keys) ? keys : [keys];
+          const result: Record<string, unknown> = {};
+          for (const key of list) if (key in data) result[key] = data[key];
+          return result;
+        }),
+        set: vi.fn(async (items: Record<string, unknown>) => {
+          Object.assign(data, items);
+        }),
+        remove: vi.fn(async (keys: string | string[]) => {
+          for (const key of Array.isArray(keys) ? keys : [keys]) delete data[key];
+        }),
+      },
+    },
+  });
+  return data;
+}
+
+beforeEach(() => {
+  stubSyncStorage();
+});
+
+describe('browserSyncStorage', () => {
+  it('round-trips a short value', async () => {
+    await browserSyncStorage.setItem('settings', '{"a":1}');
+    expect(await browserSyncStorage.getItem('settings')).toBe('{"a":1}');
+  });
+
+  it('chunks a value larger than the per-item quota across multiple keys', async () => {
+    const big = 'x'.repeat(20000);
+    await browserSyncStorage.setItem('settings', big);
+    expect(await browserSyncStorage.getItem('settings')).toBe(big);
+    // sanity: confirm it's actually split, not stored as one oversized item
+    expect(browser.storage.sync.set).toHaveBeenCalled();
+    const lastCallArgs = (browser.storage.sync.set as ReturnType<typeof vi.fn>).mock.calls.at(-1)![0];
+    expect(Object.keys(lastCallArgs).length).toBeGreaterThan(1);
+  });
+
+  it('returns null for a key that was never set', async () => {
+    expect(await browserSyncStorage.getItem('missing')).toBeNull();
+  });
+
+  it('removeItem clears every chunk, not just the first', async () => {
+    await browserSyncStorage.setItem('settings', 'x'.repeat(20000));
+    await browserSyncStorage.removeItem('settings');
+    expect(await browserSyncStorage.getItem('settings')).toBeNull();
+  });
+
+  it('overwriting with a shorter value does not leave stale trailing chunks', async () => {
+    const data = stubSyncStorage();
+    await browserSyncStorage.setItem('settings', 'x'.repeat(20000));
+    const chunkCountBefore = Object.keys(data).filter((k) => k.startsWith('settings__') && k !== 'settings__len').length;
+    expect(chunkCountBefore).toBeGreaterThan(1);
+
+    await browserSyncStorage.setItem('settings', 'short');
+    expect(await browserSyncStorage.getItem('settings')).toBe('short');
+    const chunkCountAfter = Object.keys(data).filter((k) => k.startsWith('settings__') && k !== 'settings__len').length;
+    expect(chunkCountAfter).toBe(1);
+  });
+
+  it('migrates a pre-sync plain value from storage.local on first read', async () => {
+    (browser.storage.local.get as unknown as ReturnType<typeof vi.fn>) = vi
+      .fn()
+      .mockResolvedValue({ settings: '{"legacy":true}' });
+
+    expect(await browserSyncStorage.getItem('settings')).toBe('{"legacy":true}');
+    // migrated forward — a second read shouldn't need storage.local anymore
+    expect(await browserSyncStorage.getItem('settings')).toBe('{"legacy":true}');
+  });
+});
diff --git a/utils/storage-adapter.ts b/utils/storage-adapter.ts
index 4eb8ed5..52080fa 100644
--- a/utils/storage-adapter.ts
+++ b/utils/storage-adapter.ts
@@ -1,6 +1,54 @@
 import { browser } from 'wxt/browser';
+import type { Browser } from 'wxt/browser';
 import type { StateStorage } from 'zustand/middleware';
 
+// storage.sync caps each item at ~8KB (Chrome: 8192 bytes/item, 100KB total) — a
+// mapping-heavy settings blob stored under one key can exceed that. Split into
+// fixed-size string chunks under a `${name}__N` key each, with `${name}__len`
+// tracking how many chunks exist, so the actual quota that matters is the ~100KB
+// total, not the ~8KB per-item cap.
+const CHUNK_SIZE = 6000;
+
+async function readChunked(area: Browser.storage.StorageArea, name: string): Promise<string | null> {
+  const lenKey = `${name}__len`;
+  const meta = await area.get(lenKey);
+  const len = meta[lenKey] as number | undefined;
+  if (len == null) return null;
+  const keys = Array.from({ length: len }, (_, i) => `${name}__${i}`);
+  const result = await area.get(keys);
+  return keys.map((k) => (result[k] as string | undefined) ?? '').join('');
+}
+
+async function writeChunked(area: Browser.storage.StorageArea, name: string, value: string): Promise<void> {
+  const lenKey = `${name}__len`;
+  const meta = await area.get(lenKey);
+  const oldLen = (meta[lenKey] as number | undefined) ?? 0;
+
+  const chunks: string[] = [];
+  for (let i = 0; i < value.length; i += CHUNK_SIZE) chunks.push(value.slice(i, i + CHUNK_SIZE));
+  const payload: Record<string, string | number> = { [lenKey]: chunks.length };
+  chunks.forEach((chunk, i) => {
+    payload[`${name}__${i}`] = chunk;
+  });
+  await area.set(payload);
+
+  // A shrinking value (fewer chunks than before) must drop the now-unused trailing
+  // keys, or they sit there forever silently eating into the ~100KB total quota.
+  if (oldLen > chunks.length) {
+    const staleKeys = Array.from({ length: oldLen - chunks.length }, (_, i) => `${name}__${chunks.length + i}`);
+    await area.remove(staleKeys);
+  }
+}
+
+async function removeChunked(area: Browser.storage.StorageArea, name: string): Promise<void> {
+  const lenKey = `${name}__len`;
+  const meta = await area.get(lenKey);
+  const len = (meta[lenKey] as number | undefined) ?? 0;
+  await area.remove([lenKey, ...Array.from({ length: len }, (_, i) => `${name}__${i}`)]);
+}
+
+/** Plain, unchunked local storage — used for state that's device-specific by nature
+ * (e.g. the clear-activity log) and shouldn't consume the sync quota. */
 export const browserLocalStorage: StateStorage = {
   getItem: async (name) => {
     const result = await browser.storage.local.get(name);
@@ -13,3 +61,40 @@ export const browserLocalStorage: StateStorage = {
     await browser.storage.local.remove(name);
   },
 };
+
+/** Settings synced across the user's browsers via storage.sync. Falls back to
+ * reading (and migrating forward) a pre-sync plain-JSON value that older versions
+ * of Bleep stored directly under `name` in storage.local — a one-time, read-triggered
+ * migration with no separate "have I migrated" flag needed. */
+export const browserSyncStorage: StateStorage = {
+  getItem: async (name) => {
+    const fromSync = await readChunked(browser.storage.sync, name);
+    if (fromSync != null) return fromSync;
+
+    const legacyLocal = await browser.storage.local.get(name);
+    const legacyValue = legacyLocal[name] as string | undefined;
+    if (legacyValue != null) {
+      await writeChunked(browser.storage.sync, name, legacyValue);
+    }
+    return legacyValue ?? null;
+  },
+  setItem: async (name, value) => {
+    await writeChunked(browser.storage.sync, name, value);
+  },
+  removeItem: async (name) => {
+    await removeChunked(browser.storage.sync, name);
+  },
+};
+
+/** Reads the persisted settings JSON directly, bypassing zustand — used by the
+ * background script, which can't rely on the store's React-oriented hydration
+ * lifecycle inside a short-lived MV3 service worker. */
+export async function readPersistedSettingsRaw(name: string): Promise<unknown> {
+  const raw = await browserSyncStorage.getItem(name);
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}