From aaaf72eceb778f23a9cb7b980e4a4f5e2f26210b Mon Sep 17 00:00:00 2001
From: diegomarzaa <al426641@uji.es>
Date: Sat, 9 May 2026 13:52:10 +0200
Subject: [PATCH] v3, multiple improvements, bug fixes, profiles feature,
 custom webpage and youtube support, improved design

---
 CHANGES.md               | 237 ++++++++++
 README.md                |  93 +++-
 accounts.js              | 136 ------
 app.js                   | 565 ++++++++++++++++++++++
 background.js            | 180 -------
 images/128.png           | Bin 2939 -> 2955 bytes
 images/16.png            | Bin 513 -> 504 bytes
 images/32.png            | Bin 893 -> 945 bytes
 images/48.png            | Bin 1278 -> 1327 bytes
 images/logos/youtube.png | Bin 0 -> 331 bytes
 manifest.json            | 143 ++++--
 manifest_firefox.json    |  89 ++--
 popup.html               | 265 ++++++++---
 profiles.js              | 310 ++++++++++++
 rules.js                 | 455 ++++++++++++------
 service-worker.js        | 289 ++++++++++++
 styles.css               | 989 ++++++++++++++++++++++++++++++---------
 utils.js                 | 492 ++++++++-----------
 18 files changed, 3082 insertions(+), 1161 deletions(-)
 create mode 100644 CHANGES.md
 delete mode 100644 accounts.js
 create mode 100644 app.js
 delete mode 100644 background.js
 create mode 100644 images/logos/youtube.png
 create mode 100644 profiles.js
 create mode 100644 service-worker.js

diff --git a/CHANGES.md b/CHANGES.md
new file mode 100644
index 0000000..3555d20
--- /dev/null
+++ b/CHANGES.md
@@ -0,0 +1,237 @@
+# Changes from the original DefaultWTF extension
+
+This documents every change made relative to the original v1.14 extension from [Uptech](https://www.default.wtf/).
+
+---
+
+## Manifest V3 migration
+
+**File:** `manifest.json`
+
+The original used Manifest V2, which is deprecated and being phased out by Chrome and Brave.
+
+- `manifest_version`: `2` → `3`
+- `browser_action` → `action`
+- `background.scripts` + `persistent: true` → `background.service_worker`
+- `webRequest` + `webRequestBlocking` permissions removed — these are not available in MV3
+- `<all_urls>` permission removed — replaced with explicit `host_permissions` for Google, YouTube, and Blogger domains
+- Navigation interception now uses `chrome.webNavigation.onBeforeNavigate` instead of `chrome.webRequest.onBeforeRequest`
+- `update_url` removed (not needed for unpacked/sideloaded extensions)
+- `minimum_chrome_version` raised from `40` to `88`
+
+**Why host_permissions are explicit:** MV3 disallows the `*.google.co.*` wildcard pattern (dots in the middle of hostnames are not allowed in match patterns). The manifest now enumerates all major Google country TLDs explicitly.
+
+---
+
+## Bug fixes
+
+### `signIn()` referenced undefined variable
+**File:** `accounts.js` (original)
+
+The `signIn()` function's callback referenced `info[3]` (the raw array element) instead of `user.email`. This caused a `ReferenceError` when clicking a signed-out account.
+
+**Fix:** Replaced with `user.email` using the correctly scoped `user` variable.
+
+### Account #0 never redirected
+**File:** `background.js` (original)
+
+The redirect condition included `accountId !== 0`, meaning the first Google account was never enforced. If your default was account #0, the extension silently did nothing.
+
+**Fix:** Removed the `accountId !== 0` guard. Account #0 is now handled by making `isAccountLoggedIn(0)` always return `true` (since index 0 is the primary account and always logged in by definition).
+
+### `DOMParser` unavailable in service workers
+**File:** `background.js` (original)
+
+The account-fetching code used `new DOMParser()` to parse Google's response, but `DOMParser` is not available in MV3 service worker contexts.
+
+**Fix:** Replaced with a regex-based script tag extraction: `rawText.match(/<script[^>]*>([\s\S]*?)<\/script>/i)`.
+
+### Typo: `redirectCurrectTab`
+**File:** `utils.js` (original)
+
+Renamed to `redirectCurrentTab` throughout.
+
+### Script load-order bug (introduced during rewrite, fixed here)
+**File:** `popup.html`
+
+The earlier rewrite placed `<script src="accounts.js">`, `<script src="rules.js">`, and `<script src="profiles.js">` inline inside their respective tab `<div>` elements, before `app.js` was loaded. Since all three reference `window.App` (defined in `app.js`), they would throw `ReferenceError: App is not defined` at parse time.
+
+**Fix:** All scripts are now loaded in a single block at the end of `<body>`, in dependency order: `utils.js` → `app.js` → `accounts.js` → `rules.js` → `profiles.js`. The `app:ready` event is dispatched asynchronously after `loadProfiles()` resolves, so all listeners are guaranteed to be registered before it fires.
+
+---
+
+## New features
+
+### Profiles
+**Files:** `utils.js`, `service-worker.js`, `app.js`, `profiles.js`, `accounts.js`, `rules.js`, `styles.css`
+
+The biggest new feature. Instead of a single global set of rules and a default account, the extension now supports multiple named profiles.
+
+**Storage schema (new):**
+```json
+{
+  "profiles": [
+    {
+      "id": "default",
+      "name": "Default",
+      "color": "#8b8792",
+      "defaultAccount": 0,
+      "rules": [...],
+      "customServices": [...]
+    },
+    {
+      "id": "uuid-...",
+      "name": "University",
+      "color": "#4a90d9",
+      "defaultAccount": 1,
+      "rules": [...],
+      "customServices": []
+    }
+  ],
+  "activeProfileId": "uuid-..."
+}
+```
+
+**Profile features:**
+- **Default profile** — always exists, cannot be deleted. Acts as the base that other profiles inherit from.
+- **Inheritance** — non-Default profiles automatically inherit all rules from Default for services they haven't explicitly configured. The resolved rule list (own rules + inherited) is shown in the Rules tab with inherited rules visually distinguished.
+- **Override** — clicking "Override" on an inherited rule opens an inline picker to set a different account for that service in the current profile only.
+- **Create** — new profiles are created with a name and color via a form in the Settings tab or the profile modal.
+- **Edit** — rename and recolor any profile (Default can be recolored but not renamed).
+- **Duplicate** — clones a profile including all its rules, as a starting point.
+- **Delete** — removes a profile and its rules. If the active profile is deleted, falls back to Default.
+- **Activate** — sets the active profile. The service worker switches its interception logic immediately.
+- **Profile bar** — a persistent strip below the header shows all profiles as colored chips. The active one is highlighted. Click any chip to switch.
+- **"Redirect open tabs?" prompt** — when switching profiles, if any Google/YouTube tabs are open, a banner appears asking whether to redirect them to the new profile's accounts immediately, or switch quietly.
+- **Modal** — the ⚙ gear button opens a full profile management modal with the same create/edit/duplicate/delete/activate actions.
+- **Scope labels** — the Accounts and Rules tabs show which profile is being viewed/edited.
+
+**Legacy migration:** On first update from v1.x, any existing `rules`, `defaultAccount`, and `customServices` stored at the root of `chrome.storage.sync` are automatically migrated into the Default profile.
+
+### YouTube support
+**Files:** `utils.js`, `service-worker.js`, `manifest.json`
+
+YouTube is now a first-class supported service. It supports the `?authuser=N` parameter just like Google services.
+
+- Added to `isGoogleServiceUrl()` and `getAccountForUrl()`
+- Added to `allSupportedGoogleServices()` with its own logo
+- Added `*://*.youtube.com/*` and `*://*.youtu.be/*` to `host_permissions`
+- A simple YouTube logo icon was generated and added to `images/logos/youtube.png`
+
+### Additional Google services
+**File:** `utils.js`
+
+Added to the service catalogue:
+- Gemini (AI) — `gemini.google.com`
+- NotebookLM — `notebooklm.google.com`
+- Google Search — `google.com` (the search homepage)
+- Scholar — `scholar.google.com`
+- Shopping — `shopping.google.com`
+- Blogger / Blogspot — `blogger.com`, `*.blogspot.com`
+- Books — `books.google.com`
+- Flights — `google.com/travel/flights`
+- Travel — `google.com/travel`
+- Looker — `looker.google.com`
+
+### Custom URL rules
+**Files:** `rules.js`, `service-worker.js`
+
+Users can add rules for arbitrary URLs (not just hardcoded Google services). Enter any hostname or pattern (e.g. `myapp.example.com`) and assign a Google account to it. The pattern is matched case-insensitively as a substring of the visited URL.
+
+### Service search/filter
+**File:** `rules.js`
+
+A text input above the service dropdown filters the list in real time, making it easier to find a specific service among the 55+ options.
+
+### Import / Export
+**Files:** `service-worker.js`, `app.js`
+
+All profiles and their rules can be exported to a JSON file and imported back. Useful for backing up settings or migrating to another browser.
+
+### Enforce account on pre-cached URLs (Behaviour toggle)
+**Files:** `utils.js`, `service-worker.js`, `app.js`, `popup.html`, `styles.css`
+
+**Problem:** When a browser autocompletes a URL that already includes `/u/2` or `?authuser=2` (from a previous visit), the extension's early-exit guards skip redirect logic entirely, leaving the user on the wrong account.
+
+**Solution:** Added an opt-in toggle in Settings → Behaviour: "Enforce account on pre-cached URLs". When enabled, any incoming URL that contains `/u/N` or `authuser=N` has those segments stripped before being evaluated against the active profile's rules. The result is then redirected as usual.
+
+When disabled (default), the original behaviour is preserved: URLs that already have `/u/N` or `authuser` are passed through unchanged (fast path, avoids unnecessary redirects).
+
+**Implementation:**
+- `DEFAULT_SETTINGS` in `utils.js` defines `enforceOnPrecachedUrls: false`
+- `loadSettings()` / `saveSettings()` persist settings under `chrome.storage.sync` key `"settings"` (separate from profiles)
+- Service worker holds `_settings` in memory, loaded at startup and on `chrome.storage.onChanged`
+- `handleNavigation()` in `service-worker.js` conditionally strips `/u/N` from `pathname` and `authuser` from search params before evaluating rules
+- `save_settings` message handler in `service-worker.js` updates `_settings` immediately on save
+- Settings tab has a CSS toggle switch wired to `loadSettings()` on open and `save_settings` message on change
+
+### Quick-switch (switch this tab)
+**Files:** `app.js`, `popup.html`, `styles.css`
+
+A new always-visible section between the profile bar and the tabs allows changing the Google account on the current browser tab with one click. It detects the current tab URL, determines which account is active, and shows all logged-in accounts as clickable rows. Clicking one immediately redirects the current tab to that account and closes the popup.
+
+This is intentionally separate from the "default account" concept — it's a one-shot override for the current tab only, without changing any profile settings.
+
+If the current tab is not a Google page, a muted message is shown instead.
+
+### Profile switch redirect preference
+**Files:** `utils.js`, `app.js`, `popup.html`, `styles.css`
+
+A new `profileSwitchRedirect` setting with three values:
+- **Ask** (default): shows the redirect banner with "Redirect tabs" / "Skip" buttons when switching profiles
+- **Always**: immediately redirects all open Google tabs on profile switch, no prompt
+- **Never**: silently switches profile without redirecting any tabs
+
+The setting is exposed as a segmented control in Settings → Behaviour.
+
+Additionally, when the banner is shown (in "Ask" mode), it includes small "Always redirect" and "Never redirect" link-buttons. Clicking one saves the preference and performs the action — a low-friction way to change the setting without navigating to Settings.
+
+### Redirect cycle detection improvement
+**File:** `service-worker.js`
+
+The original implementation tracked the last 4 redirects in a flat array and compared only adjacent entries. The new implementation filters by time window (250 ms) and counts occurrences of the same URL, which is more robust against edge cases.
+
+---
+
+## UI redesign (v3.0)
+
+### Accounts tab removed, merged into profiles
+**Files:** `app.js`, `popup.html`, `profiles.js`, `styles.css`
+
+The separate "Accounts" tab has been eliminated. The default account for each profile is now configured directly in the profile edit form (alongside name and color). Profile cards in the Settings tab show the default account email on a meta line.
+
+The account-fetching logic from `accounts.js` has been absorbed into `app.js` (`fetchAndStoreAccounts()`, `openSignInForAccount()`). The file `accounts.js` has been deleted.
+
+### Two-tab layout
+**File:** `popup.html`
+
+The popup now has two tabs: **Rules** and **Settings** (down from three). This reduces cognitive load — all configuration is either per-service rules (Rules tab) or global settings/profiles (Settings tab).
+
+---
+
+## Architecture changes
+
+### `app.js` — central orchestrator
+Defines `window.App` (global state: profiles, accounts, activeProfileId, viewedProfileId, settings), handles tab navigation, profile bar rendering, quick-switch rendering, profile switching with configurable redirect behaviour, modal open/close, behaviour settings wiring, and import/export. Also contains account-fetching logic (previously in `accounts.js`).
+
+### `profiles.js` — profile CRUD UI
+All profile CRUD UI — create, edit, duplicate, delete, activate — both in the Settings tab card list and the profile modal. Profile edit form now includes a default-account picker.
+
+### `utils.js` additions
+Profile helper functions: `makeProfile()`, `makeDefaultProfile()`, `resolveRules()`, `loadProfiles()`, `saveProfiles()`, `getActiveProfile()`, `getDefaultProfile()`. Settings helpers: `DEFAULT_SETTINGS`, `loadSettings()`, `saveSettings()`. Constants: `PROFILE_COLORS`, `DEFAULT_PROFILE_ID`.
+
+### `background.js` removed
+The original MV2 background script. Fully replaced by `service-worker.js`.
+
+### `accounts.js` removed
+Account-fetching and display logic merged into `app.js`.
+
+### `rules.js` — pure UI renderer
+Reacts to `App` state via custom events (`app:ready`, `app:profile-switched`, `app:updated`). All writes go through `App.saveProfiles()`.
+
+### Popup HTML structure
+- Two tabs (Rules, Settings) instead of three
+- Quick-switch section (always visible, collapsible) between profile bar and tabs
+- Redirect banner includes "Always redirect" / "Never redirect" inline shortcut buttons
+- Settings tab contains: Profiles manager, Behaviour (toggle + segmented control), Import/Export, About
+- All scripts loaded at end of `<body>` in dependency order: `utils.js` → `app.js` → `rules.js` → `profiles.js`
diff --git a/README.md b/README.md
index 53c292b..6ac26bd 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,93 @@
+# Default Account for Google™ products (fork)
 
-# <img src="https://user-images.githubusercontent.com/22365403/129391087-1d800677-59b8-4e42-ba0c-de88d684eedd.png" alt="wtf?" width="25"/> DefaultWTF
+⚠️ **Disclaimer:** This is a **working prototype** — completely vibe-coded with a focus on functionality over production polish. It works well for daily use, but security hardening and code cleanup are always welcome. If you spot any security issues, improvement suggestions, or bugs, please report them!
 
-- [Website](https://www.default.wtf/)
+A browser extension that automatically redirects Google and YouTube pages to your chosen account — no more landing on the wrong one.
 
-- [Chrome store page](https://chrome.google.com/webstore/detail/default-google-account/bnocikekcdchphdpfffcgikiblhnkdad)
+Based on the original [DefaultWTF](https://www.default.wtf/) extension by [Uptech](https://github.com/uptechteam/default-google-account), extended with profiles, YouTube support, custom URL rules, and a full Manifest V3 rewrite.
 
-- [Buy us a coffee](https://www.buymeacoffee.com/default)
+## Features
 
-- [Open source license](https://github.com/uptechteam/default-google-account/blob/dev/LICENSE)
+### Quick-switch
+Open the popup and instantly switch the current tab to any of your Google accounts. One click, no settings changed — just a quick account hop for the tab you're on.
+
+### Profiles
+Create named profiles (e.g. "University", "Personal", "Work") each with their own default account and per-service rules. Switch profiles with one click from the profile bar.
+
+- **Inheritance** — non-Default profiles inherit all rules from the Default profile. Only configure what differs.
+- **Override** — click "Override" on any inherited rule to set a different account just for that profile.
+- **Duplicate** — clone a profile to use as a starting point.
+- **Color labels** — each profile gets a color so you always know which one is active.
+- **Default account per profile** — each profile has its own fallback account, configured in the profile edit form.
+
+### Service rules
+Set a specific account for any Google service. Rules in a profile take precedence over the Default profile's rules.
+
+- 55+ supported services including YouTube, Gmail, Drive, Calendar, Meet, Gemini, Classroom, and more.
+- Search/filter the service list.
+- Custom URL rules — match any URL pattern (e.g. `myapp.example.com`) to a specific account.
+
+### Profile switch redirect
+Choose what happens to open Google tabs when you switch profiles:
+- **Ask** (default) — a banner asks whether to redirect open tabs. Includes "Always" and "Never" shortcuts to save your preference inline.
+- **Always** — silently redirect all open Google tabs.
+- **Never** — switch profile without touching open tabs.
+
+### Import / Export
+Save all profiles and rules to a JSON file. Restore them on another browser or after reinstalling.
+
+### Keyboard shortcuts
+`Alt+1` through `Alt+4` switch your active Google account on the current tab. Configurable at `chrome://extensions/shortcuts`.
+
+## Installation
+
+### Chrome / Brave (unpacked, development mode)
+
+1. **Clone or download** this repository to your computer.
+
+2. **Open the extensions page** in your browser:
+   - **Chrome**: `chrome://extensions`
+   - **Brave**: `brave://extensions`
+
+3. **Enable Developer mode** — toggle the switch in the top-right corner.
+
+4. **Click "Load unpacked"** and select the folder you cloned/downloaded.
+
+5. The extension will appear in your extensions list. You may pin it to the toolbar for easy access (click the pin icon next to the extension name).
+
+### Firefox (unpacked, temporary)
+
+Firefox doesn't support permanent unpacked extensions, but you can load them temporarily for development:
+
+1. Open `about:debugging#/runtime/this-firefox` in the address bar.
+
+2. Click **"Load Temporary Add-on..."** and select the `manifest.json` file from this folder.
+
+3. The extension will be active while your browser is open. It will be unloaded when you close the browser.
+
+**Note:** For permanent Firefox installation, you'd need to package and sign the extension, which is beyond the scope of this guide. Consider using Chrome/Brave for now.
+
+## File overview
+
+| File | Purpose |
+|---|---|
+| `manifest.json` | Extension manifest (Manifest V3) |
+| `service-worker.js` | Background service worker — navigation interception, profile state, messaging |
+| `utils.js` | Shared utilities — URL matching, redirect logic, service catalogue, profile helpers, storage |
+| `app.js` | Popup orchestrator — global state, quick-switch, profile bar, account fetching, settings, import/export |
+| `rules.js` | Rules editor UI |
+| `profiles.js` | Profile management UI |
+| `popup.html` | Extension popup |
+| `styles.css` | All styles, including dark mode |
+
+## Contributing
+
+This is a working prototype, not production-ready code. If you find:
+- **Security issues** — please report them responsibly
+- **Bugs** — feel free to open an issue or submit a fix
+- **Improvements** — suggestions welcome (especially code cleanup, security hardening, or performance optimizations)
+
+## License
+
+BSD 3-Clause — see [LICENSE](LICENSE).
+Original extension © Uptech.
diff --git a/accounts.js b/accounts.js
deleted file mode 100644
index bf0ecd5..0000000
--- a/accounts.js
+++ /dev/null
@@ -1,136 +0,0 @@
-let defAccount = 0;
-
-window.onload = function () {
-  const accounts = document.getElementById("accounts_button");
-  accounts.onclick = function (event) {
-    openPage(event, "Accounts");
-  };
-  document.getElementById("rules_button").onclick = function (event) {
-    openPage(event, "Rules");
-  };
-  accounts.click();
-};
-
-function signIn(email) {
-  // A builder that returns a function to set the url to allow the user to log in to a signed out account
-  return (responses) => {
-    let response = responses[0],
-      url;
-    if (response.url.includes("google")) {
-      // Weak test for if Google will redirect to that url
-      url = new URL(response.url);
-    } else {
-      url = new URL("https://www.google.com/webhp");
-    }
-    let params = new URLSearchParams(url.search);
-
-    // This empties the authuser and moves it to the end to model the format that Google uses for this
-    params.delete("authuser");
-    params.set("authuser", "");
-
-    url.search = params.toString();
-    let newURL =
-      "https://accounts.google.com/AccountChooser?source=ogb&continue=" +
-      encodeURIComponent(url.toString()) +
-      "&Email=" +
-      email;
-
-    window.open(newURL);
-    window.close(); // Just in case
-  };
-}
-
-function populate(response) {
-  // Create the GUI from the strange nested Array structure that Google accounts responds with
-  const accounts = response[1].map((info) => ({
-    index: info[7],
-    name: info[2],
-    email: info[3],
-    profileUrl: info[4],
-    isLoggedIn: info.length >= 16, // If the account is signed in (as far as I know)
-  }));
-  SyncStorage.store({ accounts });
-  renderNumberOfAccounts(accounts);
-  renderAccounts(accounts, defAccount); // re-render accounts that arrived
-}
-
-function renderNumberOfAccounts(accounts) {
-  const accountButton = document.getElementById("accounts_button");
-  const numberOfAccounts = document.createElement("span");
-  numberOfAccounts.innerHTML = ` (${accounts.length})`;
-  accountButton.appendChild(numberOfAccounts);
-}
-
-function renderAccounts(accounts, defaultAccount) {
-  const accountsBody = document.getElementById("accounts_body");
-  accountsBody.innerHTML = ""; // to remove all children, if any
-
-  accounts.forEach((user) => {
-    const t = document.getElementById("cell_template").content;
-    const cellContent = document.importNode(t, true);
-    cellContent.querySelector(".cell-image").src = user.profileUrl;
-    let title;
-    if (user.isLoggedIn) {
-      title = `${user.index + 1}) ${user.name}`;
-    } else {
-      title = user.name;
-    }
-    cellContent.querySelector(".cell-title").textContent = title;
-    cellContent.querySelector(".cell-description").textContent = user.email;
-
-    if (!user.isLoggedIn) {
-      cellContent.querySelector(".cell-corner").textContent = "Signed out";
-      cellContent.querySelector(".cell-body").addEventListener("click", () => {
-        chrome.tabs.query(
-          { active: true, currentWindow: true },
-          signIn(info[3])
-        );
-      });
-    } else {
-      if (user.index === defaultAccount) {
-        const checkedImage = document.createElement("img");
-        checkedImage.src = "images/checked.svg";
-        cellContent.querySelector(".cell-corner").appendChild(checkedImage);
-      }
-      cellContent
-        .querySelector(".cell-body")
-        .addEventListener("click", async () => {
-          SyncStorage.store({ defaultAccount: user.index }, function () {
-            redirectCurrectTab(user.index);
-            window.close();
-          });
-        });
-    }
-    accountsBody.appendChild(cellContent);
-  });
-}
-
-SyncStorage.get(["accounts", "defaultAccount"], (data) => {
-  defAccount = data.defaultAccount ?? 0;
-  if (data.accounts && data.accounts.length) {
-    // render accounts that are in the store, if any
-    renderAccounts(data.accounts, defAccount);
-  }
-  chrome.runtime.sendMessage("fetch_google_accounts", populate);
-});
-
-function openPage(evt, name) {
-  // Declare all variables
-  let i, tabcontent, tablinks;
-
-  // Get all elements with class="tabcontent" and hide them
-  tabcontent = document.getElementsByClassName("tabcontent");
-  for (i = 0; i < tabcontent.length; i++) {
-    tabcontent[i].style.display = "none";
-  }
-
-  // Get all elements with class="tablinks" and remove the class "active"
-  tablinks = document.getElementsByClassName("tablinks");
-  for (i = 0; i < tablinks.length; i++) {
-    tablinks[i].className = tablinks[i].className.replace(" active", "");
-  }
-
-  // Show the current tab, and add an "active" class to the button that opened the tab
-  document.getElementById(name).style.display = "block";
-  evt.currentTarget.className += " active";
-}
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..082e38e
--- /dev/null
+++ b/app.js
@@ -0,0 +1,565 @@
+// ─── Global app state ─────────────────────────────────────────────────────────
+
+window.App = {
+  profiles: [],
+  activeProfileId: DEFAULT_PROFILE_ID,
+  viewedProfileId: DEFAULT_PROFILE_ID,
+  accounts: [],
+  settings: { ...DEFAULT_SETTINGS },
+
+  get activeProfile() {
+    return getActiveProfile(this.profiles, this.activeProfileId);
+  },
+  get viewedProfile() {
+    return getActiveProfile(this.profiles, this.viewedProfileId);
+  },
+  get defaultProfile() {
+    return getDefaultProfile(this.profiles);
+  },
+
+  saveProfiles(callback) {
+    saveProfiles(this.profiles, () => { if (callback) callback(); });
+  },
+};
+
+// ─── Boot ─────────────────────────────────────────────────────────────────────
+
+loadProfiles((data) => {
+  App.profiles = data.profiles;
+  App.activeProfileId = data.activeProfileId;
+  App.viewedProfileId = data.activeProfileId;
+  App.accounts = data.accounts;
+
+  loadSettings((s) => {
+    App.settings = s;
+    renderProfileBar();
+    renderQuickSwitch();
+    renderRulesSummary();
+    window.dispatchEvent(new CustomEvent("app:ready"));
+  });
+
+  fetchAndStoreAccounts();
+});
+
+chrome.storage.onChanged.addListener(() => {
+  loadProfiles((data) => {
+    App.profiles = data.profiles;
+    App.activeProfileId = data.activeProfileId;
+    App.accounts = data.accounts;
+    loadSettings((s) => {
+      App.settings = s;
+      renderProfileBar();
+      renderQuickSwitch();
+      renderRulesSummary();
+      window.dispatchEvent(new CustomEvent("app:updated"));
+    });
+  });
+});
+
+// ─── Account fetching ─────────────────────────────────────────────────────────
+
+function fetchAndStoreAccounts() {
+  chrome.runtime.sendMessage("fetch_google_accounts", (response) => {
+    if (!response || !response[1]) return;
+    const accounts = response[1].map((info) => ({
+      index: info[7],
+      name: info[2],
+      email: info[3],
+      profileUrl: info[4],
+      isLoggedIn: info.length >= 16,
+    }));
+    SyncStorage.store({ accounts }, () => {
+      App.accounts = accounts;
+      renderQuickSwitch();
+      renderRulesSummary();
+      window.dispatchEvent(new CustomEvent("app:updated"));
+    });
+  });
+}
+
+function openSignInForAccount(user) {
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    if (!tabs[0]) return;
+    let url;
+    try { url = new URL(tabs[0].url); } catch { url = new URL("https://www.google.com/webhp"); }
+    const params = new URLSearchParams(url.search);
+    params.delete("authuser");
+    params.set("authuser", "");
+    url.search = params.toString();
+    const signInUrl = "https://accounts.google.com/AccountChooser?source=ogb&continue="
+      + encodeURIComponent(url.toString()) + "&Email=" + encodeURIComponent(user.email);
+    window.open(signInUrl);
+    window.close();
+  });
+}
+
+// ─── Profile bar ──────────────────────────────────────────────────────────────
+
+function renderProfileBar() {
+  const chips = document.getElementById("profile-chips");
+  chips.innerHTML = "";
+  for (const p of App.profiles) {
+    const chip = document.createElement("button");
+    chip.className = "profile-chip" + (p.id === App.activeProfileId ? " active" : "");
+    chip.style.setProperty("--chip-color", p.color);
+    chip.textContent = p.name;
+    chip.title = p.id === App.activeProfileId ? "Active profile" : `Switch to ${p.name}`;
+    chip.onclick = () => switchActiveProfile(p.id);
+    chips.appendChild(chip);
+  }
+}
+
+// ─── Quick-switch ─────────────────────────────────────────────────────────────
+
+function renderQuickSwitch() {
+  const body = document.getElementById("quick-switch-body");
+  body.innerHTML = "";
+
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    const tabUrl = tabs?.[0]?.url ?? "";
+
+    if (!tabUrl || !isGoogleServiceUrl(tabUrl)) {
+      body.innerHTML = '<div class="qs-empty">Current tab is not a Google page.</div>';
+      return;
+    }
+
+    if (!App.accounts.length) {
+      body.innerHTML = '<div class="qs-empty">No accounts detected yet.</div>';
+      return;
+    }
+
+    let currentAccount = 0;
+    try {
+      const u = new URL(tabUrl);
+      const auth = u.searchParams.get("authuser");
+      if (auth !== null) currentAccount = parseInt(auth) || 0;
+      const m = u.pathname.match(/\/u\/(\d+)/);
+      if (m) currentAccount = parseInt(m[1]) || 0;
+    } catch {}
+
+    for (const user of App.accounts) {
+      const row = document.createElement("div");
+      row.className = "qs-row" + (user.index === currentAccount ? " qs-row--current" : "");
+
+      const avatar = document.createElement("div");
+      avatar.className = "qs-avatar";
+      if (user.profileUrl) {
+        const img = document.createElement("img");
+        img.src = user.profileUrl;
+        avatar.appendChild(img);
+      } else {
+        avatar.textContent = (user.name || user.email || "?")[0].toUpperCase();
+      }
+
+      const info = document.createElement("div");
+      info.className = "qs-info";
+      const nameEl = document.createElement("div");
+      nameEl.className = "qs-name";
+      nameEl.textContent = user.name;
+      const emailEl = document.createElement("div");
+      emailEl.className = "qs-email";
+      emailEl.textContent = user.email;
+      info.appendChild(nameEl);
+      info.appendChild(emailEl);
+
+      row.appendChild(avatar);
+      row.appendChild(info);
+
+      if (!user.isLoggedIn) {
+        const badge = document.createElement("span");
+        badge.className = "qs-badge";
+        badge.textContent = "Signed out";
+        row.appendChild(badge);
+        row.onclick = () => openSignInForAccount(user);
+      } else if (user.index === currentAccount) {
+        const check = document.createElement("img");
+        check.src = "images/checked.svg";
+        check.className = "qs-check";
+        row.appendChild(check);
+      } else {
+        row.onclick = () => {
+          redirectCurrentTab(user.index);
+          window.close();
+        };
+      }
+
+      body.appendChild(row);
+    }
+  });
+}
+
+// ─── Rules summary (read-only, main view) ─────────────────────────────────────
+
+function renderRulesSummary() {
+  const container = document.getElementById("rules-summary");
+  container.innerHTML = "";
+
+  const profile = App.activeProfile;
+  if (!profile) return;
+
+  const resolved = resolveRules(profile, App.defaultProfile);
+
+  if (resolved.length === 0) {
+    container.innerHTML = '<div class="qs-empty">No rules configured.</div>';
+    return;
+  }
+
+  for (const rule of resolved) {
+    const inherited = rule._inherited === true;
+    const row = document.createElement("div");
+    row.className = "rule-summary-row" + (inherited ? " rule-summary-row--inherited" : "");
+
+    const img = document.createElement("img");
+    img.className = "rule-summary-icon";
+    img.src = rule.serviceImg ?? "./images/logos/google.png";
+
+    const name = document.createElement("span");
+    name.className = "rule-summary-name";
+    name.textContent = rule.serviceTitle || rule.serviceUrl;
+
+    const acct = document.createElement("span");
+    acct.className = "rule-summary-acct";
+    const acctInfo = App.accounts.find(a => a.index === rule.accountId);
+    acct.textContent = acctInfo ? acctInfo.email : `#${(rule.accountId ?? 0) + 1}`;
+
+    if (inherited) {
+      const tag = document.createElement("span");
+      tag.className = "rule-summary-inherited";
+      tag.textContent = "inherited";
+      row.appendChild(img);
+      row.appendChild(name);
+      row.appendChild(tag);
+    } else {
+      row.appendChild(img);
+      row.appendChild(name);
+    }
+
+    row.appendChild(acct);
+    container.appendChild(row);
+  }
+}
+
+document.getElementById("edit-rules-btn").onclick = () => {
+  openSettings("rules");
+};
+
+// ─── Profile switch ───────────────────────────────────────────────────────────
+
+function switchActiveProfile(profileId) {
+  if (profileId === App.activeProfileId) return;
+
+  const behavior = App.settings.profileSwitchRedirect ?? "ask";
+
+  if (behavior === "always") {
+    doSwitchProfile(profileId, true);
+    return;
+  }
+  if (behavior === "never") {
+    doSwitchProfile(profileId, false);
+    return;
+  }
+
+  chrome.runtime.sendMessage("get_google_tabs", (tabs) => {
+    if (tabs && tabs.length > 0) {
+      showRedirectBanner(profileId, tabs.length);
+    } else {
+      doSwitchProfile(profileId, false);
+    }
+  });
+}
+
+function showRedirectBanner(profileId, tabCount) {
+  const banner = document.getElementById("redirect-banner");
+  document.getElementById("redirect-banner-text").textContent =
+    `${tabCount} Google tab${tabCount > 1 ? "s" : ""} open. Redirect?`;
+
+  banner.classList.remove("hidden");
+
+  document.getElementById("redirect-yes-btn").onclick = () => {
+    banner.classList.add("hidden");
+    doSwitchProfile(profileId, true);
+  };
+
+  document.getElementById("redirect-choose-btn").onclick = () => {
+    banner.classList.add("hidden");
+    showTabChooser(profileId);
+  };
+
+  document.getElementById("redirect-no-btn").onclick = () => {
+    banner.classList.add("hidden");
+    doSwitchProfile(profileId, false);
+  };
+  document.getElementById("redirect-always-btn").onclick = () => {
+    banner.classList.add("hidden");
+    saveSetting("profileSwitchRedirect", "always");
+    doSwitchProfile(profileId, true);
+  };
+  document.getElementById("redirect-never-btn").onclick = () => {
+    banner.classList.add("hidden");
+    saveSetting("profileSwitchRedirect", "never");
+    doSwitchProfile(profileId, false);
+  };
+}
+
+function doSwitchProfile(profileId, redirectTabs, tabIds) {
+  const msg = { type: "set_active_profile", profileId, redirectTabs };
+  if (tabIds && tabIds.length > 0) {
+    msg.tabIds = tabIds;
+  }
+  chrome.runtime.sendMessage(msg, () => {
+    App.activeProfileId = profileId;
+    App.viewedProfileId = profileId;
+    renderProfileBar();
+    renderQuickSwitch();
+    renderRulesSummary();
+    window.dispatchEvent(new CustomEvent("app:profile-switched", { detail: { profileId } }));
+  });
+}
+
+// ─── Tab chooser ──────────────────────────────────────────────────────────────
+
+function showTabChooser(profileId) {
+  const overlay = document.getElementById("tab-chooser-overlay");
+  const body = document.getElementById("tab-chooser-body");
+  body.innerHTML = "";
+
+  chrome.tabs.query({}, (tabs) => {
+    const googleTabs = tabs.filter(t => t.url && isGoogleServiceUrl(t.url));
+
+    if (googleTabs.length === 0) {
+      body.innerHTML = '<div class="empty-state">No Google tabs found.</div>';
+      return;
+    }
+
+    const selected = new Set();
+
+    for (const tab of googleTabs) {
+      const item = document.createElement("div");
+      item.className = "tab-chooser-item";
+
+      const checkbox = document.createElement("div");
+      checkbox.className = "tab-chooser-checkbox";
+      checkbox.innerHTML = "✓";
+
+      const info = document.createElement("div");
+      info.className = "tab-chooser-info";
+      const title = document.createElement("div");
+      title.className = "tab-chooser-title";
+      title.textContent = tab.title || "Untitled";
+      const url = document.createElement("div");
+      url.className = "tab-chooser-url";
+      url.textContent = new URL(tab.url).hostname;
+      info.appendChild(title);
+      info.appendChild(url);
+
+      item.appendChild(checkbox);
+      item.appendChild(info);
+
+      item.onclick = () => {
+        if (selected.has(tab.id)) {
+          selected.delete(tab.id);
+          checkbox.classList.remove("checked");
+        } else {
+          selected.add(tab.id);
+          checkbox.classList.add("checked");
+        }
+      };
+
+      body.appendChild(item);
+    }
+
+    // Buttons
+    document.getElementById("tab-chooser-confirm-btn").onclick = () => {
+      overlay.classList.add("hidden");
+      doSwitchProfile(profileId, true, Array.from(selected));
+    };
+
+    document.getElementById("tab-chooser-cancel-btn").onclick = () => {
+      overlay.classList.add("hidden");
+    };
+
+    document.getElementById("tab-chooser-close-btn").onclick = () => {
+      overlay.classList.add("hidden");
+    };
+  });
+
+  overlay.classList.remove("hidden");
+}
+
+// ─── Settings overlay ─────────────────────────────────────────────────────────
+
+const settingsOverlay = document.getElementById("settings-overlay");
+const settingsBody = document.getElementById("settings-body");
+const settingsTitle = document.getElementById("settings-title");
+// Detach the nav from the live DOM so it survives innerHTML wipes
+const settingsNavTemplate = document.getElementById("settings-nav").cloneNode(true);
+let _settingsAtNav = true;
+
+document.getElementById("settings-btn").onclick = () => openSettings();
+document.getElementById("settings-back-btn").onclick = () => closeSettings();
+
+function openSettings(section) {
+  settingsOverlay.classList.remove("hidden");
+  if (section) {
+    showSettingsSection(section);
+  } else {
+    showSettingsNav();
+  }
+}
+
+function closeSettings() {
+  if (!_settingsAtNav) {
+    showSettingsNav();
+    return;
+  }
+  settingsOverlay.classList.add("hidden");
+}
+
+function showSettingsNav() {
+  _settingsAtNav = true;
+  settingsTitle.textContent = "Settings";
+  settingsBody.innerHTML = "";
+  const nav = settingsNavTemplate.cloneNode(true);
+  nav.querySelectorAll(".settings-nav-item").forEach(btn => {
+    btn.onclick = () => showSettingsSection(btn.dataset.section);
+  });
+  settingsBody.appendChild(nav);
+}
+
+function showSettingsSection(section) {
+  _settingsAtNav = false;
+  const titles = { profiles: "Profiles", rules: "Rules", behaviour: "Behaviour", data: "Import / Export" };
+  settingsTitle.textContent = titles[section] || "Settings";
+
+  const tpl = document.getElementById("tpl-" + section);
+  if (!tpl) return;
+
+  settingsBody.innerHTML = "";
+  const content = tpl.content.cloneNode(true);
+  settingsBody.appendChild(content);
+
+  if (section === "profiles") {
+    renderProfilesManager();
+  } else if (section === "rules") {
+    App.viewedProfileId = App.activeProfileId;
+    renderScopeLabels();
+    window.dispatchEvent(new CustomEvent("app:rules-opened"));
+  } else if (section === "behaviour") {
+    initBehaviourSettings();
+  } else if (section === "data") {
+    initImportExport();
+  }
+}
+
+function renderScopeLabels() {
+  const viewed = App.viewedProfile;
+  const rl = document.getElementById("rules-scope-label");
+  if (rl) {
+    const isActive = viewed?.id === App.activeProfileId;
+    rl.textContent = (viewed?.name ?? "") + (isActive ? " (active)" : "");
+  }
+}
+
+// ─── Profile modal (used for edit forms on top of settings) ───────────────────
+
+document.getElementById("modal-close-btn").onclick = closeProfileModal;
+document.getElementById("profile-modal-overlay").onclick = (e) => {
+  if (e.target === document.getElementById("profile-modal-overlay")) closeProfileModal();
+};
+
+function openProfileModal() {
+  document.getElementById("profile-modal-overlay").classList.remove("hidden");
+}
+
+function closeProfileModal() {
+  document.getElementById("profile-modal-overlay").classList.add("hidden");
+}
+
+// ─── Behaviour settings ───────────────────────────────────────────────────────
+
+function initBehaviourSettings() {
+  const toggle = document.getElementById("enforce-precached-toggle");
+  if (!toggle) return;
+  toggle.checked = Boolean(App.settings.enforceOnPrecachedUrls);
+  toggle.onchange = () => saveSetting("enforceOnPrecachedUrls", toggle.checked);
+
+  const control = document.getElementById("profile-switch-control");
+  if (!control) return;
+  const options = control.querySelectorAll(".seg-option");
+  const current = App.settings.profileSwitchRedirect ?? "ask";
+  options.forEach(btn => {
+    btn.classList.toggle("active", btn.dataset.value === current);
+    btn.onclick = () => {
+      options.forEach(b => b.classList.remove("active"));
+      btn.classList.add("active");
+      saveSetting("profileSwitchRedirect", btn.dataset.value);
+    };
+  });
+}
+
+function saveSetting(key, value) {
+  const updated = { ...App.settings, [key]: value };
+  App.settings = updated;
+  chrome.runtime.sendMessage({ type: "save_settings", data: updated }, () => {
+    const el = document.getElementById("behaviour-status");
+    if (el) {
+      el.textContent = "Saved.";
+      el.className = "settings-status success";
+      setTimeout(() => { el.textContent = ""; el.className = "settings-status"; }, 1500);
+    }
+  });
+}
+
+// ─── Import / Export ──────────────────────────────────────────────────────────
+
+function initImportExport() {
+  const exportBtn = document.getElementById("export-btn");
+  const importBtn = document.getElementById("import-btn");
+  const importFile = document.getElementById("import-file");
+  if (!exportBtn) return;
+
+  exportBtn.onclick = () => {
+    chrome.runtime.sendMessage("export_settings", (data) => {
+      const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "default-account-profiles.json";
+      a.click();
+      URL.revokeObjectURL(url);
+      showStatus("Exported successfully!", "success");
+    });
+  };
+
+  importBtn.onclick = () => importFile.click();
+
+  importFile.onchange = (event) => {
+    const file = event.target.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const data = JSON.parse(e.target.result);
+        chrome.runtime.sendMessage({ type: "import_settings", data }, (response) => {
+          if (response?.success) {
+            showStatus("Imported! Reopen popup to see changes.", "success");
+          } else {
+            showStatus("Import failed: " + (response?.error ?? "unknown error"), "error");
+          }
+        });
+      } catch {
+        showStatus("Invalid JSON file.", "error");
+      }
+    };
+    reader.readAsText(file);
+    event.target.value = "";
+  };
+}
+
+function showStatus(msg, type) {
+  const el = document.getElementById("settings-status");
+  if (!el) return;
+  el.textContent = msg;
+  el.className = "settings-status " + type;
+  setTimeout(() => { el.textContent = ""; el.className = "settings-status"; }, 4000);
+}
diff --git a/background.js b/background.js
deleted file mode 100644
index 8396565..0000000
--- a/background.js
+++ /dev/null
@@ -1,180 +0,0 @@
-let defaultAccount = 0;
-let rules = [];
-let accounts = [];
-
-chrome.runtime.onInstalled.addListener(function (details) {
-  if (details.reason == "install") {
-    SyncStorage.get("rules", (data) => {
-      if (data.rules === undefined) {
-        SyncStorage.store({ rules: [] });
-      }
-    });
-    SyncStorage.get("defaultAccount", (data) => {
-      if (data.defaultAccount === undefined) {
-        SyncStorage.store({ defaultAccount: 0 });
-      }
-    });
-  }
-});
-
-SyncStorage.get("defaultAccount", (data) => {
-  defaultAccount = data.defaultAccount ?? 0;
-});
-
-SyncStorage.get("rules", (data) => {
-  rules = data.rules ?? [];
-});
-
-SyncStorage.get("accounts", (data) => {
-  accounts = data.accounts ?? [];
-});
-
-chrome.storage.onChanged.addListener(function (changes, namespace) {
-  if ("defaultAccount" in changes) {
-    defaultAccount = changes["defaultAccount"].newValue;
-  }
-  if ("rules" in changes) {
-    rules = changes["rules"].newValue;
-  }
-  if ("accounts" in changes) {
-    accounts = changes["accounts"].newValue;
-  }
-});
-
-chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-  if (message === "fetch_google_accounts") {
-    const url =
-      "https://accounts.google.com/ListAccounts?gpsia=1&source=ogb&mo=1&origin=https://accounts.google.com";
-    fetch(url)
-      .then((response) => response.text())
-      .then(function (rawText) {
-        const parser = new DOMParser();
-        const html = parser
-          .parseFromString(rawText, "application/xml")
-          .querySelector("script").innerHTML;
-        return html
-          .split("'")[1]
-          .replace(/\\x([0-9a-fA-F]{2})/g, (match, paren) =>
-            String.fromCharCode(parseInt(paren, 16))
-          )
-          .replace(/\\\//g, "/")
-          .replace(/\\n/g, "");
-      })
-      .then((text) => JSON.parse(text))
-      .then(sendResponse);
-    return true;
-  }
-});
-
-// collect last 4 redirectUrls
-let last4RedirectUrls = [];
-const maxRedirectTimeMS = 250;
-
-function detectRedirectCycle(redirectUrl) {
-  const currentTime = new Date().getTime();
-  if (last4RedirectUrls.length === 0) {
-    last4RedirectUrls.push({ time: currentTime, redirectUrl });
-    return false;
-  }
-  const lastRedirect = last4RedirectUrls[last4RedirectUrls.length - 1];
-  if (currentTime - lastRedirect.time > maxRedirectTimeMS) {
-    last4RedirectUrls = [];
-  }
-  if (lastRedirect.redirectUrl === redirectUrl) {
-    last4RedirectUrls.push({ time: currentTime, redirectUrl });
-  }
-  return last4RedirectUrls.length >= 4;
-}
-
-chrome.webRequest.onBeforeRequest.addListener(
-  (details) => {
-    if (
-      details.url &&
-      // filter only get requests from the main_frame (user-initiated)
-      details.method === "GET" &&
-      // test if it's one of the Google services
-      isGoogleServiceUrl(details.url) &&
-      // test if the URL does not contain "authuser" or "/u/0"
-      details.url.toLowerCase().indexOf("authuser") < 0 &&
-      !/https?:\/\/.*\.google\.co.*\/u\/\d+/i.test(details.url)
-    ) {
-      // Check google service is Docs, do not redirect on document creation
-      if (
-        details.url.includes("docs.google") &&
-        details.url.includes("/create")
-      ) {
-        return;
-      }
-      //
-      const accountId = getAccountForService(details.url);
-      const redirectUrl = convertToRedirectUrl(details.url, accountId);
-      // Cos with "0" there are many redirect problems, and Google handles it anyway
-      // isAccountLoggedIn - cos there will be ERR_TOO_MANY_REDIRECTS
-      if (redirectUrl && accountId !== 0 && isAccountLoggedIn(accountId)) {
-        if (detectRedirectCycle(redirectUrl)) return; // ERR_TOO_MENY_REQUESTS (detecting a redirect cycle)
-        return { redirectUrl };
-      }
-    }
-  },
-  // filters
-  {
-    // types: ["main_frame", "sub_frame"],
-    types: ["main_frame"],
-    urls: ["<all_urls>"],
-  },
-  // extraInfoSpec
-  ["blocking"]
-);
-
-chrome.tabs.onCreated.addListener((tab) => {
-  const url = tab.pendingUrl || tab.url;
-  if (!url || !isGoogleServiceUrl(url)) return;
-  if (tab.openerTabId) {
-    chrome.tabs.get(tab.openerTabId, (openerTab) => {
-      if (openerTab && isAnyGoogleUrl(openerTab.url)) return;
-      const accountId = getAccountForService(url);
-      const redirectUrl = convertToRedirectUrl(url, accountId);
-      if (redirectUrl) {
-        chrome.tabs.update(tab.id, { url: redirectUrl });
-      }
-    });
-  } else {
-    const accountId = getAccountForService(url);
-    const redirectUrl = convertToRedirectUrl(url, accountId);
-    if (redirectUrl) {
-      chrome.tabs.update(tab.id, { url: redirectUrl });
-    }
-  }
-});
-
-chrome.commands.onCommand.addListener((command) => {
-  if (command?.indexOf("switch_to_ga_") >= 0) {
-    try {
-      const accNum = parseInt(command.charAt(command.length - 1)) - 1;
-      SyncStorage.get("accounts", (data) => {
-        // redirect only if accNum is not > than totla number of accounts
-        if (data.accounts && data.accounts.length > accNum) {
-          redirectCurrectTab(accNum);
-        }
-      });
-    } catch {}
-  }
-});
-
-// checks if the account is logged in (to redirect only logged in Accounts)
-function isAccountLoggedIn(accountIndex) {
-  return Boolean(accounts[accountIndex]?.isLoggedIn);
-}
-
-function getAccountForService(url) {
-  for (const rule of rules) {
-    const reg = new RegExp(
-      `^https?:\/\/[^?&]*${rule.serviceName.toLowerCase()}\.google\.co.*`,
-      "is"
-    );
-    if (reg.test(url)) {
-      return rule.accountId;
-    }
-  }
-  return defaultAccount;
-}
diff --git a/images/128.png b/images/128.png
index e6b9e311775238784d25189d056ca0f918dcc77e..844edfd199099424fef741d532c1f24417178991 100644
GIT binary patch
delta 2949
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

delta 2933
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

diff --git a/images/16.png b/images/16.png
index c15556e27cd9bbb01fd263addfbe791fda1e7db9..610cf453a0b43f2b0989c45793e64dac951a935a 100644
GIT binary patch
delta 479
zcmV<50U-W?1o#7xBYy#{Nkl<Zc$}0|J4gdT5Ph?k#6r|Gwz4AFh>%9Gi;W`K2!e%;
zrdH6{2sXw>u=3N``6*SzSO{v9C|XJi?L92Cu(=QdG3IWa`y_fXr{=-3v&+1<Z+3PC
z0-ykC0T~`o98U-3Q3GO>r+J<i;Ko&?IXTHg4-}{X;{w>=P=6x$#1xNJpFkOig<Rqg
z{s-L?I&cKI&KyrMGzoS~!V|D9=}mAAzN4fk0<isbd>zTHaTtFw&j)~!HSBA^roDDb
zXg|RQDd*PF^#&{*0#jK(@j(L13E;NR+aT!q33P{?Sbf$1+zHIi0e76ZbPRM9f%QpX
zXROYOs_J-%9)DrREXqC6ru*`2fqd&X-g^|P(6g_#+$W6$3|C;d91}u2WwH$SZ6ngZ
zg+{2n#8JB0WdW&^5-IbF+%}34Gsj+PW!NqvgNq2uGiPlTBudx2Fkj<7LF-Z@*TJZg
zq^u0py})qq0T40p@i^}zD#dLSVgVPPgBnIFGo)yRepq?RAZyhsg*K5Tr{zCBlkG-W
zW(q{UAE=<RinIius{8Z;PjbpK_c%o=vX~goHcI;h009605G7ai00006Nkl<Z0{|0<
Vh-j<ZA`Som002ovPDHLkV1hpF*2w?>

delta 488
zcmV<E0T=%G1AzpPBYyx1a7bBm000XU000XU0RWnu7ytkO0drDELIAGL9O(c600d`2
zO+f$vv5yP<VFdsH0hUQbK~#7Fl~X-PLQxn!_xaNhl}l^f2wEg?30lIXLTC|!hL&_L
z$XbLJZ3&#LmNw0?A|zU>MT;84q4uPqh6bOAVCH*Y_xYFiJ%1Jb;5_bqoOAB^F5d-u
z6aicZG6L^ny@^3fkX-^1AuI?`2hxUVUvUla8z-8C5)5;TunKsZacMxvZHXVbA;fJA
z72Sk_285(G7Gv<o{g#Wf;AS4QbclFM$BfVT72=E<j#J-2_#D{C%J=ljf&C!x<ZdhT
z#WhUZ>uZ9iMSuL51h%$;XF&{K0uyB*who-Gnr>e2NMMxf0s*belge0L;u!|T(f>XD
zxIm?uGuz0^t{Q~eFj%g76vdVnV(xICz&Uq}ZdLpAqVkv!20YJ5iE8&ORX0#pw4BJ&
zZo^37T-bwyUpLa0I4TbbXkT8ri#r=@B=8Yuq-U6ERAC*nDZr`X_iaZKig8p)Q9`(F
zCTN$h7GT68tl!Kt{XnnSkC0_*eQP0zG>Wc8!I<;{36v#f3yM?ol3&l0>TPLBLE*%7
eA#`NB(f$DZXY}DJ^?2q00000<MNUMnLSTXfh1xLy

diff --git a/images/32.png b/images/32.png
index b10699af1fd7ab5e1957e2303215c2fa4ea47f42..ff12b0af6fb9689e658ff89228dcd8307efd4ece 100644
GIT binary patch
delta 924
zcmV;N17rOC2C)Z_BYy*CNkl<Zc$~afOK1~882)DR5UG!N&|^(5UM#d#5EQ}mQVT^)
z1uH(l<W?y(jhBj-COwFHu&oF2)TS3vBDMt!#Y-ay3W64FkHyf7pa?4^kTl7T|75c<
z&wa$`2gA;5=l}la>~gdS0eDqljoMf0&&x4d0E11CAP+sl^nV<O*4L4u!=ls{U<0-Y
z<bePOreUBh9k@=9A$q1@0o=+a-Q2W!5hkXly*)y6%cQ8bkbMI30BY0nKpOgC1N2Um
z+GlDvjrKKl0hv2kGPkJ~7O+HuB8}WqX8~gDFPVG3O~NGtx?5@&ScPCIY_b&H{}QPJ
z5OM*@Dgrb)Lw|!X{tpzA<)fxJD<<1zZYwCuD#w7d04(P2--6s6liF7ia8m)H$v$DT
zlG(&MDca|t6xAoHvOuN@Ee4m*pm+NS+J;{p!0JgXkg#4o_$p*pV_yP(2d5Mi@LpR3
zCK5pBceISBgTVb^jRaXY&K-y;Lw{UdCg53wR}_l5?|-j6pz{YX@*23c0$X@@9C$FS
zJ*&Xz(#j*ET)~nyEa5-`amJdLO-bb595DD1hLD=x4Fb>l47Vw42R<bP#nNRYv3(f0
zF#(K@Qol)jNR7Lnm<pFDr=dgd?7c+Sr~?6*)PpZR&9BmQXE(JuY32)4z{)8g>xL<q
zAQxP(segoJY6-f<SbfcIgoA0V*~pkA%ORv(Z4iW&=y-U!hiI-jeJ|Tm9n~E#vg>!^
zyR##q+O;|Y{JaQ5s8L$+IFBx4&*|IX`%`EIBJ08KMi{xxv0`6<EeXaVSY@et0t3R!
zg`h7U(NlYntLrh`U9+}`<Wm=s`S1vWw6ABzqkrlf7ONt_`}1)y)-(;JaQBHRxQ-cD
zYV~I~GViBR_;${CUzQ)Dh_If9(vO+9b4WkmD)wt3O)LecUwtwaUWqaRl{@4&T*~YP
zDO{3}WOO3Z&*>Li$Zd?7y$&JdEm(+1?d7;W3kLE*CfFpi_@lx0C`Ik9L7i2z&ZsWD
zF@J#~2?|K$gA^>5>VX*qL{cyj!>TJ;yJq}jB8jMls8Mhl3MO+4&c`Y3nntd*KO>uN
z(N0!lYQ{NJY3|kul)wjaQ8Tw_=5~ZCi%r`I6w$;jGJ^zDLyi30UIIG$^8p4Xt>I;y
yqT7PG8{szq00960i@P9900006Nkl<Z0~G-L2Rz(^3p4Zp0000<MNUMnLSTZ2ho}_*

delta 871
zcmV-t1DO1=2mJ<+BYyx1a7bBm000XU000XU0RWnu7ytkO0drDELIAGL9O(c600d`2
zO+f$vv5yP<VFdsH0}@F@K~#7Fy;ea;6j2!d-g8yLQaj|))=QTJr64GR>|%mM5>!M%
zyEjG9>{4`b)<aN-)DF@~*Gp7dYmgyb+#o0jQb>>D(xpR$6MwR>>(0*We>;xN&d$!x
ztm}U8vv2mjneThw|NeglC=&t*>cBF^CXHw0HL3w3YNi+^;w=hc2`S_b4iXyBCy8vt
zc|jspD(;5GZs9egOVTau2fKEU`ysAaTFCB@L!QfxnCG<6!Y;pd`$-E9&~DFZ$<QVX
z1Z07UDv+D8Wq%$}Zqcy66YCFqT-@pa{UlHY(C#A)P@N`%BqVx()~`6`-;UThbS7FV
zN4(Vl@!>S0@Pfm0=xTa{&8B&XfkBA<3YqGKXq|<S&ug5=Omi&1A24$uCqx!Auvygl
z8|Z%z3@pMIKA!|0UpIb{&zN8uM${WvFfMn|_!?2hi+{IGDdf>K(EAOp_}c(H3;{1L
zx-L`MHrmuMR1S~$c?`IH9~c~@af|aBx#NzhlH?M5Wmsbl4qe466=ffJ;@S^>v;oh1
z4eQRY8~;h0FOLC>XMl7aN`eVW!7apd;{s`OPy}=7*%mY<jVR`b1L7=$uzK@<zhO?R
z8lGJ1B!8L9fwuXIbVq$Vi1g}%=+0z+*gjVvfL{{BR6vSMMd0{5)StZvek6f%Akxj)
zSsO-XeJD2;U<-n=5iGGpp@1F{<U+*gwodzlYTKWou6@#%5G`>9sjp8VX!nK6xT1e#
zkvsvsTZ@9RqGc$_>rRcK_QWjQp#SMW>dQE?zke>cuS@fzbRxW$q0D3I(=?JVH*#Y;
zq{Wgr`SyEBax3-(=)6V|9^QtMT#ArlOd&GQ$yXc5tPPdAU49nPTQEB!cQ3CCtDr{<
zF~LTe$8R`RujY2|4f>>>4k#wMvw)lkI*`ypbXYv~gHjL>alu3cOSN(P9CN)>3emHQ
z+hE~zB__KC=Xa^>ik@5sFYuWb<H>qNPX#8dc9$<;7rZB<luC<XcTL#ZY$_%ohazc_
x6(pD*cFJ>Q1(@j8`WTpWBgi<NZVz@l;UBACo@-f)``!Qm002ovPDHLkV1hJXjnn`D

diff --git a/images/48.png b/images/48.png
index 86fd3551688c21a7122e8e3d72d3733ff6456cd1..4628596ed71abd0a1a6696837717491dbceed2d0 100644
GIT binary patch
delta 1309
zcmV+&1>*Yt39kx}BYy<sNkl<Zc%0OkPiP!f9LK-!ZT?i$cB|;I-GYdq#i)0?IcNg8
zBoI7^(B!66y3NIk2ea!zdJwWJf?jOu#bRTdh!#>0CW6p|7$eq;AQ^j5P{b{5bT_*@
zufN~S&SoY%JNxF(Cg}%;nVmOb-uJ!l@ArOhBGDrhkfCGV1b;T@SfT47^Z<c`p^m2M
zl%w+**w^ltU7%Be&IS@9Q2}*eTmo}+nF)BzpqJ+9_yh@%hycefbeRqDXDnnm?rccJ
zfbBxZEFBvN*Lj9TZ?JF`JY#`Go&mDURMReL#3!<?LJOeL%JQfq{D|vxW}QwGVQi&s
zp{8Bt=vYAyI)C4M$57K&vr2PjwPrxsX)%vv?4pa7tpWw~(k{AmTRVIO@buB@S)|63
z*e5h+qu_Jj%O2T9m$tRTBcK^XKVpAlQ06)2{P1KUvduX5KN)vn*tesxjC+GtKRq)b
z?T9z9kD<{oxnsa1fEvmiBr2gwF=5KoubGrxrnl(04u5Et#=8QKy0p`1o5eep5)>Ru
z9PO+cdt|GB4r0AQj^I%j9pW>v7D_K7efTmCJ@Wz5pJuUZ+`1olYZ`cL9_fcZ$I+l?
zJ6h<01!Pl_HYsY`LP!1vzNEt9$Y1CgAB_R$Ub02FdT9uW;qpYg6WRpOsAp6ocz5+O
z)uU$@l7AKQ-IKtn*MXalbbdxD6y+Th%G29+@(8dxZ&JCex(6=L#;aceuU$nfZazvK
zKV=KhWcAi0hMgZC0S6Z-ScH{%v|%Cdo(IOhM=01LY?lwmcGyLOY6{0HO*`!j;?M;g
zPx&in?NQ{>)PYC)`S*OhuE~Mgc0auqqQF(c+JA9H=FLkKAD8^wBG|<bgDli4=2GsK
z$^wl0Ch<GT;$kUMInABBNDe);2^=@<dpyde37V-l^k=C9tD=U9%H<A0?2x{QjM;Ck
ze6cn(93Pyie$GU*iVK4(<^1i*_7W#>OUXi1KNiuW@0uEvg+d8;P;{qGH{Cb&qqXed
z6Mr8s4m^D>Egv+nTh#wJf$H_*QvKhd87vE<({r5#WK~)Y@`m2Dsy{JMM*maqWAM2G
zdWm^EgUYw((fIR(bE^y`i{{tD_r<;f<cP{anR#k$3uK;!foI=A|KrJ4+^U+!){Pu$
zznr$NeK1U6PGh-$)qS%~fEY1X1XLDXV1EHDBney9em#lm+S^bx`Wnob*HT62hetr_
zh5D3|Vjdx25d+6dmc_!tKHplKb=yS?vnmf$LbYD#S&5ZU8H8kuM()2WKUkxv3tOae
zeGdO${U&thEe_OMS#if#39*g{IDxl$WzD({f_=XE*>9-bIE^SM-dt7sTK#N`0e?AC
zBY(*pV&E4aQSIV}%IUI{YNoN=cfq;mpGHUPQ$mSZ5o15holhP80;z|8vg{S7<BWn>
zQbM$?34sfl9IfRk2hU;;Vaq6=^y#3n603|f8?+{fUH#C@b`hdcFs}_1gP!Xyz~ROE
zxDaA4j;-`DOJ=n%@1)8g^aVJKY=6-wj#RD}LKM_0rSd{2yZ8}a0F$t-bnW6tGyx7I
zL?|vj;>?D=UHphAz#&4~we6Cc4l0#(NJap|wo>&o-4?-aX)!Fx32<OrnT<KhSe}2D
zSU#6zmr7qTs$Kj@UVsDJ$`m<!Poaz??Bd5=00030|2ZavhX4Qo21!IgR2BmOaV^vJ
TGPdb!00000NkvXXu0mjfju3mJ

delta 1259
zcmV<H1Qh$P3jPU@BYyx1a7bBm000XU000XU0RWnu7ytkO0drDELIAGL9O(c600d`2
zO+f$vv5yP<VFdsH1d~ZbK~#7F)tOIh8$}exzZu6)5zx9IIJR2}Ata~>aHsA85-FEN
z3LFqplN+e0PA(L2APxrv5|V9%1P4^77b+Us6hWnw0|^pR4}XXhM7bcLnjS!+hd63O
z?bzPwd+Thnw%6;~_4-eL(kR}YjrV;s-+ME=2D*d-3~D(OxIt}|K9AsjfC7zEo2Q^R
zs3~V-K`ab|N(GqM8FA&&Zjgu*7$kU9*(PlQcN1cupE&HIg0{ZditIA&=JSB9cebJ%
zB?8z*cQ&qdZGSd)?2_(A;4VVu`F;os`m$t*cIln1x@niLCOJ=E6<F+N;BL0k4Za_C
z@nb8)8LwyveuOIl2AjMDj@Sp%*+U8^F!&hGjiGGlEa3iNH_kc%bg)Q&@)%%f^s~Y%
zMoyAJt3W$#gW{TnE}C28o-_(P6L@82)%_B3Yd@})X@4>GicflV#+MO4cmW5V`xNmn
z6X+S64+8Jb08iu)f8=W%_PSQI>Ud}giHJmwlESdh9l8a4OY7mG|Ijr)9|t~swI;$5
zWnM@eFHANkZ<7ETb%RWogU8gpwhEkH3RlQaPXj040&YIm`Wo6#WaJ$z6lV6yXq^Bn
zcoVD6QGag*&&C_y0dHPLN8Egz0zX+3pvl_i6pq^mbprM;VO9vF;R6=(!5LuuXZV6G
z!gl#=yumISlp;7%+_6(*68kPyJms&Su8ks(rVc#XFMjOebxrn__u{O#5GAe>WT6gt
z=RD=ddH22mc4<Z-zxm4EW-j9FD=s1bz!d%lZ-16Vu!VzzJ4X&Zumv2=*Us@MXD4Z<
z-qxR`7OaU1CW{wZB(Y8W9KGj>A|*O}q~rYHO7*)D%qqLksG9<*+fz8(*d@IFkA<ix
zmeIfWngyYd#T{gvrPGOM`xRs5#PCyJEXSVxC@vq)qgPb^Ifl~J%%#f4$Q)KgzSVWD
z1%D(|Tn_VdsA=s0MXZ46GoN7ig#~mI^R|KFk7rQ*_n3XE03|c#_rmqYt^(w!O44>J
z<(9}i3$f?lNA$_F2oqI`WBYm%<v&hYpIx9lFlVq5U2~pn5+Fv+RRNVi8(07f3By+9
zKTn{v{vH&Kz6NvVl}N@us1p!*sWPpk$bZ2HEFyL^Ygx=M?DOsQd8b{pFiY|v6;$hn
zbt|zF%79O{Y2^OD_=`1)y0ArxSJSwA`3K*@TkNa2Kh&ELzajv3;%!}Aw?2EpKHvK4
zFO;vJLJ$-`4;P1a<7~<SIa(%v$s{_!EkA<V#R+Yv3sS1N>dMffea^j%j#Z|G5`Xie
zgIC=geB|&qh&=k6Wv@;GXB5OGB}CJj;JJ{=v2u!Pu--e#F2R;jF6GlkV<lFGG^?~G
zh@Sp1$955-x?o<3WxTFyFTm#I%7hRi-HEOAF|%fAC}o#QFZ2c2jBd{gM3UVQqM+8O
zlrOZhiyQt0Fd^GY*Dh`Z6JSF^gk<8aM<=tPZx=T@6JQgd?AGiOneo~x>ky6rhHa%P
zv+Wkac4g5o;R&!|Tbb1~Rjj%nODvyDvP*F&6VxtlgfGB`ZDopN?U_R5!?24R_W;3?
VWvq*`M_2#=002ovPDHLkV1j&BNc#W)

diff --git a/images/logos/youtube.png b/images/logos/youtube.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe8cebe0c81c976deb00b3ab14b25ecc410572ab
GIT binary patch
literal 331
zcmV-R0kr;!P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF0003JNkl<Zc%1E;
zK@!3s5Ck`t|Nk<c<`M~VaCZinKBi)%+l7Ob2xE*f#u#JFiCnWcwuqLwkPNN~zn?d(
zD1K)Y;x+o<4)PIWkH-MJ$b%=JZh+n7LC<Tr1y0~Az^=bOxchkm*b89e0A=6QG>?|r
z3203&1ZN8fh2Wk60ulI!AbA@20RSn4P5@9GLN5R)3ZWYSBuCH>5Rp0!YXkrZA>My|
zS~l18f4I}E5g<Vv=x>2U`3U6+NEQcr0gA+dPJm)@zz;wY2i!xDEFZy|00D7O8$d`L
z)NKJl`3UwIAb<m~7r^E#z|3nUD|7er1oSTMIt4wi#|hXi!jsQ%3+xhM<Z=9ag2otQ
dj4{R>$_E?)JWzfoDvSUC002ovPDHLkV1jX~etQ4_

literal 0
HcmV?d00001

diff --git a/manifest.json b/manifest.json
index adc4648..4d06aa5 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,72 +1,111 @@
 {
+  "manifest_version": 3,
   "name": "Default Account for Google™ products",
-  "description": "Select and manage your default account for 🎥 Google Meet™, 📩 Gmail™, or any other product.",
-  "version": "1.14",
-  "manifest_version": 2,
-  "minimum_chrome_version": "40",
-  "browser_action": {
+  "description": "Select and manage your default account for Google Meet™, Gmail™, YouTube™, or any other Google™ product.",
+  "version": "3.0",
+  "icons": {
+    "16": "/images/16.png",
+    "32": "/images/32.png",
+    "48": "/images/48.png",
+    "128": "/images/128.png"
+  },
+  "action": {
     "default_popup": "popup.html"
   },
   "background": {
-    "scripts": ["utils.js", "background.js"],
-    "persistent": true
+    "service_worker": "service-worker.js"
   },
   "permissions": [
-    "tabs",
     "storage",
-    "<all_urls>",
-    "webRequest",
-    "webRequestBlocking"
+    "tabs",
+    "webNavigation"
+  ],
+  "host_permissions": [
+    "*://*.google.com/*",
+    "*://*.google.co.uk/*",
+    "*://*.google.co.in/*",
+    "*://*.google.co.jp/*",
+    "*://*.google.co.kr/*",
+    "*://*.google.co.id/*",
+    "*://*.google.co.th/*",
+    "*://*.google.co.za/*",
+    "*://*.google.co.nz/*",
+    "*://*.google.co.il/*",
+    "*://*.google.co.ke/*",
+    "*://*.google.co.ve/*",
+    "*://*.google.co.ao/*",
+    "*://*.google.co.cr/*",
+    "*://*.google.co.tz/*",
+    "*://*.google.co.ug/*",
+    "*://*.google.co.zw/*",
+    "*://*.google.com.au/*",
+    "*://*.google.com.br/*",
+    "*://*.google.com.mx/*",
+    "*://*.google.com.ar/*",
+    "*://*.google.com.co/*",
+    "*://*.google.com.tr/*",
+    "*://*.google.com.eg/*",
+    "*://*.google.com.sa/*",
+    "*://*.google.com.ng/*",
+    "*://*.google.com.pk/*",
+    "*://*.google.com.tw/*",
+    "*://*.google.com.hk/*",
+    "*://*.google.com.sg/*",
+    "*://*.google.com.my/*",
+    "*://*.google.com.ph/*",
+    "*://*.google.com.vn/*",
+    "*://*.google.com.pe/*",
+    "*://*.google.com.ua/*",
+    "*://*.google.de/*",
+    "*://*.google.fr/*",
+    "*://*.google.es/*",
+    "*://*.google.it/*",
+    "*://*.google.nl/*",
+    "*://*.google.pl/*",
+    "*://*.google.pt/*",
+    "*://*.google.ru/*",
+    "*://*.google.se/*",
+    "*://*.google.ca/*",
+    "*://*.google.be/*",
+    "*://*.google.at/*",
+    "*://*.google.ch/*",
+    "*://*.google.cl/*",
+    "*://*.google.dk/*",
+    "*://*.google.fi/*",
+    "*://*.google.gr/*",
+    "*://*.google.ie/*",
+    "*://*.google.no/*",
+    "*://*.google.ro/*",
+    "*://*.google.cz/*",
+    "*://*.google.hu/*",
+    "*://*.google.sk/*",
+    "*://*.youtube.com/*",
+    "*://*.youtu.be/*",
+    "*://*.blogger.com/*",
+    "*://*.blogspot.com/*"
   ],
   "commands": {
     "switch_to_ga_1": {
-      "suggested_key": {
-        "default": "Alt+1",
-        "mac": "Alt+1"
-      },
-      "description": "Switch to Google™ Account #1"
+      "description": "Switch to Google™ Account #1",
+      "suggested_key": { "default": "Alt+1", "mac": "Alt+1" }
     },
     "switch_to_ga_2": {
-      "suggested_key": {
-        "default": "Alt+2",
-        "mac": "Alt+2"
-      },
-      "description": "Switch to Google™ Account #2"
+      "description": "Switch to Google™ Account #2",
+      "suggested_key": { "default": "Alt+2", "mac": "Alt+2" }
     },
     "switch_to_ga_3": {
-      "suggested_key": {
-        "default": "Alt+3",
-        "mac": "Alt+3"
-      },
-      "description": "Switch to Google™ Account #3"
+      "description": "Switch to Google™ Account #3",
+      "suggested_key": { "default": "Alt+3", "mac": "Alt+3" }
     },
     "switch_to_ga_4": {
-      "suggested_key": {
-        "default": "Alt+4",
-        "mac": "Alt+4"
-      },
-      "description": "Switch to Google™ Account #4"
+      "description": "Switch to Google™ Account #4",
+      "suggested_key": { "default": "Alt+4", "mac": "Alt+4" }
     },
-    "switch_to_ga_5": {
-      "description": "Switch to Google™ Account #5"
-    },
-    "switch_to_ga_6": {
-      "description": "Switch to Google™ Account #6"
-    },
-    "switch_to_ga_7": {
-      "description": "Switch to Google™ Account #7"
-    },
-    "switch_to_ga_8": {
-      "description": "Switch to Google™ Account #8"
-    },
-    "switch_to_ga_9": {
-      "description": "Switch to Google™ Account #9"
-    }
+    "switch_to_ga_5": { "description": "Switch to Google™ Account #5" },
+    "switch_to_ga_6": { "description": "Switch to Google™ Account #6" },
+    "switch_to_ga_7": { "description": "Switch to Google™ Account #7" },
+    "switch_to_ga_8": { "description": "Switch to Google™ Account #8" },
+    "switch_to_ga_9": { "description": "Switch to Google™ Account #9" }
   },
-  "icons": {
-    "16": "/images/16.png",
-    "32": "/images/32.png",
-    "48": "/images/48.png",
-    "128": "/images/128.png"
-  }
+  "minimum_chrome_version": "88"
 }
diff --git a/manifest_firefox.json b/manifest_firefox.json
index a14b6b5..96a34ef 100644
--- a/manifest_firefox.json
+++ b/manifest_firefox.json
@@ -1,77 +1,42 @@
 {
-  "name": "Default Account for Google™ products",
-  "description": "Select and manage your default account for 🎥 Google Meet™, 📩 Gmail™, or any other product.",
-  "version": "1.14",
   "manifest_version": 2,
-  "browser_specific_settings": {
-    "gecko": {
-      "id": "roman.furman@uptech.team",
-      "strict_min_version": "42.0"
-    }
+  "name": "Default Account for Google™ products",
+  "description": "Select and manage your default account for Google Meet™, Gmail™, YouTube™, or any other Google™ product.",
+  "version": "2.0",
+  "icons": {
+    "16": "/images/16.png",
+    "32": "/images/32.png",
+    "48": "/images/48.png",
+    "128": "/images/128.png"
   },
   "browser_action": {
     "default_popup": "popup.html"
   },
   "background": {
-    "scripts": ["utils.js", "background.js"],
-    "persistent": true
+    "scripts": ["utils.js", "service-worker.js"],
+    "persistent": false
   },
   "permissions": [
-    "tabs",
     "storage",
-    "<all_urls>",
-    "webRequest",
-    "webRequestBlocking"
+    "tabs",
+    "webNavigation",
+    "*://*.google.com/*",
+    "*://*.youtube.com/*",
+    "*://*.blogger.com/*",
+    "*://*.blogspot.com/*"
   ],
   "commands": {
-    "switch_to_ga_1": {
-      "suggested_key": {
-        "default": "Alt+1",
-        "mac": "Alt+1"
-      },
-      "description": "Switch to Google™ Account #1"
-    },
-    "switch_to_ga_2": {
-      "suggested_key": {
-        "default": "Alt+2",
-        "mac": "Alt+2"
-      },
-      "description": "Switch to Google™ Account #2"
-    },
-    "switch_to_ga_3": {
-      "suggested_key": {
-        "default": "Alt+3",
-        "mac": "Alt+3"
-      },
-      "description": "Switch to Google™ Account #3"
-    },
-    "switch_to_ga_4": {
-      "suggested_key": {
-        "default": "Alt+4",
-        "mac": "Alt+4"
-      },
-      "description": "Switch to Google™ Account #4"
-    },
-    "switch_to_ga_5": {
-      "description": "Switch to Google™ Account #5"
-    },
-    "switch_to_ga_6": {
-      "description": "Switch to Google™ Account #6"
-    },
-    "switch_to_ga_7": {
-      "description": "Switch to Google™ Account #7"
-    },
-    "switch_to_ga_8": {
-      "description": "Switch to Google™ Account #8"
-    },
-    "switch_to_ga_9": {
-      "description": "Switch to Google™ Account #9"
-    }
+    "switch_to_ga_1": { "description": "Switch to Google™ Account #1", "suggested_key": { "default": "Alt+1" } },
+    "switch_to_ga_2": { "description": "Switch to Google™ Account #2", "suggested_key": { "default": "Alt+2" } },
+    "switch_to_ga_3": { "description": "Switch to Google™ Account #3", "suggested_key": { "default": "Alt+3" } },
+    "switch_to_ga_4": { "description": "Switch to Google™ Account #4", "suggested_key": { "default": "Alt+4" } },
+    "switch_to_ga_5": { "description": "Switch to Google™ Account #5" },
+    "switch_to_ga_6": { "description": "Switch to Google™ Account #6" },
+    "switch_to_ga_7": { "description": "Switch to Google™ Account #7" },
+    "switch_to_ga_8": { "description": "Switch to Google™ Account #8" },
+    "switch_to_ga_9": { "description": "Switch to Google™ Account #9" }
   },
-  "icons": {
-    "16": "/images/16.png",
-    "32": "/images/32.png",
-    "48": "/images/48.png",
-    "128": "/images/128.png"
+  "browser_specific_settings": {
+    "gecko": { "strict_min_version": "109.0" }
   }
 }
diff --git a/popup.html b/popup.html
index ae77849..9801b9a 100644
--- a/popup.html
+++ b/popup.html
@@ -1,88 +1,213 @@
 <!DOCTYPE html>
-<body class="body">
+<html>
+<head>
+  <meta charset="utf-8">
   <link rel="stylesheet" href="styles.css" />
-  <script src="utils.js"></script>
+</head>
+<body class="body">
+
   <a href="https://default.wtf/" target="_blank" class="link">
     <header>
-      <img src="images/logo.svg" alt="Default Account for Google&trade; products" /> Default Account for Google&trade; products
+      <img src="images/logo.svg" alt="Default Account for Google products" />
+      Default Account for Google&#8482; products
     </header>
   </a>
-  <section class="content">
-    <!-- Tab links -->
-    <div class="tab" width="360px">
-      <button class="tablinks" id="accounts_button">Default account</button>
-      <button class="tablinks" id="rules_button">Rules</button>
+
+  <!-- Profile bar -->
+  <div id="profile-bar">
+    <div id="profile-chips"></div>
+    <button id="settings-btn" title="Settings">&#9881;</button>
+  </div>
+
+  <!-- Redirect confirmation banner -->
+  <div id="redirect-banner" class="redirect-banner hidden">
+    <span id="redirect-banner-text"></span>
+    <div class="redirect-banner-actions">
+      <button id="redirect-yes-btn" class="banner-btn banner-btn-yes">Redirect all</button>
+      <button id="redirect-choose-btn" class="banner-btn banner-btn-choose">Choose</button>
+      <button id="redirect-no-btn" class="banner-btn banner-btn-no">Skip</button>
     </div>
-    <!-- Tab content -->
-    <div id="Rules" class="tabcontent">
-      <h3>Set account for specific Google&trade; service</h3>
-      <div id="service-picker-container" class="picker-container"></div>
-      <div
-        style="margin-top: 10px"
-        id="account-picker-container"
-        class="picker-container"
-      ></div>
-      <div
-        style="margin-bottom: 20px"
-        id="action-button-div"
-        class="action-button"
-      >
-        <svg
-          width="10"
-          height="6"
-          viewBox="0 0 10 6"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M1 1L4.94343 4.94343C4.97467 4.97467 5.02533 4.97467 5.05657 4.94343L9 1"
-            stroke="#2B2337"
-            stroke-width="2"
-            stroke-linecap="round"
-          />
-        </svg>
+    <div class="redirect-banner-remember">
+      <button id="redirect-always-btn" class="banner-link-btn">Always redirect</button>
+      <span class="banner-sep">&middot;</span>
+      <button id="redirect-never-btn" class="banner-link-btn">Never redirect</button>
+    </div>
+  </div>
+
+  <!-- Tab chooser modal -->
+  <div id="tab-chooser-overlay" class="modal-overlay hidden">
+    <div class="modal">
+      <div class="modal-header">
+        <span>Choose tabs to redirect</span>
+        <button id="tab-chooser-close-btn" class="modal-close">&times;</button>
       </div>
-      <div class="hr"></div>
-      <div>
-        <h3>Active rules</h3>
-        <div id="rules-body">
-          <script src="rules.js"></script>
-        </div>
+      <div id="tab-chooser-body" class="modal-body"></div>
+      <div class="modal-footer">
+        <button id="tab-chooser-confirm-btn" class="settings-btn">Redirect selected</button>
+        <button id="tab-chooser-cancel-btn" class="settings-btn settings-btn--ghost">Cancel</button>
       </div>
     </div>
-    <div id="Accounts" class="tabcontent">
-      <h3>Select a default account for all Google&trade; services</h3>
-      <div id="accounts_body">
-        <script src="accounts.js"></script>
+  </div>
+
+  <!-- Main view -->
+  <div id="main-view">
+
+    <!-- Quick-switch -->
+    <div class="section">
+      <div class="section-header">
+        <span class="section-title">Switch this tab</span>
       </div>
+      <div id="quick-switch-body"></div>
     </div>
-    <div class="footer">
-      <div>
-        You can switch accounts with the shortcuts <b>Option (Alt) + {num}</b>.
-        To edit/disable them, go to "<b>chrome://extensions/shortcuts</b>" in
-        the URL bar.
+
+    <div class="section-divider"></div>
+
+    <!-- Active rules (read-only) -->
+    <div class="section">
+      <div class="section-header">
+        <span class="section-title">Active rules</span>
+        <button id="edit-rules-btn" class="section-action" title="Edit rules">Edit</button>
       </div>
-      <br />
-      <div>
-        To support the extension,
-        <a href="https://www.buymeacoffee.com/default" target="_blank"
-          >you can buy us a coffee</a
-        >.
+      <div id="rules-summary"></div>
+    </div>
+
+  </div>
+
+  <div class="footer">
+    Switch accounts: <b>Alt+1&ndash;9</b> &nbsp;&middot;&nbsp;
+    Edit at <b>chrome://extensions/shortcuts</b>
+  </div>
+
+  <!-- Settings overlay (full popup) -->
+  <div id="settings-overlay" class="overlay hidden">
+    <div class="overlay-header">
+      <button id="settings-back-btn" class="overlay-back">&larr;</button>
+      <span id="settings-title">Settings</span>
+    </div>
+    <div id="settings-body" class="overlay-body">
+
+      <!-- Settings nav -->
+      <div id="settings-nav">
+        <button class="settings-nav-item" data-section="profiles">
+          <span class="nav-icon">&#9679;</span>
+          <span>Profiles</span>
+        </button>
+        <button class="settings-nav-item" data-section="rules">
+          <span class="nav-icon">&#9776;</span>
+          <span>Rules</span>
+        </button>
+        <button class="settings-nav-item" data-section="behaviour">
+          <span class="nav-icon">&#9881;</span>
+          <span>Behaviour</span>
+        </button>
+        <button class="settings-nav-item" data-section="data">
+          <span class="nav-icon">&#8693;</span>
+          <span>Import / Export</span>
+        </button>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- Settings sub-pages (shown inside settings-body) -->
+
+  <!-- Profiles page -->
+  <template id="tpl-profiles">
+    <div class="settings-page">
+      <div id="profiles-manager"></div>
+    </div>
+  </template>
+
+  <!-- Rules page -->
+  <template id="tpl-rules">
+    <div class="settings-page">
+      <div class="settings-page-header">
+        <span class="section-title">Rules</span>
+        <span class="scope-label" id="rules-scope-label"></span>
       </div>
-      <br />
-      <div>
-        Google&trade; is a trademark of Google Inc. Use of this trademark is subject to Google Permissions.
+      <div id="rules-body"></div>
+
+      <div class="section-divider"></div>
+      <div class="sub-section-title">Add Google service rule</div>
+      <div id="service-picker-container" class="picker-container"></div>
+      <div id="account-picker-container" class="picker-container"></div>
+      <div id="action-button-div" class="action-button"></div>
+
+      <div class="section-divider"></div>
+      <div class="sub-section-title">Add custom URL rule</div>
+      <div class="custom-rule-form">
+        <label for="custom-name">Name:</label>
+        <input type="text" id="custom-name" placeholder="e.g. My Internal Tool" />
+        <label for="custom-pattern">URL pattern (contains):</label>
+        <input type="text" id="custom-pattern" placeholder="e.g. myapp.example.com" />
+        <div id="custom-account-picker-container" class="picker-container"></div>
+        <div class="action-button">
+          <button id="add-custom-rule-btn">Add custom rule</button>
+        </div>
       </div>
     </div>
-    <template id="cell_template">
-      <a class="cell-body link">
-        <img class="cell-image" />
-        <div class="top">
-          <div class="cell-title"></div>
-          <div class="cell-description"></div>
+  </template>
+
+  <!-- Behaviour page -->
+  <template id="tpl-behaviour">
+    <div class="settings-page">
+      <label class="toggle-row">
+        <span class="toggle-label">
+          <span class="toggle-label-text">Enforce account on pre-cached URLs</span>
+          <span class="toggle-label-desc">Strip <code>/u/N</code> and <code>authuser</code> from autocompleted URLs and re-evaluate.</span>
+        </span>
+        <span class="toggle-switch">
+          <input type="checkbox" id="enforce-precached-toggle" />
+          <span class="toggle-slider"></span>
+        </span>
+      </label>
+
+      <div class="setting-group">
+        <span class="toggle-label-text">On profile switch</span>
+        <span class="toggle-label-desc">What to do with open Google tabs when you switch profiles.</span>
+        <div class="segmented-control" id="profile-switch-control">
+          <button class="seg-option" data-value="ask">Ask</button>
+          <button class="seg-option" data-value="always">Always redirect</button>
+          <button class="seg-option" data-value="never">Never redirect</button>
         </div>
-        <div class="cell-corner"></div>
-      </a>
-    </template>
-  </section>
+      </div>
+      <div id="behaviour-status" class="settings-status"></div>
+    </div>
+  </template>
+
+  <!-- Import/Export page -->
+  <template id="tpl-data">
+    <div class="settings-page">
+      <p class="settings-desc">Export all profiles and rules as JSON, or restore from a backup.</p>
+      <div class="settings-buttons">
+        <button id="export-btn" class="settings-btn">Export</button>
+        <button id="import-btn" class="settings-btn">Import</button>
+        <input type="file" id="import-file" accept=".json" style="display:none" />
+      </div>
+      <div id="settings-status" class="settings-status"></div>
+      <div class="section-divider"></div>
+      <p class="settings-desc">
+        Version 3.0 &mdash; Forked and improved from
+        <a href="https://default.wtf/" target="_blank">Uptech</a>.
+        BSD 3-Clause License.
+      </p>
+    </div>
+  </template>
+
+  <!-- Profile edit modal (used on top of settings) -->
+  <div id="profile-modal-overlay" class="modal-overlay hidden">
+    <div class="modal">
+      <div class="modal-header">
+        <span id="modal-title">Edit Profile</span>
+        <button id="modal-close-btn" class="modal-close">&times;</button>
+      </div>
+      <div id="modal-body"></div>
+    </div>
+  </div>
+
+  <script src="utils.js"></script>
+  <script src="app.js"></script>
+  <script src="rules.js"></script>
+  <script src="profiles.js"></script>
 </body>
+</html>
diff --git a/profiles.js b/profiles.js
new file mode 100644
index 0000000..7f7782e
--- /dev/null
+++ b/profiles.js
@@ -0,0 +1,310 @@
+// Profiles manager — rendered inside settings overlay when profiles section is opened
+
+function renderProfilesManager() {
+  const container = document.getElementById("profiles-manager");
+  if (!container) return;
+  container.innerHTML = "";
+
+  const list = document.createElement("div");
+  list.className = "profile-list";
+
+  for (const profile of App.profiles) {
+    list.appendChild(makeProfileCard(profile));
+  }
+  container.appendChild(list);
+
+  const addBtn = document.createElement("button");
+  addBtn.className = "settings-btn add-profile-btn";
+  addBtn.textContent = "+ New profile";
+  addBtn.onclick = () => showCreateProfileModal();
+  container.appendChild(addBtn);
+}
+
+function makeProfileCard(profile) {
+  const isDefault = profile.id === DEFAULT_PROFILE_ID;
+  const isActive  = profile.id === App.activeProfileId;
+
+  const card = document.createElement("div");
+  card.className = "profile-card" + (isActive ? " profile-card--active" : "");
+
+  // Left: color dot
+  const dot = document.createElement("span");
+  dot.className = "profile-dot";
+  dot.style.background = profile.color;
+  card.appendChild(dot);
+
+  // Center: name + meta
+  const info = document.createElement("div");
+  info.className = "profile-card-info";
+
+  const nameRow = document.createElement("div");
+  nameRow.className = "profile-card-name-row";
+  const name = document.createElement("span");
+  name.className = "profile-card-name";
+  name.textContent = profile.name;
+  nameRow.appendChild(name);
+
+  if (isActive) {
+    const badge = document.createElement("span");
+    badge.className = "profile-badge profile-badge--active";
+    badge.textContent = "active";
+    nameRow.appendChild(badge);
+  }
+  if (isDefault) {
+    const badge = document.createElement("span");
+    badge.className = "profile-badge profile-badge--default";
+    badge.textContent = "default";
+    nameRow.appendChild(badge);
+  }
+  info.appendChild(nameRow);
+
+  // Meta: default account + rule count
+  const meta = document.createElement("div");
+  meta.className = "profile-card-meta";
+  const defAcct = profile.defaultAccount ?? 0;
+  const acctInfo = App.accounts[defAcct];
+  const n = (profile.rules ?? []).length;
+  meta.textContent = (acctInfo ? acctInfo.email : `Account #${defAcct + 1}`)
+    + " · " + (n === 0 ? "no rules" : `${n} rule${n > 1 ? "s" : ""}`);
+  info.appendChild(meta);
+
+  card.appendChild(info);
+
+  // Right: actions
+  const actions = document.createElement("div");
+  actions.className = "profile-card-actions";
+
+  if (!isActive) {
+    const activateBtn = document.createElement("button");
+    activateBtn.className = "profile-action-btn profile-action-btn--activate";
+    activateBtn.textContent = "Activate";
+    activateBtn.onclick = (e) => {
+      e.stopPropagation();
+      switchActiveProfile(profile.id);
+    };
+    actions.appendChild(activateBtn);
+  }
+
+  const editBtn = document.createElement("button");
+  editBtn.className = "profile-action-btn";
+  editBtn.textContent = "Edit";
+  editBtn.onclick = (e) => {
+    e.stopPropagation();
+    showEditProfileModal(profile);
+  };
+  actions.appendChild(editBtn);
+
+  const dupBtn = document.createElement("button");
+  dupBtn.className = "profile-action-btn";
+  dupBtn.textContent = "Duplicate";
+  dupBtn.onclick = (e) => {
+    e.stopPropagation();
+    duplicateProfile(profile);
+  };
+  actions.appendChild(dupBtn);
+
+  if (!isDefault) {
+    const delBtn = document.createElement("button");
+    delBtn.className = "profile-action-btn profile-action-btn--delete";
+    delBtn.textContent = "Delete";
+    delBtn.onclick = (e) => {
+      e.stopPropagation();
+      deleteProfile(profile.id);
+    };
+    actions.appendChild(delBtn);
+  }
+
+  card.appendChild(actions);
+  return card;
+}
+
+// ─── Create profile modal ────────────────────────────────────────────────────
+
+function showCreateProfileModal() {
+  document.getElementById("modal-title").textContent = "New Profile";
+  const modalBody = document.getElementById("modal-body");
+  modalBody.innerHTML = "";
+  openProfileModal();
+
+  const form = buildProfileForm({
+    name: "",
+    color: PROFILE_COLORS[App.profiles.length % PROFILE_COLORS.length],
+    defaultAccount: 0,
+    onSave: (name, color, defaultAccount) => {
+      const newProfile = makeProfile(name, color, { defaultAccount });
+      App.profiles.push(newProfile);
+      App.saveProfiles(() => {
+        closeProfileModal();
+        renderProfilesManager();
+        renderProfileBar();
+        window.dispatchEvent(new CustomEvent("app:updated"));
+      });
+    },
+    onCancel: closeProfileModal,
+  });
+  modalBody.appendChild(form);
+}
+
+// ─── Edit profile modal ──────────────────────────────────────────────────────
+
+function showEditProfileModal(profile) {
+  document.getElementById("modal-title").textContent = `Edit: ${profile.name}`;
+  const modalBody = document.getElementById("modal-body");
+  modalBody.innerHTML = "";
+  openProfileModal();
+
+  const form = buildProfileForm({
+    name: profile.name,
+    color: profile.color,
+    defaultAccount: profile.defaultAccount ?? 0,
+    isDefault: profile.id === DEFAULT_PROFILE_ID,
+    onSave: (name, color, defaultAccount) => {
+      profile.name = name;
+      profile.color = color;
+      profile.defaultAccount = defaultAccount;
+      App.saveProfiles(() => {
+        closeProfileModal();
+        renderProfilesManager();
+        renderProfileBar();
+        renderRulesSummary();
+        window.dispatchEvent(new CustomEvent("app:updated"));
+      });
+    },
+    onCancel: closeProfileModal,
+  });
+  modalBody.appendChild(form);
+}
+
+// ─── Shared form builder ──────────────────────────────────────────────────────
+
+function buildProfileForm({ name, color, defaultAccount, isDefault, onSave, onCancel }) {
+  const form = document.createElement("div");
+  form.className = "profile-form";
+
+  // Name
+  const nameLabel = document.createElement("label");
+  nameLabel.textContent = "Name:";
+  const nameInput = document.createElement("input");
+  nameInput.type = "text";
+  nameInput.value = name;
+  nameInput.placeholder = "Profile name";
+  nameInput.className = "profile-form-input";
+  nameInput.disabled = isDefault;
+  form.appendChild(nameLabel);
+  form.appendChild(nameInput);
+
+  // Color
+  const colorLabel = document.createElement("label");
+  colorLabel.textContent = "Color:";
+  const colorRow = document.createElement("div");
+  colorRow.className = "color-picker-row";
+  let selectedColor = color;
+  for (const c of PROFILE_COLORS) {
+    const swatch = document.createElement("button");
+    swatch.className = "color-swatch" + (c === selectedColor ? " selected" : "");
+    swatch.style.background = c;
+    swatch.onclick = () => {
+      selectedColor = c;
+      colorRow.querySelectorAll(".color-swatch").forEach(s => s.classList.remove("selected"));
+      swatch.classList.add("selected");
+    };
+    colorRow.appendChild(swatch);
+  }
+  form.appendChild(colorLabel);
+  form.appendChild(colorRow);
+
+  // Default account
+  const acctLabel = document.createElement("label");
+  acctLabel.textContent = "Default account:";
+  const acctSelect = document.createElement("select");
+  acctSelect.className = "profile-form-select";
+  let selectedDefaultAccount = defaultAccount ?? 0;
+
+  if (App.accounts.length) {
+    for (const a of App.accounts) {
+      const opt = document.createElement("option");
+      opt.value = a.index;
+      opt.textContent = `${a.index + 1}) ${a.email}`;
+      if (a.index === selectedDefaultAccount) opt.selected = true;
+      acctSelect.appendChild(opt);
+    }
+  } else {
+    const opt = document.createElement("option");
+    opt.value = "0";
+    opt.textContent = "Open a Google page to detect accounts";
+    opt.disabled = true;
+    opt.selected = true;
+    acctSelect.appendChild(opt);
+  }
+  acctSelect.onchange = () => { selectedDefaultAccount = parseInt(acctSelect.value) || 0; };
+  form.appendChild(acctLabel);
+  form.appendChild(acctSelect);
+
+  // Buttons
+  const btnRow = document.createElement("div");
+  btnRow.className = "profile-form-buttons";
+
+  const saveBtn = document.createElement("button");
+  saveBtn.className = "settings-btn";
+  saveBtn.textContent = "Save";
+  saveBtn.onclick = () => {
+    const n = nameInput.value.trim();
+    if (!n) { nameInput.focus(); return; }
+    onSave(isDefault ? "Default" : n, selectedColor, selectedDefaultAccount);
+  };
+
+  const cancelBtn = document.createElement("button");
+  cancelBtn.className = "settings-btn settings-btn--ghost";
+  cancelBtn.textContent = "Cancel";
+  cancelBtn.onclick = onCancel;
+
+  btnRow.appendChild(saveBtn);
+  btnRow.appendChild(cancelBtn);
+  form.appendChild(btnRow);
+
+  return form;
+}
+
+// ─── Duplicate ────────────────────────────────────────────────────────────────
+
+function duplicateProfile(profile) {
+  const copy = makeProfile(
+    `${profile.name} (copy)`,
+    PROFILE_COLORS[App.profiles.length % PROFILE_COLORS.length],
+    {
+      defaultAccount: profile.defaultAccount,
+      rules: JSON.parse(JSON.stringify(profile.rules ?? [])),
+      customServices: JSON.parse(JSON.stringify(profile.customServices ?? [])),
+    }
+  );
+  App.profiles.push(copy);
+  App.saveProfiles(() => {
+    renderProfilesManager();
+    renderProfileBar();
+    window.dispatchEvent(new CustomEvent("app:updated"));
+  });
+}
+
+// ─── Delete ───────────────────────────────────────────────────────────────────
+
+function deleteProfile(profileId) {
+  if (!confirm("Delete this profile? Its rules will be removed.")) return;
+  App.profiles = App.profiles.filter(p => p.id !== profileId);
+  if (App.activeProfileId === profileId) {
+    App.activeProfileId = DEFAULT_PROFILE_ID;
+    App.viewedProfileId = DEFAULT_PROFILE_ID;
+    chrome.runtime.sendMessage({ type: "set_active_profile", profileId: DEFAULT_PROFILE_ID, redirectTabs: false });
+  }
+  App.saveProfiles(() => {
+    renderProfilesManager();
+    renderProfileBar();
+    renderRulesSummary();
+    window.dispatchEvent(new CustomEvent("app:updated"));
+  });
+}
+
+// ─── Listen for updates ──────────────────────────────────────────────────────
+
+window.addEventListener("app:updated", () => {
+  if (document.getElementById("profiles-manager")) renderProfilesManager();
+});
diff --git a/rules.js b/rules.js
index faa2d40..95b8e2e 100644
--- a/rules.js
+++ b/rules.js
@@ -1,158 +1,337 @@
-function setupUI() {
-  getRules((data) => {
-    const rules = data.rules ?? [];
-    const allServices = allSupportedGoogleServices();
-    const rulesUrls = rules.map((r) => r.serviceUrl);
-    let services = allServices.filter((s) => rulesUrls.indexOf(s.url) === -1);
-    services.sort((a, b) =>
-      a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1
-    );
-    allAccounts((data) => {
-      const accounts = data.accounts ?? [];
-      renderAddNewRule(services, accounts);
-    });
-    renderRulesList(rules);
-  });
+// Rules editor — rendered inside settings overlay when rules section is opened
+
+function renderRulesUI() {
+  renderRulesList();
+  renderAddServiceRule();
+  renderAddCustomRule();
 }
 
-chrome.storage.onChanged.addListener(function (changes, namespace) {
-  if ("accounts" in changes) {
-    setupUI();
+// ─── Active rules list ────────────────────────────────────────────────────────
+
+function renderRulesList() {
+  const body = document.getElementById("rules-body");
+  if (!body) return;
+  body.innerHTML = "";
+  const profile = App.viewedProfile;
+  if (!profile) return;
+
+  const isDefault = profile.id === DEFAULT_PROFILE_ID;
+  const resolved  = resolveRules(profile, App.defaultProfile);
+
+  if (resolved.length === 0) {
+    const empty = document.createElement("p");
+    empty.className = "empty-state";
+    empty.textContent = isDefault
+      ? "No rules yet. Add one below."
+      : "No rules. Add one below, or rules are inherited from Default.";
+    body.appendChild(empty);
+    return;
   }
-});
-
-function renderAddNewRule(services, accounts) {
-  const servicePickerDiv = document.getElementById("service-picker-container");
-  servicePickerDiv.innerHTML = "";
-  const serviceArrowPicker = document.createElement("img");
-  serviceArrowPicker.src = "images/arrow.svg";
-  const servicePicker = document.createElement("select");
-  servicePicker.id = "service-picker";
-  const serviceLabel = document.createElement("label");
-  serviceLabel.appendChild(document.createTextNode("Select a Google service:"));
-  serviceLabel.setAttribute("for", "service-picker");
-  servicePickerDiv.appendChild(serviceLabel);
-  for (const service of services) {
-    const opt = document.createElement("option");
-    opt.appendChild(document.createTextNode(service.title));
-    opt.value = JSON.stringify(service);
-    servicePicker.appendChild(opt);
+
+  for (const rule of resolved) {
+    const inherited = rule._inherited === true;
+    const row = document.createElement("div");
+    row.className = "rule-row" + (inherited ? " rule-row--inherited" : "");
+
+    const img = document.createElement("img");
+    img.className = "rule-img";
+    img.src = rule.serviceImg ?? "./images/logos/google.png";
+
+    const info = document.createElement("div");
+    info.className = "rule-info";
+
+    const title = document.createElement("div");
+    title.className = "rule-title";
+    title.textContent = rule.isCustom
+      ? `${rule.serviceTitle} (custom)`
+      : (rule.serviceTitle || rule.serviceUrl);
+
+    const desc = document.createElement("div");
+    desc.className = "rule-desc";
+    desc.textContent = rule.accountEmail;
+
+    if (inherited) {
+      const tag = document.createElement("span");
+      tag.className = "inherited-tag";
+      tag.textContent = "inherited";
+      desc.appendChild(document.createTextNode(" "));
+      desc.appendChild(tag);
+    }
+
+    info.appendChild(title);
+    info.appendChild(desc);
+
+    const actions = document.createElement("div");
+    actions.className = "rule-actions";
+
+    if (inherited) {
+      const overrideBtn = document.createElement("button");
+      overrideBtn.className = "rule-btn rule-btn--override";
+      overrideBtn.textContent = "Override";
+      overrideBtn.title = "Add a rule in this profile that overrides the Default";
+      overrideBtn.onclick = () => openOverrideDialog(rule);
+      actions.appendChild(overrideBtn);
+    } else {
+      const delBtn = document.createElement("button");
+      delBtn.className = "rule-btn rule-btn--delete";
+      delBtn.innerHTML = deleteIcon();
+      delBtn.title = "Remove rule";
+      delBtn.onclick = () => deleteRule(rule);
+      actions.appendChild(delBtn);
+    }
+
+    row.appendChild(img);
+    row.appendChild(info);
+    row.appendChild(actions);
+    body.appendChild(row);
   }
-  servicePickerDiv.appendChild(servicePicker);
-  servicePickerDiv.appendChild(serviceArrowPicker);
-
-  const accountPickerDiv = document.getElementById("account-picker-container");
-  accountPickerDiv.innerHTML = "";
-  const accountArrowPicker = document.createElement("img");
-  accountArrowPicker.src = "images/arrow.svg";
-  const accountPicker = document.createElement("select");
-  accountPicker.id = "account-picker";
-  const accountLabel = document.createElement("label");
-  accountLabel.setAttribute("for", "account-picker");
-  accountLabel.appendChild(
-    document.createTextNode("Select a default account:")
-  );
-  accountPickerDiv.appendChild(accountLabel);
-  for (const account of accounts) {
+}
+
+function openOverrideDialog(inheritedRule) {
+  const accounts = App.accounts;
+  if (!accounts.length) return;
+
+  const body = document.getElementById("rules-body");
+  if (!body) return;
+  const existing = document.getElementById("override-picker");
+  if (existing) existing.remove();
+
+  const picker = document.createElement("div");
+  picker.id = "override-picker";
+  picker.className = "override-picker";
+
+  const label = document.createElement("p");
+  label.textContent = `Override "${inheritedRule.serviceTitle}" for profile "${App.viewedProfile.name}":`;
+  picker.appendChild(label);
+
+  const select = document.createElement("select");
+  for (const acc of accounts) {
     const opt = document.createElement("option");
-    opt.appendChild(
-      document.createTextNode(`${account.index + 1}) ${account.email}`)
-    );
-    opt.value = JSON.stringify(account);
-    accountPicker.appendChild(opt);
+    opt.value = JSON.stringify(acc);
+    opt.textContent = `${acc.index + 1}) ${acc.email}`;
+    if (acc.index === inheritedRule.accountId) opt.selected = true;
+    select.appendChild(opt);
   }
-  accountPickerDiv.appendChild(accountPicker);
-  accountPickerDiv.appendChild(accountArrowPicker);
-
-  const actionButtonDiv = document.getElementById("action-button-div");
-  actionButtonDiv.innerHTML = "";
-  const button = document.createElement("button");
-  button.appendChild(document.createTextNode("Add new rule"));
-  button.onclick = function () {
-    const serviceValue = JSON.parse(
-      servicePicker.options[servicePicker.selectedIndex].value
-    );
-    const serviceName = serviceValue.name;
-    const serviceTitle = serviceValue.title;
-    const serviceUrl = serviceValue.url;
-    const serviceImg = serviceValue.img;
-
-    const accountValue = JSON.parse(
-      accountPicker.options[accountPicker.selectedIndex].value
-    );
-    const accountId = accountValue.index;
-    const accountEmail = accountValue.email;
-
-    addRule(
-      {
-        serviceName,
-        serviceTitle,
-        serviceUrl,
-        serviceImg,
-        accountEmail,
-        accountId,
-      },
-      function () {
-        setupUI();
-      }
-    );
+  picker.appendChild(select);
+
+  const btnRow = document.createElement("div");
+  btnRow.style.display = "flex"; btnRow.style.gap = "8px"; btnRow.style.marginTop = "8px";
+
+  const confirm = document.createElement("button");
+  confirm.className = "settings-btn";
+  confirm.textContent = "Save override";
+  confirm.onclick = () => {
+    const acc = JSON.parse(select.value);
+    addRuleToProfile({
+      serviceName:   inheritedRule.serviceName,
+      serviceTitle:  inheritedRule.serviceTitle,
+      serviceUrl:    inheritedRule.serviceUrl,
+      serviceImg:    inheritedRule.serviceImg,
+      accountEmail:  acc.email,
+      accountId:     acc.index,
+      isCustom:      inheritedRule.isCustom,
+      pattern:       inheritedRule.pattern,
+    });
+    picker.remove();
   };
-  actionButtonDiv.appendChild(button);
+  const cancel = document.createElement("button");
+  cancel.className = "settings-btn settings-btn--ghost";
+  cancel.textContent = "Cancel";
+  cancel.onclick = () => picker.remove();
+  btnRow.appendChild(confirm);
+  btnRow.appendChild(cancel);
+  picker.appendChild(btnRow);
+
+  body.insertAdjacentElement("afterend", picker);
 }
 
-function renderRulesList(rules) {
-  const rulesBodyDiv = document.getElementById("rules-body");
-  rulesBodyDiv.innerHTML = "";
-  for (const rule of rules) {
-    const t = document.getElementById("cell_template").content;
-    const cellContent = document.importNode(t, true);
-    cellContent.querySelector(".cell-image").src =
-      rule.serviceImg ?? "./images/logos/google.png";
-    cellContent.querySelector(".cell-title").textContent = rule.serviceUrl;
-    cellContent.querySelector(".cell-description").textContent =
-      rule.accountEmail;
-
-    const cornerDiv = cellContent.querySelector(".cell-corner");
-    const button = document.createElement("button");
-    button.className = "cell-delete";
-    button.innerHTML = `
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="12" cy="12" r="12" fill="white"/>
-        <path d="M8.36477 9.11767H15.6354V15.6308C15.6354 16.8288 14.6642 17.8 13.4661 17.8H10.534C9.33597 17.8 8.36477 16.8288 8.36477 15.6308V9.11767Z" stroke="#8B8792" stroke-width="1.2"/>
-        <rect x="10.5883" y="11.3415" width="0.705882" height="3.52941" rx="0.352941" fill="#8B8792"/>
-        <rect x="12.7058" y="11.3415" width="0.705882" height="3.52941" rx="0.352941" fill="#8B8792"/>
-        <path d="M6.35291 8.97921C6.35291 8.72431 6.55954 8.51767 6.81444 8.51767H17.1855C17.4404 8.51767 17.647 8.72431 17.647 8.97921C17.647 9.23411 17.4404 9.44075 17.1855 9.44075H6.81444C6.55954 9.44075 6.35291 9.23411 6.35291 8.97921Z" fill="#8B8792"/>
-        <path d="M9.28226 8.51773V9.11773H9.88226H14.1176H14.7176V8.51773C14.7176 7.01682 13.5008 5.80009 11.9999 5.80009C10.499 5.80009 9.28226 7.01682 9.28226 8.51773Z" stroke="#8B8792" stroke-width="1.2"/>
-      </svg>
-    `;
-
-    button.onclick = function () {
-      deleteRule(rule.serviceUrl, function () {
-        setupUI();
-      });
-    };
-    cornerDiv.appendChild(button);
-    rulesBodyDiv.appendChild(cellContent);
+// ─── Add Google service rule ──────────────────────────────────────────────────
+
+function renderAddServiceRule() {
+  const profile     = App.viewedProfile;
+  const allServices = allSupportedGoogleServices();
+  const usedUrls    = new Set((profile?.rules ?? []).filter(r => !r.isCustom).map(r => r.serviceUrl));
+  const available   = allServices.filter(s => !usedUrls.has(s.url))
+                                  .sort((a, b) => a.title.localeCompare(b.title));
+  const accounts    = App.accounts;
+
+  const svc = document.getElementById("service-picker-container");
+  if (!svc) return;
+  svc.innerHTML = "";
+
+  const svcLabel = document.createElement("label");
+  svcLabel.textContent = "Google service:";
+  svc.appendChild(svcLabel);
+
+  const search = document.createElement("input");
+  search.type = "text";
+  search.placeholder = "Search services...";
+  search.className = "service-search";
+  svc.appendChild(search);
+
+  const arrow1 = document.createElement("img");
+  arrow1.src = "images/arrow.svg";
+  const svcSelect = document.createElement("select");
+  svcSelect.id = "service-picker";
+
+  function fill(filter) {
+    svcSelect.innerHTML = "";
+    const filtered = filter
+      ? available.filter(s => s.title.toLowerCase().includes(filter.toLowerCase()))
+      : available;
+    for (const s of filtered) {
+      const opt = document.createElement("option");
+      opt.value = JSON.stringify(s);
+      opt.textContent = s.title;
+      svcSelect.appendChild(opt);
+    }
+  }
+  fill("");
+  search.addEventListener("input", () => fill(search.value));
+  svc.appendChild(svcSelect);
+  svc.appendChild(arrow1);
+
+  const acc = document.getElementById("account-picker-container");
+  if (!acc) return;
+  acc.innerHTML = "";
+
+  const accLabel = document.createElement("label");
+  accLabel.textContent = "Account:";
+  acc.appendChild(accLabel);
+
+  const arrow2 = document.createElement("img");
+  arrow2.src = "images/arrow.svg";
+  const accSelect = document.createElement("select");
+  accSelect.id = "account-picker";
+  for (const a of accounts) {
+    const opt = document.createElement("option");
+    opt.value = JSON.stringify(a);
+    opt.textContent = `${a.index + 1}) ${a.email}`;
+    accSelect.appendChild(opt);
   }
+  acc.appendChild(accSelect);
+  acc.appendChild(arrow2);
+
+  const btnDiv = document.getElementById("action-button-div");
+  if (!btnDiv) return;
+  btnDiv.innerHTML = "";
+  const btn = document.createElement("button");
+  btn.textContent = "Add rule";
+  btn.onclick = () => {
+    if (!svcSelect.options.length || !accSelect.options.length) return;
+    const s = JSON.parse(svcSelect.options[svcSelect.selectedIndex].value);
+    const a = JSON.parse(accSelect.options[accSelect.selectedIndex].value);
+    addRuleToProfile({
+      serviceName:  s.name,
+      serviceTitle: s.title,
+      serviceUrl:   s.url,
+      serviceImg:   s.img,
+      accountEmail: a.email,
+      accountId:    a.index,
+    });
+  };
+  btnDiv.appendChild(btn);
 }
 
-function deleteRule(serviceUrl, callback) {
-  getRules((data) => {
-    const rules = (data.rules ?? []).filter((r) => r.serviceUrl !== serviceUrl);
-    SyncStorage.store({ rules }, callback);
+// ─── Add custom URL rule ──────────────────────────────────────────────────────
+
+function renderAddCustomRule() {
+  const container = document.getElementById("custom-account-picker-container");
+  if (!container) return;
+  container.innerHTML = "";
+  const accounts = App.accounts;
+
+  const label = document.createElement("label");
+  label.textContent = "Account:";
+  container.appendChild(label);
+
+  const arrow = document.createElement("img");
+  arrow.src = "images/arrow.svg";
+  const select = document.createElement("select");
+  select.id = "custom-account-picker";
+  for (const a of accounts) {
+    const opt = document.createElement("option");
+    opt.value = JSON.stringify(a);
+    opt.textContent = `${a.index + 1}) ${a.email}`;
+    select.appendChild(opt);
+  }
+  container.appendChild(select);
+  container.appendChild(arrow);
+
+  const addBtn = document.getElementById("add-custom-rule-btn");
+  if (!addBtn) return;
+  const newBtn = addBtn.cloneNode(true);
+  addBtn.parentNode.replaceChild(newBtn, addBtn);
+
+  newBtn.addEventListener("click", () => {
+    const name    = document.getElementById("custom-name").value.trim();
+    const pattern = document.getElementById("custom-pattern").value.trim();
+    if (!name || !pattern) return;
+    if (!select.options.length) return;
+
+    const a = JSON.parse(select.options[select.selectedIndex].value);
+    const escaped = pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+    addRuleToProfile({
+      serviceName:  name,
+      serviceTitle: name,
+      serviceUrl:   pattern,
+      serviceImg:   "./images/logos/google.png",
+      accountEmail: a.email,
+      accountId:    a.index,
+      isCustom:     true,
+      pattern:      escaped,
+    });
+
+    document.getElementById("custom-name").value    = "";
+    document.getElementById("custom-pattern").value = "";
   });
 }
 
-function getRules(callback) {
-  SyncStorage.get("rules", callback);
+// ─── Mutations ────────────────────────────────────────────────────────────────
+
+function addRuleToProfile(rule) {
+  const profile = App.viewedProfile;
+  if (!profile) return;
+  profile.rules = profile.rules ?? [];
+  const idx = profile.rules.findIndex(r => r.serviceUrl === rule.serviceUrl && Boolean(r.isCustom) === Boolean(rule.isCustom));
+  if (idx >= 0) profile.rules[idx] = rule;
+  else profile.rules.push(rule);
+
+  App.saveProfiles(() => {
+    renderRulesUI();
+    renderRulesSummary();
+  });
 }
 
-function addRule(rule, callback) {
-  SyncStorage.get("rules", (data) => {
-    const rules = data.rules ?? [];
-    rules.push(rule);
-    SyncStorage.store({ rules }, callback);
+function deleteRule(rule) {
+  const profile = App.viewedProfile;
+  if (!profile) return;
+  profile.rules = (profile.rules ?? []).filter(r => {
+    if (rule.isCustom) return !(r.isCustom && r.serviceUrl === rule.serviceUrl);
+    return r.serviceUrl !== rule.serviceUrl;
+  });
+  App.saveProfiles(() => {
+    renderRulesUI();
+    renderRulesSummary();
   });
 }
 
-setupUI();
+// ─── Icons ────────────────────────────────────────────────────────────────────
+
+function deleteIcon() {
+  return `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="12" cy="12" r="12" fill="white"/>
+    <path d="M8.36477 9.11767H15.6354V15.6308C15.6354 16.8288 14.6642 17.8 13.4661 17.8H10.534C9.33597 17.8 8.36477 16.8288 8.36477 15.6308V9.11767Z" stroke="#8B8792" stroke-width="1.2"/>
+    <rect x="10.5883" y="11.3415" width="0.705882" height="3.52941" rx="0.352941" fill="#8B8792"/>
+    <rect x="12.7058" y="11.3415" width="0.705882" height="3.52941" rx="0.352941" fill="#8B8792"/>
+    <path d="M6.35291 8.97921C6.35291 8.72431 6.55954 8.51767 6.81444 8.51767H17.1855C17.4404 8.51767 17.647 8.72431 17.647 8.97921C17.647 9.23411 17.4404 9.44075 17.1855 9.44075H6.81444C6.55954 9.44075 6.35291 9.23411 6.35291 8.97921Z" fill="#8B8792"/>
+    <path d="M9.28226 8.51773V9.11773H9.88226H14.1176H14.7176V8.51773C14.7176 7.01682 13.5008 5.80009 11.9999 5.80009C10.499 5.80009 9.28226 7.01682 9.28226 8.51773Z" stroke="#8B8792" stroke-width="1.2"/>
+  </svg>`;
+}
+
+// ─── Init ─────────────────────────────────────────────────────────────────────
+
+window.addEventListener("app:rules-opened",     renderRulesUI);
+window.addEventListener("app:profile-switched",  () => { if (document.getElementById("rules-body")) renderRulesUI(); });
+window.addEventListener("app:updated",           () => { if (document.getElementById("rules-body")) renderRulesUI(); });
diff --git a/service-worker.js b/service-worker.js
new file mode 100644
index 0000000..2d36972
--- /dev/null
+++ b/service-worker.js
@@ -0,0 +1,289 @@
+importScripts("utils.js");
+
+// ─── In-memory state ─────────────────────────────────────────────────────────
+
+let _profiles = [];
+let _activeProfileId = DEFAULT_PROFILE_ID;
+let _accounts = [];
+let _settings = { ...DEFAULT_SETTINGS };
+
+function activeProfile() {
+  return getActiveProfile(_profiles, _activeProfileId);
+}
+function defaultProfile() {
+  return getDefaultProfile(_profiles);
+}
+
+function loadState(cb) {
+  loadProfiles((data) => {
+    _profiles = data.profiles;
+    _activeProfileId = data.activeProfileId;
+    _accounts = data.accounts;
+    loadSettings((s) => {
+      _settings = s;
+      if (cb) cb();
+    });
+  });
+}
+
+loadState();
+
+chrome.storage.onChanged.addListener(() => loadState());
+
+// ─── Install ─────────────────────────────────────────────────────────────────
+
+chrome.runtime.onInstalled.addListener((details) => {
+  if (details.reason !== "install") return;
+  SyncStorage.get(["profiles", "activeProfileId"], (data) => {
+    const toStore = {};
+    if (!data.profiles) {
+      toStore.profiles = [makeDefaultProfile()];
+    }
+    if (!data.activeProfileId) {
+      toStore.activeProfileId = DEFAULT_PROFILE_ID;
+    }
+    if (Object.keys(toStore).length) SyncStorage.store(toStore);
+  });
+});
+
+// ─── Migrate legacy data (rules / defaultAccount at root) ────────────────────
+
+chrome.runtime.onInstalled.addListener((details) => {
+  if (details.reason !== "update") return;
+  SyncStorage.get(["rules", "defaultAccount", "customServices", "profiles"], (data) => {
+    if (data.profiles) return; // already migrated
+    const legacy = makeDefaultProfile();
+    if (Array.isArray(data.rules)) legacy.rules = data.rules;
+    if (typeof data.defaultAccount === "number") legacy.defaultAccount = data.defaultAccount;
+    if (Array.isArray(data.customServices)) legacy.customServices = data.customServices;
+    SyncStorage.store({ profiles: [legacy], activeProfileId: DEFAULT_PROFILE_ID });
+  });
+});
+
+// ─── Message handlers ─────────────────────────────────────────────────────────
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+
+  // Fetch Google accounts
+  if (message === "fetch_google_accounts") {
+    const url = "https://accounts.google.com/ListAccounts?gpsia=1&source=ogb&mo=1&origin=https://accounts.google.com";
+    fetch(url)
+      .then(r => r.text())
+      .then((rawText) => {
+        const scriptMatch = rawText.match(/<script[^>]*>([\s\S]*?)<\/script>/i);
+        if (!scriptMatch) throw new Error("no script");
+        const dataStr = scriptMatch[1].split("'")[1];
+        if (!dataStr) throw new Error("no data");
+        return dataStr
+          .replace(/\\x([0-9a-fA-F]{2})/g, (_, p) => String.fromCharCode(parseInt(p, 16)))
+          .replace(/\\\//g, "/")
+          .replace(/\\n/g, "");
+      })
+      .then(t => JSON.parse(t))
+      .then(sendResponse)
+      .catch(() => sendResponse(null));
+    return true;
+  }
+
+  // Switch active profile
+  if (message?.type === "set_active_profile") {
+    const { profileId, redirectTabs, tabIds } = message;
+    SyncStorage.store({ activeProfileId: profileId }, () => {
+      _activeProfileId = profileId;
+      if (redirectTabs) {
+        if (tabIds && tabIds.length > 0) {
+          redirectSpecificTabs(tabIds);
+        } else {
+          redirectAllGoogleTabs();
+        }
+      }
+      sendResponse({ success: true });
+    });
+    return true;
+  }
+
+  // Get all open Google tab URLs (so popup can ask user)
+  if (message === "get_google_tabs") {
+    chrome.tabs.query({}, (tabs) => {
+      const googleTabs = tabs.filter(t => t.url && isGoogleServiceUrl(t.url));
+      sendResponse(googleTabs.map(t => ({ id: t.id, url: t.url, title: t.title })));
+    });
+    return true;
+  }
+
+  // Export
+  if (message === "export_settings") {
+    SyncStorage.get(["profiles", "activeProfileId"], (data) => {
+      sendResponse({
+        version: "2.0",
+        exportedAt: new Date().toISOString(),
+        profiles: data.profiles ?? [],
+        activeProfileId: data.activeProfileId ?? DEFAULT_PROFILE_ID,
+      });
+    });
+    return true;
+  }
+
+  // Save behaviour settings
+  if (message?.type === "save_settings") {
+    saveSettings(message.data, () => {
+      _settings = { ...DEFAULT_SETTINGS, ...message.data };
+      sendResponse({ success: true });
+    });
+    return true;
+  }
+
+  // Import
+  if (message?.type === "import_settings") {
+    const s = message.data;
+    if (!s || !Array.isArray(s.profiles)) {
+      sendResponse({ success: false, error: "Invalid settings file" });
+      return true;
+    }
+    SyncStorage.store({
+      profiles: s.profiles,
+      activeProfileId: s.activeProfileId ?? DEFAULT_PROFILE_ID,
+    }, () => sendResponse({ success: true }));
+    return true;
+  }
+});
+
+// ─── Redirect tabs to active profile ──────────────────────────────────────────
+
+function redirectAllGoogleTabs() {
+  const prof = activeProfile();
+  const defProf = defaultProfile();
+  const resolvedRules = resolveRules(prof, defProf);
+
+  chrome.tabs.query({}, (tabs) => {
+    for (const tab of tabs) {
+      if (!tab.url || !isGoogleServiceUrl(tab.url)) continue;
+      const accountId = getAccountForUrl(tab.url, resolvedRules, prof.defaultAccount);
+      const redirectUrl = convertToRedirectUrl(tab.url, accountId);
+      if (redirectUrl && isAccountLoggedIn(accountId)) {
+        chrome.tabs.update(tab.id, { url: redirectUrl });
+      }
+    }
+  });
+}
+
+function redirectSpecificTabs(tabIds) {
+  if (!tabIds || tabIds.length === 0) return;
+  const prof = activeProfile();
+  const defProf = defaultProfile();
+  const resolvedRules = resolveRules(prof, defProf);
+  const tabIdSet = new Set(tabIds);
+
+  chrome.tabs.query({}, (tabs) => {
+    for (const tab of tabs) {
+      if (!tabIdSet.has(tab.id)) continue;
+      if (!tab.url || !isGoogleServiceUrl(tab.url)) continue;
+      const accountId = getAccountForUrl(tab.url, resolvedRules, prof.defaultAccount);
+      const redirectUrl = convertToRedirectUrl(tab.url, accountId);
+      if (redirectUrl && isAccountLoggedIn(accountId)) {
+        chrome.tabs.update(tab.id, { url: redirectUrl });
+      }
+    }
+  });
+}
+
+// ─── Navigation interception ──────────────────────────────────────────────────
+
+let last4Redirects = [];
+
+function detectCycle(url) {
+  const now = Date.now();
+  last4Redirects = last4Redirects.filter(r => now - r.time < 250);
+  if (last4Redirects.filter(r => r.url === url).length >= 3) return true;
+  last4Redirects.push({ time: now, url });
+  return false;
+}
+
+function handleNavigation(tabId, url) {
+  if (!isGoogleServiceUrl(url) && !isCustomServiceUrl(url)) return;
+
+  if (_settings.enforceOnPrecachedUrls) {
+    // Strip /u/N path segments and authuser params so we re-evaluate from scratch
+    try {
+      const u = new URL(url);
+      u.pathname = u.pathname.replace(/\/u\/\d+\/?/i, "/");
+      u.searchParams.delete("authuser");
+      url = u.toString();
+    } catch {}
+  } else {
+    if (/authuser/i.test(url)) return;
+    if (/\/u\/\d+/i.test(url)) return;
+  }
+
+  if (url.includes("docs.google") && url.includes("/create")) return;
+
+  const prof = activeProfile();
+  const defProf = defaultProfile();
+  const resolvedRules = resolveRules(prof, defProf);
+  const accountId = getAccountForUrl(url, resolvedRules, prof.defaultAccount);
+  const redirectUrl = convertToRedirectUrl(url, accountId);
+
+  if (redirectUrl && isAccountLoggedIn(accountId)) {
+    if (detectCycle(redirectUrl)) return;
+    chrome.tabs.update(tabId, { url: redirectUrl });
+  }
+}
+
+chrome.webNavigation.onBeforeNavigate.addListener((details) => {
+  if (details.frameId !== 0) return;
+  handleNavigation(details.tabId, details.url);
+});
+
+// ─── Keyboard shortcuts ───────────────────────────────────────────────────────
+
+chrome.commands.onCommand.addListener((command) => {
+  if (!command?.startsWith("switch_to_ga_")) return;
+  const accNum = parseInt(command.slice(-1)) - 1;
+  if (isNaN(accNum)) return;
+  if (_accounts.length > accNum) redirectCurrentTab(accNum);
+});
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function isAccountLoggedIn(accountIndex) {
+  if (accountIndex === 0) return true;
+  return Boolean(_accounts[accountIndex]?.isLoggedIn);
+}
+
+function isCustomServiceUrl(url) {
+  const prof = activeProfile();
+  const defProf = defaultProfile();
+  const allCustom = [
+    ...(prof.customServices ?? []),
+    ...((prof.id !== DEFAULT_PROFILE_ID ? defProf?.customServices : null) ?? []),
+  ];
+  return allCustom.some(cs => { try { return new RegExp(cs.pattern, "i").test(url); } catch { return false; } });
+}
+
+function getAccountForUrl(url, rules, fallbackAccount) {
+  for (const rule of rules) {
+    if (rule.isCustom && rule.pattern) {
+      try { if (new RegExp(rule.pattern, "i").test(url)) return rule.accountId; } catch {}
+      continue;
+    }
+    const name = rule.serviceName?.toLowerCase();
+    if (!name) continue;
+
+    if (name === "youtube") {
+      if (/^https?:\/\/(www\.)?youtube\.com/i.test(url) || /^https?:\/\/(www\.)?youtu\.be/i.test(url)) return rule.accountId;
+      continue;
+    }
+    if (name === "blogger") {
+      if (/^https?:\/\/(www\.)?blogger\.com/i.test(url) || /^https?:\/\/.*\.blogspot\.com/i.test(url)) return rule.accountId;
+      continue;
+    }
+    if (name === "search") {
+      if (/^https?:\/\/(www\.)?google\.co(m|\.[a-z]{2,3})\/?(\?|$|#|\/search|\/webhp)/i.test(url)) return rule.accountId;
+      continue;
+    }
+
+    const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    if (new RegExp(`^https?:\\/\\/[^?&]*${escaped}\\.google\\.co.*`, "is").test(url)) return rule.accountId;
+  }
+  return fallbackAccount;
+}
diff --git a/styles.css b/styles.css
index 679b709..c5bfb8e 100644
--- a/styles.css
+++ b/styles.css
@@ -1,314 +1,881 @@
-/* create color variables */
+/* ─── Variables ─────────────────────────────────────────────────────────────── */
 :root {
-  --color-gray: #8b8792;
-  --color-orange: #d66d58;
-  --color-orange-hover: #f9f4f3;
-  --color-button-hover: #f48b76;
-  --color-header-bg: #f9f9f9;
-  --color-title: #2b2337;
-  --color-bg: #ffffff;
-  --color-header-border: #f0f0f0;
-  --color-delete-bg: #f5f5f5;
-  --color-select-hover: #eee9e8;
-}
-
-/* colors for the dark mode */
+  --orange:        #d66d58;
+  --orange-hover:  #f48b76;
+  --orange-bg:     #f9f4f3;
+  --gray:          #8b8792;
+  --title:         #2b2337;
+  --bg:            #ffffff;
+  --header-bg:     #f9f9f9;
+  --border:        #f0f0f0;
+  --input-bg:      #f5f3f7;
+  --input-border:  #e0dce4;
+  --select-hover:  #eee9e8;
+  --success:       #4caf50;
+  --error:         #e53935;
+  --inherited-bg:  #f0f7ff;
+  --inherited-border: #c5dcf5;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-gray: #8b8792;
-    --color-orange: #d66d58;
-    --color-orange-hover: #332c3f;
-    --color-header-bg: #312a3d;
-    --color-title: #ffffff;
-    --color-bg: #2b2437;
-    --color-header-border: #433c4d;
-    --color-delete-bg: #fff;
-    --color-select-hover: #50495c;
+    --orange-bg:    #332c3f;
+    --title:        #ffffff;
+    --bg:           #2b2437;
+    --header-bg:    #312a3d;
+    --border:       #433c4d;
+    --input-bg:     #3a3347;
+    --input-border: #50495c;
+    --select-hover: #50495c;
+    --inherited-bg: #1e2a3a;
+    --inherited-border: #2c4a6e;
   }
+  .picker-container img { filter: invert(100%); }
+  a { color: var(--orange); }
+}
 
-  .picker-container img {
-    /* change color select arrow */
-    filter: invert(100%);
-  }
+/* ─── Reset ────────────────────────────────────────────────────────────────── */
+* { box-sizing: border-box; }
+html { overflow: hidden; margin: 0; }
+body { overflow: hidden; margin: 0; background: var(--bg); width: 480px; }
+button { border: none; outline: none; cursor: pointer; background: none; }
+select { -webkit-appearance: none; -moz-appearance: none; outline: none; }
+input  { font-family: inherit; }
+.link { color: inherit; text-decoration: none; }
+.hidden { display: none !important; }
 
-  a {
-    color: var(--color-orange);
-  }
+/* ─── Header ───────────────────────────────────────────────────────────────── */
+header {
+  background: var(--header-bg);
+  border-bottom: 1px solid var(--border);
+  height: 44px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  font-size: 13px;
+  color: var(--title);
+  gap: 8px;
 }
+header img { height: 20px; }
 
-.link {
-  color: inherit; /* blue colors for links too */
-  text-decoration: inherit; /* no underline */
+/* ─── Profile bar ──────────────────────────────────────────────────────────── */
+#profile-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: var(--header-bg);
+  border-bottom: 1px solid var(--border);
+  gap: 8px;
 }
 
-html {
-  overflow: hidden;
+#profile-chips {
+  display: flex;
+  gap: 6px;
+  flex: 1;
+  overflow-x: auto;
+  flex-wrap: nowrap;
 }
 
-body {
-  overflow: hidden;
-  margin: 0;
-  background-color: var(--color-bg);
+.profile-chip {
+  padding: 5px 14px;
+  border-radius: 100px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--gray);
+  background: var(--input-bg);
+  border: 2px solid transparent;
+  white-space: nowrap;
+  transition: all 0.15s;
+  cursor: pointer;
+}
+.profile-chip:hover { border-color: var(--chip-color, var(--orange)); }
+.profile-chip.active {
+  background: var(--bg);
+  border-color: var(--chip-color, var(--orange));
+  color: var(--chip-color, var(--orange));
+}
+
+#settings-btn {
+  font-size: 18px;
+  color: var(--gray);
+  padding: 4px;
+  flex-shrink: 0;
+  transition: color 0.15s;
 }
+#settings-btn:hover { color: var(--orange); }
 
-/* Parts of the following code comes (mostly) directly from Google's own calculated (not source) styles, for hopeful consistency, with some removed bloat and the exclusion of copyrighted resources like Google Sans. I then adjusted the styles to use new flex-box positioning to solve some issues with resizing. */
-button {
+/* ─── Redirect banner ──────────────────────────────────────────────────────── */
+.redirect-banner {
+  background: #fff8e1;
+  border-bottom: 1px solid #ffe082;
+  padding: 8px 14px;
+  font-size: 12px;
+  color: #5d4037;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 10px;
+}
+@media (prefers-color-scheme: dark) {
+  .redirect-banner { background: #3e3000; border-color: #6d5500; color: #ffe082; }
+}
+.redirect-banner-actions { display: flex; gap: 6px; }
+.banner-btn {
+  padding: 4px 12px;
+  border-radius: 100px;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.15s;
+}
+.banner-btn:hover { opacity: 0.85; }
+.banner-btn-yes { background: var(--orange); color: #fff; }
+.banner-btn-choose { background: var(--input-bg); color: var(--title); }
+.banner-btn-no  { background: var(--input-bg); color: var(--title); }
+.redirect-banner-remember {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  width: 100%;
+}
+.banner-link-btn {
+  font-size: 10px;
+  color: var(--gray);
+  text-decoration: underline;
+  background: none;
   border: none;
-  outline: none;
   cursor: pointer;
+  padding: 0;
 }
+.banner-link-btn:hover { color: var(--title); }
+.banner-sep { color: var(--gray); font-size: 10px; }
 
-select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  position: relative;
-  outline: none;
+/* ─── Main view ────────────────────────────────────────────────────────────── */
+#main-view {
+  width: 100%;
+  max-height: 600px;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
-header {
-  background-color: var(--color-header-bg);
-  border-bottom: 1px solid var(--color-header-border);
-  height: 48px;
-  padding-left: 17px;
+.section {
+  padding: 0;
+}
+
+.section-header {
   display: flex;
   align-items: center;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 18px;
-  color: var(--color-title);
+  justify-content: space-between;
+  padding: 10px 16px 6px;
+}
+
+.section-title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--gray);
 }
 
-header img {
-  margin-right: 8px;
+.section-action {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--orange);
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: 4px;
+  transition: background 0.15s;
 }
+.section-action:hover { background: var(--orange-bg); }
 
-.content {
-  background-color: var(--color-bg);
+.section-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 4px 16px;
 }
 
-.cell-body {
-  font: 13px/27px Roboto, RobotoDraft, Arial, sans-serif;
-  line-height: normal;
-  font-family: "Segoe UI", "Roboto", arial, sans-serif;
-  outline-offset: -2px;
-  white-space: nowrap;
-  color: inherit;
-  border: none;
-  cursor: pointer;
-  height: 35px;
-  outline: 0;
-  padding: 12px 20px;
-  border-top: 0;
+/* ─── Quick-switch ─────────────────────────────────────────────────────────── */
+.qs-row {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  position: relative;
+  gap: 10px;
+  padding: 6px 16px;
+  cursor: pointer;
+  transition: background 0.12s;
 }
+.qs-row:hover { background: var(--orange-bg); }
+.qs-row--current { background: var(--orange-bg); }
 
-.cell-image {
+.qs-avatar {
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--input-bg);
+  color: var(--gray);
+  font-size: 13px;
+  font-weight: 700;
   overflow: hidden;
-  border: none;
-  vertical-align: top;
-  height: 32px;
-  width: 32px;
+}
+.qs-avatar img { width: 100%; height: 100%; object-fit: cover; }
+
+.qs-info { flex: 1; min-width: 0; }
+.qs-name {
+  font: 600 12px/16px Roboto, Arial, sans-serif;
+  color: var(--title);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.qs-email {
+  font: 400 11px/14px Roboto, Arial, sans-serif;
+  color: var(--gray);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.qs-check { width: 16px; height: 16px; flex-shrink: 0; }
+.qs-badge {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--gray);
+}
+
+.qs-empty {
+  color: var(--gray);
+  font-size: 12px;
+  text-align: center;
+  padding: 8px 16px;
+}
+
+/* ─── Rules summary (main view, read-only) ─────────────────────────────────── */
+.rule-summary-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 16px;
+  font-size: 12px;
+}
+.rule-summary-row--inherited { opacity: 0.6; }
+
+.rule-summary-icon {
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
   flex-shrink: 0;
 }
 
-.top {
-  margin: 0 0 0 12px;
+.rule-summary-name {
+  font-weight: 600;
+  color: var(--title);
+  white-space: nowrap;
+}
+
+.rule-summary-acct {
+  flex: 1;
+  text-align: right;
+  color: var(--gray);
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: rtl;
+}
+
+.rule-summary-inherited {
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  background: var(--inherited-border);
+  color: #1565c0;
+  padding: 1px 4px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+@media (prefers-color-scheme: dark) {
+  .rule-summary-inherited { color: #90caf9; background: #1a3a5c; }
+}
+
+/* ─── Footer ───────────────────────────────────────────────────────────────── */
+.footer {
+  color: var(--gray);
+  padding: 8px 16px;
+  font-size: 10px;
+  line-height: 16px;
+  border-top: 1px solid var(--border);
+}
+
+/* ─── Settings overlay ─────────────────────────────────────────────────────── */
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--bg);
+  z-index: 50;
   display: flex;
   flex-direction: column;
-  flex-shrink: 1;
+  animation: slideIn 0.15s ease-out;
+}
+@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
 
-  min-width: 0;
+.overlay-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--header-bg);
+  flex-shrink: 0;
 }
 
-.cell-title {
-  font: bold 14px/18px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
-  color: var(--color-title);
+.overlay-back {
+  font-size: 18px;
+  color: var(--gray);
+  padding: 2px 4px;
+  cursor: pointer;
+  transition: color 0.15s;
 }
+.overlay-back:hover { color: var(--orange); }
 
-.serviceName {
-  color: #3c4043;
-  font: 500 14px/18px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
-  letter-spacing: 0.25px;
-  text-align: inherit;
+.overlay-header span {
+  font: 700 14px/20px Roboto, Arial, sans-serif;
+  color: var(--title);
 }
 
-.cell-description {
-  color: #88848f;
-  font: 400 12px / 16px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
+.overlay-body {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
-.cell-corner {
-  color: var(--color-title);
-  position: absolute;
-  right: 20px;
+/* ─── Settings nav ─────────────────────────────────────────────────────────── */
+#settings-nav {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 0;
 }
 
-/* .cell-body:active, */
-/* .cell-body:focus, */
-.cell-body:hover {
-  background-color: var(--color-orange-hover);
+.settings-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  font: 600 14px/20px Roboto, Arial, sans-serif;
+  color: var(--title);
+  cursor: pointer;
+  transition: background 0.12s;
+  text-align: left;
 }
-/* Style the tab */
-.tab {
-  overflow: hidden;
-  width: 100%;
+.settings-nav-item:hover { background: var(--orange-bg); }
+
+.nav-icon {
+  width: 24px;
+  text-align: center;
+  font-size: 16px;
+  color: var(--gray);
+}
+
+/* ─── Settings pages ───────────────────────────────────────────────────────── */
+.settings-page {
+  padding: 16px 20px;
+}
+
+.settings-page-header {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.sub-section-title {
+  font: 600 13px/18px Roboto, Arial, sans-serif;
+  color: var(--title);
+  padding: 0 20px;
+  margin-bottom: 8px;
 }
 
-/* Style the buttons that are used to open the tab content */
-.tab button {
-  background-color: inherit;
-  float: left;
+.scope-label {
+  font-size: 11px;
+  font-weight: 700;
   text-transform: uppercase;
-  padding: 14px 16px;
-  transition: all 0.2s linear;
-  width: 50%;
-  color: var(--color-gray);
-  font: 900 11px/18px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
-  height: 54px;
+  letter-spacing: 0.5px;
+  color: var(--orange);
 }
 
-/* Change background color of buttons on hover */
-.tab button:hover {
-  background-color: var(--color-orange-hover);
+/* ─── Settings controls ────────────────────────────────────────────────────── */
+.settings-desc { color: var(--gray); font-size: 13px; line-height: 18px; margin: 0 0 16px; }
+.settings-desc a { color: var(--orange); }
+.settings-buttons { display: flex; gap: 10px; }
+
+.settings-btn {
+  background: var(--orange);
+  color: #fff;
+  border-radius: 100px;
+  padding: 10px 18px;
+  font: 700 12px/1 Roboto, Arial, sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  transition: background 0.15s;
+  cursor: pointer;
+  white-space: nowrap;
 }
+.settings-btn:hover { background: var(--orange-hover); }
+.settings-btn--ghost { background: var(--input-bg); color: var(--title); }
+.settings-btn--ghost:hover { background: var(--select-hover); }
 
-/* Create an active/current tablink class */
-.tab button.active {
-  color: var(--color-orange);
+.settings-status { margin-top: 12px; font-size: 13px; min-height: 18px; }
+.settings-status.success { color: var(--success); }
+.settings-status.error   { color: var(--error); }
+
+/* ─── Toggle switch ────────────────────────────────────────────────────────── */
+.toggle-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  cursor: pointer;
+  margin-bottom: 16px;
+}
+.toggle-label { display: flex; flex-direction: column; gap: 3px; flex: 1; }
+.toggle-label-text { font-size: 13px; font-weight: 600; color: var(--title); }
+.toggle-label-desc { font-size: 11px; color: var(--gray); line-height: 1.4; }
+.toggle-label-desc code {
+  font-size: 11px;
+  background: var(--input-bg);
+  border: 1px solid var(--input-border);
+  border-radius: 3px;
+  padding: 0 3px;
+}
+.toggle-switch {
   position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+  flex-shrink: 0;
+  margin-top: 1px;
 }
-
-.tab button.active::before {
+.toggle-switch input { opacity: 0; width: 0; height: 0; }
+.toggle-slider {
   position: absolute;
+  inset: 0;
+  background: var(--input-border);
+  border-radius: 20px;
+  transition: background 0.2s;
+}
+.toggle-slider::before {
   content: "";
-  height: 4px;
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform 0.2s;
+}
+.toggle-switch input:checked + .toggle-slider { background: var(--orange); }
+.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }
+
+/* ─── Segmented control ────────────────────────────────────────────────────── */
+.setting-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
+
+.segmented-control {
+  display: flex;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--input-border);
+  margin-top: 4px;
+}
+.seg-option {
+  flex: 1;
+  padding: 7px 6px;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  background: var(--input-bg);
+  color: var(--gray);
+  border: none;
+  transition: all 0.15s;
+}
+.seg-option:not(:last-child) { border-right: 1px solid var(--input-border); }
+.seg-option:hover { background: var(--select-hover); }
+.seg-option.active { background: var(--orange); color: #fff; }
+
+/* ─── Profile list ─────────────────────────────────────────────────────────── */
+.profile-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
+
+.profile-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 2px solid var(--border);
+  background: var(--input-bg);
+  transition: border-color 0.15s;
+}
+.profile-card--active { border-color: var(--orange); }
+
+.profile-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
+
+.profile-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+
+.profile-card-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.profile-card-name { font: 700 13px/18px Roboto, Arial, sans-serif; color: var(--title); }
+
+.profile-badge {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+.profile-badge--active  { background: var(--orange); color: #fff; }
+.profile-badge--default { background: var(--input-border); color: var(--gray); }
+
+.profile-card-meta {
+  font-size: 11px;
+  color: var(--gray);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.profile-card-actions { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
+
+.profile-action-btn {
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  background: var(--bg);
+  color: var(--title);
+  border: 1px solid var(--border);
+  transition: all 0.15s;
+}
+.profile-action-btn:hover { background: var(--select-hover); }
+.profile-action-btn--activate { background: var(--orange); color: #fff; border-color: var(--orange); }
+.profile-action-btn--activate:hover { background: var(--orange-hover); }
+.profile-action-btn--delete { color: var(--error); border-color: currentColor; }
+.profile-action-btn--delete:hover { background: #fce4e4; }
+@media (prefers-color-scheme: dark) {
+  .profile-action-btn--delete:hover { background: #3e1515; }
+}
+
+.add-profile-btn { width: 100%; }
+
+/* ─── Profile form ─────────────────────────────────────────────────────────── */
+.profile-form {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.profile-form label { font-size: 13px; font-weight: 600; color: var(--title); }
+.profile-form-input {
+  background: var(--input-bg);
+  border: 1px solid var(--input-border);
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 14px;
+  color: var(--title);
+  outline: none;
+  transition: border-color 0.2s;
+}
+.profile-form-input:focus { border-color: var(--orange); }
+.profile-form-input:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.profile-form-select {
+  background: var(--input-bg);
+  border: 1px solid var(--input-border);
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--title);
+  cursor: pointer;
+}
+.profile-form-select:focus { border-color: var(--orange); }
+
+.color-picker-row { display: flex; gap: 8px; flex-wrap: wrap; }
+.color-swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: transform 0.15s, border-color 0.15s;
+}
+.color-swatch:hover { transform: scale(1.15); }
+.color-swatch.selected { border-color: var(--title); transform: scale(1.15); }
+
+.profile-form-buttons { display: flex; gap: 8px; margin-top: 4px; }
+
+/* ─── Modal (profile edit on top of settings) ──────────────────────────────── */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  padding: 16px;
+}
+
+/* Tab chooser overlay pins to top so tall list has maximum room */
+#tab-chooser-overlay {
+  align-items: flex-start;
+  padding: 12px;
+}
+#tab-chooser-overlay .modal {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100% - 24px);
+  overflow: hidden;
+}
+#tab-chooser-body {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 80px;
+}
+
+.modal {
+  background: var(--bg);
+  border-radius: 12px;
   width: 100%;
-  top: 0;
-  left: 0;
-  background-color: var(--color-orange);
-  animation: fadeEffect 0.5s; /* Fading effect takes 1 second */
+  max-width: 480px;
+  max-height: calc(100% - 32px);
+  overflow-y: auto;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
 }
 
-/* Style the tab content */
-.tabcontent {
-  display: none;
-  min-width: 328px;
-  padding-bottom: 14px;
-  animation: fadeEffect 1s; /* Fading effect takes 1 second */
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid var(--border);
+  font: 700 14px/20px Roboto, Arial, sans-serif;
+  color: var(--title);
+  flex-shrink: 0;
 }
+.modal-close {
+  font-size: 20px;
+  color: var(--gray);
+  line-height: 1;
+  padding: 0 4px;
+}
+.modal-close:hover { color: var(--title); }
+#modal-body { padding: 4px 0 16px; }
 
-.tabcontent h3 {
-  color: var(--color-title);
-  font-weight: bold;
-  font-size: 16px;
-  line-height: 22px;
-  margin: 24px 20px;
+.modal-footer {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--header-bg);
+  flex-shrink: 0;
 }
 
-/* Go from zero to full opacity */
-@keyframes fadeEffect {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+/* ─── Rules editor (inside settings) ───────────────────────────────────────── */
+.rule-row {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  gap: 10px;
+  border-bottom: 1px solid var(--border);
+}
+.rule-row:last-child { border-bottom: none; }
+.rule-row--inherited {
+  background: var(--inherited-bg);
+  border-left: 3px solid var(--inherited-border);
+  padding-left: 8px;
+  margin-left: -20px;
+  padding-right: 0;
+  margin-right: -20px;
+  padding: 8px 20px 8px 17px;
+}
+.rule-img { width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0; }
+.rule-info { flex: 1; min-width: 0; }
+.rule-title { font: 600 13px/18px Roboto, Arial, sans-serif; color: var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.rule-desc { font: 400 11px/16px Roboto, Arial, sans-serif; color: var(--gray); display: flex; align-items: center; gap: 4px; }
+.inherited-tag {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  background: var(--inherited-border);
+  color: #1565c0;
+  padding: 1px 5px;
+  border-radius: 4px;
+}
+@media (prefers-color-scheme: dark) {
+  .inherited-tag { color: #90caf9; background: #1a3a5c; }
+}
+.rule-actions { display: flex; gap: 4px; flex-shrink: 0; }
+.rule-btn { padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.15s; }
+.rule-btn--override { background: var(--input-bg); color: var(--title); }
+.rule-btn--override:hover { background: var(--select-hover); }
+.rule-btn--delete { background: transparent; padding: 2px; }
+.rule-btn--delete:hover circle { fill: #fc676a; }
+.rule-btn--delete:hover rect, .rule-btn--delete:hover path { fill: #fff; stroke: #fff; }
+
+.override-picker {
+  margin: 8px 0;
+  padding: 12px;
+  background: var(--input-bg);
+  border-radius: 8px;
+  border: 1px solid var(--input-border);
+  font-size: 13px;
+  color: var(--title);
+}
+.override-picker p { margin: 0 0 8px; font-weight: 600; }
+.override-picker select {
+  width: 100%;
+  background: var(--bg);
+  color: var(--title);
+  border: 1px solid var(--input-border);
+  border-radius: 6px;
+  padding: 6px 10px;
+  font-size: 13px;
 }
 
+/* ─── Picker containers ────────────────────────────────────────────────────── */
 .picker-container {
   display: flex;
   flex-direction: column;
   padding: 0 20px;
+  margin-bottom: 10px;
+  position: relative;
   font-size: 14px;
-  line-height: 18px;
-  color: var(--color-title);
   font-weight: 600;
-  margin-bottom: 20px;
-  position: relative;
+  color: var(--title);
 }
-
+.picker-container label { margin-bottom: 6px; font-size: 13px; }
 .picker-container select {
-  background: var(--color-orange-hover);
-  color: var(--color-title);
+  background: var(--orange-bg);
+  color: var(--title);
   border-radius: 100px;
-  text-indent: 20px;
-  height: 42px;
+  text-indent: 16px;
+  height: 38px;
   border: none;
-  font-size: 14px;
-  line-height: 18px;
-  color: var(--color-title);
+  font-size: 13px;
   font-weight: 600;
   cursor: pointer;
-  transition: all 0.2s linear;
-}
-
-.picker-container select:hover {
-  background-color: var(--color-select-hover);
-}
-
-.picker-container label {
-  margin-bottom: 10px;
+  transition: background 0.15s;
 }
+.picker-container select:hover { background: var(--select-hover); }
+.picker-container img { position: absolute; right: 36px; top: 65%; pointer-events: none; }
 
-.picker-container img {
-  position: absolute;
-  right: 40px;
-  top: 65%;
+.service-search {
+  background: var(--input-bg);
+  border: 1px solid var(--input-border);
+  border-radius: 100px;
+  padding: 7px 14px;
+  font-size: 13px;
+  color: var(--title);
+  outline: none;
+  margin-bottom: 6px;
+  width: 100%;
+  transition: border-color 0.2s;
 }
+.service-search:focus { border-color: var(--orange); }
+.service-search::placeholder { color: var(--gray); }
 
 .action-button button {
-  background: #d66d58;
+  background: var(--orange);
   border-radius: 100px;
-  width: 278px;
-  height: 46px;
-  margin: 4px 20px 12px 20px;
-  font-weight: 900;
-  font-size: 11px;
-  line-height: 18px;
-  text-align: center;
-  letter-spacing: 0.01em;
+  width: calc(100% - 40px);
+  height: 40px;
+  margin: 4px 20px 8px;
+  font: 900 11px/18px Roboto, Arial, sans-serif;
   text-transform: uppercase;
-  color: #ffffff;
-  transition: all 0.2s linear;
+  letter-spacing: 0.5px;
+  color: #fff;
+  transition: background 0.15s;
 }
+.action-button button:hover { background: var(--orange-hover); }
 
-.action-button button:hover {
-  background-color: var(--color-button-hover);
+.custom-rule-form {
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
-
-.hr {
-  background: var(--color-header-border);
-  margin: 20px;
-  height: 1px;
+.custom-rule-form label { font-size: 13px; font-weight: 600; color: var(--title); }
+.custom-rule-form input[type="text"] {
+  background: var(--input-bg);
+  border: 1px solid var(--input-border);
+  border-radius: 100px;
+  padding: 8px 14px;
+  font-size: 13px;
+  color: var(--title);
+  outline: none;
+  transition: border-color 0.2s;
 }
+.custom-rule-form input[type="text"]:focus { border-color: var(--orange); }
+.custom-rule-form input[type="text"]::placeholder { color: var(--gray); }
+.custom-rule-form .picker-container { padding: 0; margin-bottom: 0; }
+.custom-rule-form .action-button button { margin: 4px 0 0; width: 100%; }
 
-.cell-delete {
-  background-color: transparent;
-  height: 24px;
-  width: 24px;
+/* ─── Tab chooser ──────────────────────────────────────────────────────────── */
+.tab-chooser-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.12s;
 }
+.tab-chooser-item:hover { background: var(--orange-bg); }
+.tab-chooser-item:last-child { border-bottom: none; }
 
-.cell-delete circle {
-  fill: var(--color-delete-bg);
+.tab-chooser-checkbox {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--input-border);
+  border-radius: 4px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.12s;
 }
-
-.cell-delete:hover circle {
-  fill: #fc676a;
+.tab-chooser-checkbox.checked {
+  background: var(--orange);
+  border-color: var(--orange);
+  color: #fff;
+  font-weight: bold;
 }
 
-.cell-delete:hover rect {
-  fill: #fff;
+.tab-chooser-info { flex: 1; min-width: 0; }
+.tab-chooser-title {
+  font: 600 13px/18px Roboto, Arial, sans-serif;
+  color: var(--title);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-
-.cell-delete:hover path {
-  stroke: #fff;
+.tab-chooser-url {
+  font: 400 11px/14px Roboto, Arial, sans-serif;
+  color: var(--gray);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.footer {
-  color: var(--color-title);
-  padding: 0 14px 14px 14px;
-}
+/* ─── Misc ─────────────────────────────────────────────────────────────────── */
+.empty-state { color: var(--gray); font-size: 13px; text-align: center; padding: 12px 0; margin: 0; }
diff --git a/utils.js b/utils.js
index 0f04e7d..e9dccfe 100644
--- a/utils.js
+++ b/utils.js
@@ -1,338 +1,216 @@
-// Full list of Google Services subdomains - https://gist.github.com/abuvanth/b9fcbaf7c77c2954f96c6e556138ffe8
+// ─── URL matching ────────────────────────────────────────────────────────────
+
 function isGoogleServiceUrl(url) {
   return (
-    /^https?:\/\/[^?&]*(?:mail|drive|calendar|meet|docs|admin|photos|translate|keep|hangouts|chat|workspace|maps|news|ads|ediscovery|jamboard|earth|podcasts|classroom|business|myaccount|adsense|cloud|adwords|analytics|firebase|play|voice|tagmanager|duo|datastudio|optimize|merchants|finance|colab.research|contacts|script|messages|search|stadia|developers|one|chrome|books|sites|groups)\.google\.co.*/i.test(
-      url
-    ) ||
-    // test several services that witched from the patter "https://maps.google.com" -> https://www.google.com/maps
-    /^https?:\/\/(www\.)?google\.co(?:m|\.[a-z]{2,3})\/(?:maps|finance|travel|flights)/i.test(
-      url
-    )
+    /^https?:\/\/[^?&]*(?:mail|drive|calendar|meet|docs|admin|photos|translate|keep|hangouts|chat|workspace|maps|news|ads|ediscovery|jamboard|earth|podcasts|classroom|business|myaccount|adsense|cloud|adwords|analytics|firebase|play|voice|tagmanager|duo|datastudio|optimize|merchants|finance|colab\.research|contacts|script|messages|search|stadia|developers|one|chrome|books|sites|groups|blogger|gemini|notebooklm|looker)\.google\.co.*/i.test(url) ||
+    /^https?:\/\/(www\.)?google\.co(?:m|\.[a-z]{2,3})\/(?:maps|finance|travel|flights|shopping|books|scholar)/i.test(url) ||
+    /^https?:\/\/(www\.)?youtube\.com/i.test(url) ||
+    /^https?:\/\/(www\.)?youtu\.be/i.test(url) ||
+    /^https?:\/\/(www\.)?blogger\.com/i.test(url) ||
+    /^https?:\/\/.*\.blogspot\.com/i.test(url)
   );
 }
 
 function isAnyGoogleUrl(url) {
-  return /^https?:\/\/([^?&]*\.)?google\.co.*/i.test(url);
+  return (
+    /^https?:\/\/([^?&]*\.)?google\.co.*/i.test(url) ||
+    /^https?:\/\/(www\.)?youtube\.com/i.test(url) ||
+    /^https?:\/\/(www\.)?blogger\.com/i.test(url)
+  );
 }
 
-function redirectCurrectTab(defaultAccount) {
-  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-    if (tabs && tabs[0] && isGoogleServiceUrl(tabs[0].url)) {
-      const url = convertToRedirectUrl(tabs[0].url, defaultAccount);
-      if (url) {
-        chrome.tabs.update(tabs[0].id, { url });
-      }
-    }
-  });
+function convertToRedirectUrl(originalUrl, accountId) {
+  const url = new URL(originalUrl);
+  if (/youtube\.com|youtu\.be/i.test(url.hostname)) return convertAuthUserUrl(url, accountId);
+  if (/blogger\.com|blogspot\.com/i.test(url.hostname)) return convertAuthUserUrl(url, accountId);
+  return convertAuthUserUrl(url, accountId);
 }
 
-// converts the "originalUrl" to the redirectUrl
-// if defaultAccount is the same as in "?authuser={num}" or "/u/{num}" - returns null (meaning no need for redirect)
-function convertToRedirectUrl(originalUrl, defaultAccount) {
-  const url = new URL(originalUrl);
+function convertAuthUserUrl(url, accountId) {
   const params = new URLSearchParams(url.search);
-  // check if current user is not the same (?authuser={num} or /u/{num}/)
-  if (`${params.get("authuser")}` === `${defaultAccount}`) return null;
-  const uMatch = originalUrl.match(/\/u\/(\d+)\/?/i);
-  if (uMatch && uMatch[1] && `${uMatch[1]}` === `${defaultAccount}`)
-    return null;
-
-  // current user is different, change
+  if (`${params.get("authuser")}` === `${accountId}`) return null;
+  const uMatch = url.href.match(/\/u\/(\d+)\/?/i);
+  if (uMatch && uMatch[1] && `${uMatch[1]}` === `${accountId}`) return null;
   params.delete("authuser");
-  params.set("authuser", defaultAccount);
+  params.set("authuser", accountId);
   url.search = params.toString();
   return url.toString();
 }
 
-function allAccounts(callback) {
-  SyncStorage.get("accounts", callback);
+function redirectCurrentTab(accountId) {
+  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+    if (tabs && tabs[0] && isGoogleServiceUrl(tabs[0].url)) {
+      const url = convertToRedirectUrl(tabs[0].url, accountId);
+      if (url) chrome.tabs.update(tabs[0].id, { url });
+    }
+  });
 }
 
+// ─── Service catalogue ───────────────────────────────────────────────────────
+
 function allSupportedGoogleServices() {
   return [
-    {
-      name: "Calendar",
-      title: "Calendar",
-      url: "calendar.google.com",
-      img: "./images/logos/calendar.png",
-    },
-    {
-      name: "Drive",
-      title: "Drive",
-      url: "drive.google.com",
-      img: "./images/logos/drive.png",
-    },
-    {
-      name: "Maps",
-      title: "Maps",
-      url: "maps.google.com",
-      img: "./images/logos/maps.png",
-    },
-    {
-      name: "Meet",
-      title: "Meet",
-      url: "meet.google.com",
-      img: "./images/logos/meet.png",
-    },
-    {
-      name: "Mail",
-      title: "Mail",
-      url: "mail.google.com",
-      img: "./images/logos/mail.png",
-    },
-    {
-      name: "Docs",
-      title: "Docs",
-      url: "docs.google.com",
-      img: "./images/logos/docs.png",
-    },
-    {
-      name: "Admin",
-      title: "Admin",
-      url: "admin.google.com",
-      img: "./images/logos/admin.png",
-    },
-    {
-      name: "Photos",
-      title: "Photos",
-      url: "photos.google.com",
-      img: "./images/logos/photos.png",
-    },
-    {
-      name: "Translate",
-      title: "Translate",
-      url: "translate.google.com",
-      img: "./images/logos/translate.png",
-    },
-    {
-      name: "Keep",
-      title: "Keep",
-      url: "keep.google.com",
-      img: "./images/logos/keep.png",
-    },
-    {
-      name: "Hangouts",
-      title: "Hangouts",
-      url: "hangouts.google.com",
-      img: "./images/logos/hangouts.png",
-    },
-    {
-      name: "Chat",
-      title: "Chat",
-      url: "chat.google.com",
-      img: "./images/logos/chat.png",
-    },
-    {
-      name: "Workspace",
-      title: "Workspace",
-      url: "workspace.google.com",
-    },
-    {
-      name: "News",
-      title: "News",
-      url: "news.google.com",
-      img: "./images/logos/news.png",
-    },
-    {
-      name: "Ads",
-      title: "Ads",
-      url: "ads.google.com",
-      img: "./images/logos/ads.png",
-    },
-    {
-      name: "Ediscovery",
-      title: "Ediscovery (Vault)",
-      url: "ediscovery.google.com",
-      img: "./images/logos/ediscovery.png",
-    },
-    {
-      name: "Jamboard",
-      title: "Jamboard",
-      url: "jamboard.google.com",
-      img: "./images/logos/jamboard.png",
-    },
-    {
-      name: "Earth",
-      title: "Earth",
-      url: "earth.google.com",
-      img: "./images/logos/earth.png",
-    },
-    {
-      name: "Podcasts",
-      title: "Podcasts",
-      url: "podcasts.google.com",
-      img: "./images/logos/podcasts.png",
-    },
-    {
-      name: "Classroom",
-      title: "Classroom",
-      url: "classroom.google.com",
-      img: "./images/logos/classroom.png",
-    },
-    {
-      name: "Business",
-      title: "Business",
-      url: "business.google.com",
-      img: "./images/logos/business.png",
-    },
-    {
-      name: "MyAccount",
-      title: "MyAccount",
-      url: "myaccount.google.com",
-    },
-    {
-      name: "Adsense",
-      title: "Adsense",
-      url: "adsense.google.com",
-      img: "./images/logos/adsense.png",
-    },
-    {
-      name: "Adwords",
-      title: "Adwords",
-      url: "adwords.google.com",
-      img: "./images/logos/ads.png",
-    },
-    {
-      name: "Cloud",
-      title: "Cloud Console",
-      url: "console.cloud.google.com",
-      img: "./images/logos/cloud.png",
-    },
-    {
-      name: "Analytics",
-      title: "Analytics",
-      url: "analytics.google.com",
-      img: "./images/logos/analytics.png",
-    },
-    {
-      name: "Firebase",
-      title: "Firebase Console",
-      url: "console.firebase.google.com",
-      img: "./images/logos/firebase.png",
-    },
-    {
-      name: "Play",
-      title: "Google Play",
-      url: "play.google.com",
-      img: "./images/logos/play.png",
-    },
-    {
-      name: "Voice",
-      title: "Voice",
-      url: "voice.google.com",
-      img: "./images/logos/voice.png",
-    },
-    {
-      name: "TagManager",
-      title: "Tag Manager",
-      url: "tagmanager.google.com",
-      img: "./images/logos/tagmanager.png",
-    },
-    {
-      name: "Duo",
-      title: "Duo",
-      url: "duo.google.com",
-      img: "./images/logos/duo.png",
-    },
-    {
-      name: "DataStudio",
-      title: "Data Studio",
-      url: "datastudio.google.com",
-      img: "./images/logos/datastudio.png",
-    },
-    {
-      name: "Optimize",
-      title: "Optimize",
-      url: "optimize.google.com",
-      img: "./images/logos/optimize.png",
-    },
-    {
-      name: "Merchants",
-      title: "Merchant Center",
-      url: "merchants.google.com",
-      img: "./images/logos/merchants.png",
-    },
-    {
-      name: "Finance",
-      title: "Finance",
-      url: "finance.google.com",
-      img: "./images/logos/finance.png",
-    },
-    {
-      name: "Collab",
-      title: "Collab Research",
-      url: "colab.research.google.com",
-      img: "./images/logos/colab.png",
-    },
-    {
-      name: "Contacts",
-      title: "Contacts",
-      url: "contacts.google.com",
-      img: "./images/logos/contacts.png",
-    },
-    {
-      name: "Script",
-      title: "Apps Script",
-      url: "script.google.com",
-      img: "./images/logos/script.png",
-    },
-    {
-      name: "Messages",
-      title: "Messages",
-      url: "messages.google.com",
-      img: "./images/logos/messages.png",
-    },
-    {
-      name: "SearchConsole",
-      title: "Search Console",
-      url: "search.google.com",
-      img: "./images/logos/search.png",
-    },
-    {
-      name: "Stadia",
-      title: "Stadia",
-      url: "stadia.google.com",
-      img: "./images/logos/stadia.png",
-    },
-    {
-      name: "Developers",
-      title: "Developers",
-      url: "developers.google.com",
-      img: "./images/logos/developers.png",
-    },
-    {
-      name: "One",
-      title: "Google One",
-      url: "one.google.com",
-      img: "./images/logos/one.png",
-    },
-    {
-      name: "ChromeWebStore",
-      title: "Chrome Web Store",
-      url: "chrome.google.com",
-      img: "./images/logos/chrome.png",
-    },
-    {
-      name: "Sites",
-      title: "Sites",
-      url: "sites.google.com",
-      img: "./images/logos/sites.png",
-    },
-    {
-      name: "Groups",
-      title: "Groups",
-      url: "groups.google.com",
-      img: "./images/logos/groups.png",
-    },
+    { name: "YouTube",        title: "YouTube",          url: "youtube.com",                      img: "./images/logos/youtube.png",     category: "media" },
+    { name: "Calendar",       title: "Calendar",         url: "calendar.google.com",              img: "./images/logos/calendar.png",    category: "productivity" },
+    { name: "Drive",          title: "Drive",            url: "drive.google.com",                 img: "./images/logos/drive.png",       category: "productivity" },
+    { name: "Maps",           title: "Maps",             url: "maps.google.com",                  img: "./images/logos/maps.png",        category: "utilities" },
+    { name: "Meet",           title: "Meet",             url: "meet.google.com",                  img: "./images/logos/meet.png",        category: "communication" },
+    { name: "Mail",           title: "Gmail",            url: "mail.google.com",                  img: "./images/logos/mail.png",        category: "communication" },
+    { name: "Docs",           title: "Docs",             url: "docs.google.com",                  img: "./images/logos/docs.png",        category: "productivity" },
+    { name: "Admin",          title: "Admin",            url: "admin.google.com",                 img: "./images/logos/admin.png",       category: "admin" },
+    { name: "Photos",         title: "Photos",           url: "photos.google.com",                img: "./images/logos/photos.png",      category: "media" },
+    { name: "Translate",      title: "Translate",        url: "translate.google.com",             img: "./images/logos/translate.png",   category: "utilities" },
+    { name: "Keep",           title: "Keep",             url: "keep.google.com",                  img: "./images/logos/keep.png",        category: "productivity" },
+    { name: "Chat",           title: "Chat",             url: "chat.google.com",                  img: "./images/logos/chat.png",        category: "communication" },
+    { name: "Gemini",         title: "Gemini (AI)",      url: "gemini.google.com",                img: "./images/logos/google.png",      category: "utilities" },
+    { name: "NotebookLM",     title: "NotebookLM",       url: "notebooklm.google.com",            img: "./images/logos/google.png",      category: "productivity" },
+    { name: "Search",         title: "Google Search",    url: "google.com",                       img: "./images/logos/search.png",      category: "utilities" },
+    { name: "Shopping",       title: "Shopping",         url: "shopping.google.com",              img: "./images/logos/google.png",      category: "utilities" },
+    { name: "Scholar",        title: "Scholar",          url: "scholar.google.com",               img: "./images/logos/google.png",      category: "utilities" },
+    { name: "News",           title: "News",             url: "news.google.com",                  img: "./images/logos/news.png",        category: "media" },
+    { name: "Ads",            title: "Ads",              url: "ads.google.com",                   img: "./images/logos/ads.png",         category: "marketing" },
+    { name: "Ediscovery",     title: "Ediscovery (Vault)",url: "ediscovery.google.com",           img: "./images/logos/ediscovery.png",  category: "admin" },
+    { name: "Earth",          title: "Earth",            url: "earth.google.com",                 img: "./images/logos/earth.png",       category: "utilities" },
+    { name: "Podcasts",       title: "Podcasts",         url: "podcasts.google.com",              img: "./images/logos/podcasts.png",    category: "media" },
+    { name: "Classroom",      title: "Classroom",        url: "classroom.google.com",             img: "./images/logos/classroom.png",   category: "productivity" },
+    { name: "Business",       title: "Business Profile", url: "business.google.com",              img: "./images/logos/business.png",    category: "marketing" },
+    { name: "MyAccount",      title: "My Account",       url: "myaccount.google.com",             img: "./images/logos/google.png",      category: "admin" },
+    { name: "Adsense",        title: "AdSense",          url: "adsense.google.com",               img: "./images/logos/adsense.png",     category: "marketing" },
+    { name: "Adwords",        title: "AdWords",          url: "adwords.google.com",               img: "./images/logos/ads.png",         category: "marketing" },
+    { name: "Cloud",          title: "Cloud Console",    url: "console.cloud.google.com",         img: "./images/logos/cloud.png",       category: "developer" },
+    { name: "Analytics",      title: "Analytics",        url: "analytics.google.com",             img: "./images/logos/analytics.png",   category: "marketing" },
+    { name: "Firebase",       title: "Firebase Console", url: "console.firebase.google.com",      img: "./images/logos/firebase.png",    category: "developer" },
+    { name: "Play",           title: "Google Play",      url: "play.google.com",                  img: "./images/logos/play.png",        category: "media" },
+    { name: "Voice",          title: "Voice",            url: "voice.google.com",                 img: "./images/logos/voice.png",       category: "communication" },
+    { name: "TagManager",     title: "Tag Manager",      url: "tagmanager.google.com",            img: "./images/logos/tagmanager.png",  category: "marketing" },
+    { name: "DataStudio",     title: "Looker Studio",    url: "datastudio.google.com",            img: "./images/logos/datastudio.png",  category: "marketing" },
+    { name: "Merchants",      title: "Merchant Center",  url: "merchants.google.com",             img: "./images/logos/merchants.png",   category: "marketing" },
+    { name: "Finance",        title: "Finance",          url: "finance.google.com",               img: "./images/logos/finance.png",     category: "utilities" },
+    { name: "Collab",         title: "Colab",            url: "colab.research.google.com",        img: "./images/logos/google.png",      category: "developer" },
+    { name: "Contacts",       title: "Contacts",         url: "contacts.google.com",              img: "./images/logos/contacts.png",    category: "communication" },
+    { name: "Script",         title: "Apps Script",      url: "script.google.com",                img: "./images/logos/script.png",      category: "developer" },
+    { name: "Messages",       title: "Messages",         url: "messages.google.com",              img: "./images/logos/messages.png",    category: "communication" },
+    { name: "SearchConsole",  title: "Search Console",   url: "search.google.com",                img: "./images/logos/search.png",      category: "developer" },
+    { name: "Developers",     title: "Developers",       url: "developers.google.com",            img: "./images/logos/developers.png",  category: "developer" },
+    { name: "One",            title: "Google One",       url: "one.google.com",                   img: "./images/logos/one.png",         category: "utilities" },
+    { name: "ChromeWebStore", title: "Chrome Web Store", url: "chrome.google.com",                img: "./images/logos/chrome.png",      category: "utilities" },
+    { name: "Sites",          title: "Sites",            url: "sites.google.com",                 img: "./images/logos/sites.png",       category: "productivity" },
+    { name: "Groups",         title: "Groups",           url: "groups.google.com",                img: "./images/logos/groups.png",      category: "communication" },
+    { name: "Blogger",        title: "Blogger",          url: "blogger.com",                      img: "./images/logos/google.png",      category: "media" },
+    { name: "Workspace",      title: "Workspace",        url: "workspace.google.com",             img: "./images/logos/google.png",      category: "admin" },
+    { name: "Hangouts",       title: "Hangouts",         url: "hangouts.google.com",              img: "./images/logos/hangouts.png",    category: "communication" },
+    { name: "Jamboard",       title: "Jamboard",         url: "jamboard.google.com",              img: "./images/logos/jamboard.png",    category: "productivity" },
+    { name: "Duo",            title: "Duo",              url: "duo.google.com",                   img: "./images/logos/duo.png",         category: "communication" },
+    { name: "Stadia",         title: "Stadia",           url: "stadia.google.com",                img: "./images/logos/stadia.png",      category: "media" },
+    { name: "Optimize",       title: "Optimize",         url: "optimize.google.com",              img: "./images/logos/optimize.png",    category: "marketing" },
+    { name: "Books",          title: "Books",            url: "books.google.com",                 img: "./images/logos/google.png",      category: "media" },
+    { name: "Flights",        title: "Flights",          url: "google.com/travel/flights",        img: "./images/logos/google.png",      category: "utilities" },
+    { name: "Travel",         title: "Travel",           url: "google.com/travel",                img: "./images/logos/google.png",      category: "utilities" },
+    { name: "Looker",         title: "Looker",           url: "looker.google.com",                img: "./images/logos/google.png",      category: "developer" },
   ];
 }
 
+// ─── Profile helpers ─────────────────────────────────────────────────────────
+
+const DEFAULT_PROFILE_ID = "default";
+
+const PROFILE_COLORS = [
+  "#d66d58", "#4a90d9", "#5cb85c", "#9b59b6",
+  "#e67e22", "#1abc9c", "#e91e63", "#607d8b",
+];
+
+function makeProfile(name, color, overrides = {}) {
+  return {
+    id: crypto.randomUUID(),
+    name,
+    color: color ?? PROFILE_COLORS[0],
+    defaultAccount: 0,
+    rules: [],
+    customServices: [],
+    ...overrides,
+  };
+}
+
+function makeDefaultProfile() {
+  return {
+    id: DEFAULT_PROFILE_ID,
+    name: "Default",
+    color: "#8b8792",
+    defaultAccount: 0,
+    rules: [],
+    customServices: [],
+  };
+}
+
+// Resolve rules for a profile with inheritance from Default.
+// Returns merged rule list: profile rules take precedence over default rules
+// for the same serviceUrl.
+function resolveRules(profile, defaultProfile) {
+  if (!defaultProfile || profile.id === DEFAULT_PROFILE_ID) return profile.rules;
+  const profileUrls = new Set(profile.rules.map(r => r.serviceUrl));
+  const inherited = (defaultProfile.rules ?? [])
+    .filter(r => !profileUrls.has(r.serviceUrl))
+    .map(r => ({ ...r, _inherited: true }));
+  return [...profile.rules, ...inherited];
+}
+
+// ─── Storage ─────────────────────────────────────────────────────────────────
+
 class SyncStorage {
   static store(obj, callback) {
     chrome.storage.sync.set(obj, callback);
   }
-
   static get(key, callback) {
     chrome.storage.sync.get(key, callback);
   }
 }
+
+// Load profiles + activeProfileId; guarantee Default always exists.
+function loadProfiles(callback) {
+  SyncStorage.get(["profiles", "activeProfileId", "accounts"], (data) => {
+    let profiles = data.profiles ?? [];
+    let activeProfileId = data.activeProfileId ?? DEFAULT_PROFILE_ID;
+
+    if (!profiles.find(p => p.id === DEFAULT_PROFILE_ID)) {
+      profiles = [makeDefaultProfile(), ...profiles];
+    }
+    if (!profiles.find(p => p.id === activeProfileId)) {
+      activeProfileId = DEFAULT_PROFILE_ID;
+    }
+
+    callback({
+      profiles,
+      activeProfileId,
+      accounts: data.accounts ?? [],
+    });
+  });
+}
+
+function saveProfiles(profiles, callback) {
+  SyncStorage.store({ profiles }, callback);
+}
+
+function getActiveProfile(profiles, activeProfileId) {
+  return profiles.find(p => p.id === activeProfileId) ?? profiles[0];
+}
+
+function getDefaultProfile(profiles) {
+  return profiles.find(p => p.id === DEFAULT_PROFILE_ID);
+}
+
+// ─── Global settings (independent of profiles) ───────────────────────────────
+
+const DEFAULT_SETTINGS = {
+  enforceOnPrecachedUrls: true,
+  profileSwitchRedirect: "ask", // "ask" | "always" | "never"
+};
+
+function loadSettings(callback) {
+  SyncStorage.get("settings", (data) => {
+    callback({ ...DEFAULT_SETTINGS, ...(data.settings ?? {}) });
+  });
+}
+
+function saveSettings(settings, callback) {
+  SyncStorage.store({ settings }, callback);
+}