mcp-browser-extension 0.9.30 → 0.9.32

package/extension-dist/options.js

@@ -1,48 +1,493 @@
 "use strict";
 (() => {
+  // shared/client-auth.ts
+  var CLIENT_GRANT_MS = 8 * 60 * 60 * 1e3;
+  var CLIENT_CLOCK_SKEW_MS = 2 * 60 * 1e3;
+  var CLIENT_REQUEST_MS = 10 * 60 * 1e3;
+  var CLIENT_STORAGE_KEY = "clientConnections";
+
   // shared/protocol.ts
   var DEFAULT_WS_PORT = 38017;
 
-  // extension/src/connect.ts
-  var NATIVE_HOST = "com.mehmoodqureshi.mcp_browser_extension";
-  async function fetchPairing() {
+  // shared/activity.ts
+  var ACCESS_STOPPED_KEY = "accessStopped";
+  var ACTIVITY_KEY = "recentActivity";
+  function activityRows(entries) {
+    const rows = [];
+    const opens = /* @__PURE__ */ new Map();
+    for (const entry of entries) {
+      const key = entry.tabId !== void 0 && entry.key ? `${entry.key}:${entry.tabId}` : "";
+      if (key && entry.method === "tab_new" && entry.outcome === "done") opens.set(key, entry);
+      const opened = key && entry.method === "tab_close" && entry.outcome === "done" ? opens.get(key) : void 0;
+      if (opened) {
+        const index = rows.findIndex((row) => row.id === opened.id);
+        if (index !== -1) rows.splice(index, 1);
+        rows.push({ ...entry, host: entry.host || opened.host, opened });
+        opens.delete(key);
+      } else rows.push(entry);
+    }
+    return rows;
+  }
+  var LABELS = {
+    tabs_list: "List tabs",
+    tab_select: "Select tab",
+    tab_new: "Open tab",
+    tab_close: "Close tab",
+    navigate: "Navigate",
+    back: "Go back",
+    forward: "Go forward",
+    reload: "Reload page",
+    click: "Click",
+    draw: "Draw",
+    type: "Type text",
+    press: "Press key",
+    hover: "Hover",
+    scroll: "Scroll",
+    screenshot: "Take screenshot",
+    get_text: "Read text",
+    get_html: "Read HTML",
+    eval: "Run page script",
+    snapshot: "Read page structure",
+    fill_form: "Fill form",
+    get_cookies: "Read cookies",
+    storage: "Access site storage",
+    download_file: "Download file",
+    upload_file: "Upload file",
+    print_pdf: "Print PDF",
+    select_option: "Choose option",
+    observers: "Read page observations",
+    proxy_status: "Check proxy",
+    frames: "List frames"
+  };
+  var activityLabel = (method) => LABELS[method] ?? method.replaceAll("_", " ");
+
+  // extension/src/ui-controls.ts
+  var lists = /* @__PURE__ */ new WeakMap();
+  var pending = /* @__PURE__ */ new Map();
+  var pressing = false;
+  var pressGeneration = 0;
+  document.addEventListener("pointerdown", () => {
+    pressing = true;
+    pressGeneration++;
+  }, true);
+  function release() {
+    const generation = pressGeneration;
+    setTimeout(() => {
+      if (generation !== pressGeneration) return;
+      pressing = false;
+      const updates = [...pending.values()];
+      pending.clear();
+      for (const update of updates) update();
+    }, 0);
+  }
+  window.addEventListener("pointerup", release, true);
+  window.addEventListener("pointercancel", release, true);
+  window.addEventListener("blur", release);
+  function renderList(list4, items, key, signature, create) {
+    if (pressing) {
+      pending.set(list4, () => renderList(list4, items, key, signature, create));
+      return;
+    }
+    pending.delete(list4);
+    const previous = lists.get(list4) ?? /* @__PURE__ */ new Map();
+    const next = /* @__PURE__ */ new Map();
+    const scrollTop = list4.scrollTop;
+    let cursor = list4.firstElementChild;
+    for (const item of items) {
+      const id = key(item), version = signature(item), old = previous.get(id);
+      const element = old?.signature === version ? old.element : create(item);
+      if (old && element !== old.element) {
+        const details = element.querySelector("details");
+        if (details) details.open = old.element.querySelector("details")?.open ?? false;
+        if (old.element.parentElement === list4) {
+          if (cursor === old.element) cursor = element;
+          old.element.replaceWith(element);
+        }
+      }
+      if (element === cursor) cursor = cursor.nextElementSibling;
+      else list4.insertBefore(element, cursor);
+      next.set(id, { signature: version, element });
+    }
+    const keep = new Set([...next.values()].map((row) => row.element));
+    for (const child of Array.from(list4.children)) if (!keep.has(child)) child.remove();
+    list4.scrollTop = scrollTop;
+    lists.set(list4, next);
+  }
+  async function busyButton(button2, operation) {
+    if (button2.disabled) return;
+    button2.disabled = true;
+    button2.setAttribute("aria-busy", "true");
     try {
-      const reply = await chrome.runtime.sendNativeMessage(NATIVE_HOST, { type: "pairing" });
-      return reply ?? { ok: false, message: "The helper gave no answer." };
-    } catch (err) {
-      const why = err instanceof Error ? err.message : String(err);
-      if (/not found|not registered|Specified native messaging host/i.test(why)) {
-        return {
-          ok: false,
-          error: "no_helper",
-          message: "Add the MCP Browser Extension server to your AI client (Claude Code, Cursor\u2026) and start it once; it sets this up. Then click Connect again."
-        };
+      await operation();
+    } finally {
+      button2.disabled = false;
+      button2.removeAttribute("aria-busy");
+    }
+  }
+
+  // extension/src/client-connections.ts
+  var list = document.getElementById("client-connections");
+  var note = document.getElementById("client-note");
+  var count = document.getElementById("client-count");
+  function appName(reported) {
+    const name = reported.replace(/\s+v?\d+\.\d+\.\d+(?:-[\w.-]+)?(?:\+[\w.-]+)?$/, "");
+    return name === "codex-mcp-client" ? "Codex" : name;
+  }
+  function accessStatus(client, now) {
+    if (client.state === "revoked") return "Access removed";
+    if (client.expiresAt <= now) return "Access expired";
+    if (client.state === "pending") return "Waiting for your approval";
+    const minutes = Math.ceil((client.expiresAt - now) / 6e4);
+    const hours = Math.floor(minutes / 60);
+    const remaining = hours > 0 ? `${hours} ${hours === 1 ? "hour" : "hours"}` : `${minutes} ${minutes === 1 ? "minute" : "minutes"}`;
+    return `Access allowed \xB7 ${remaining} left`;
+  }
+  function action(label, id, allow) {
+    const button2 = document.createElement("button");
+    button2.textContent = label;
+    button2.addEventListener("click", async (event) => {
+      if (!event.isTrusted) return;
+      button2.disabled = true;
+      try {
+        const result = await chrome.runtime.sendMessage({ type: "client_decision", id, allow });
+        note.textContent = result?.ok ? "" : result?.error ?? "Could not save the decision.";
+        note.dataset.error = String(!result?.ok);
+      } catch {
+        note.textContent = "Could not reach the extension. Reopen this page and try again.";
+        note.dataset.error = "true";
+      } finally {
+        button2.disabled = false;
       }
-      return { ok: false, message: why };
+      await render();
+    });
+    return button2;
+  }
+  var renderGeneration = 0;
+  async function render() {
+    const generation = ++renderGeneration;
+    const state = await chrome.storage.local.get([CLIENT_STORAGE_KEY, ACCESS_STOPPED_KEY]);
+    if (generation !== renderGeneration) return;
+    const saved = state[CLIENT_STORAGE_KEY];
+    const stopped = state[ACCESS_STOPPED_KEY] !== void 0 && state[ACCESS_STOPPED_KEY] !== false;
+    const clients = Array.isArray(saved) ? saved : [];
+    const now = Date.now();
+    const pending2 = (client) => client.state === "pending" && client.expiresAt > now;
+    const waiting = clients.filter(pending2).length;
+    for (const id of ["client-help", "client-limits"]) {
+      const hint = document.getElementById(id);
+      if (hint) hint.hidden = clients.length === 0 || id === "client-help" && document.body.dataset.view === "popup" && waiting === 0;
+    }
+    if (count) {
+      count.textContent = waiting ? `${waiting} waiting` : `${clients.length} ${clients.length === 1 ? "connection" : "connections"}`;
+      count.dataset.pending = String(waiting > 0);
     }
+    const sorted = clients.slice().sort(
+      (a, b) => Number(pending2(b)) - Number(pending2(a)) || b.requestedAt - a.requestedAt
+    );
+    renderList(
+      list,
+      sorted,
+      (client) => client.id,
+      (client) => JSON.stringify([client.name, client.state, client.expiresAt, client.expiresAt <= now, stopped]),
+      (client) => {
+        const li = document.createElement("li");
+        li.dataset.clientId = client.id;
+        const name = document.createElement("strong");
+        name.textContent = appName(client.name);
+        const key = document.createElement("code");
+        key.textContent = `Key ${client.id.slice(0, 12)}`;
+        key.title = client.id;
+        const status = document.createElement("span");
+        status.className = "client-status";
+        const expired = client.expiresAt <= now;
+        li.dataset.state = client.state === "revoked" ? "revoked" : expired ? "expired" : client.state;
+        status.textContent = accessStatus(client, Date.now());
+        const info = document.createElement("div");
+        info.className = "client-info";
+        info.append(name, status);
+        const needsApproval = client.state === "revoked" || client.state === "pending" && !expired;
+        if (needsApproval) info.append(key);
+        const details = document.createElement("details");
+        details.className = "client-details";
+        const summary = document.createElement("summary");
+        summary.textContent = "Details";
+        details.append(summary);
+        for (const [field, text] of [
+          ["app", `Reported app: ${client.name}`],
+          ["requested", `Requested: ${new Date(client.requestedAt).toLocaleString()}`],
+          ...client.state === "approved" ? [["expires", `Access ends: ${new Date(client.expiresAt).toLocaleString()}`]] : []
+        ]) {
+          const line = document.createElement("p");
+          line.className = `client-${field}`;
+          line.textContent = text;
+          details.append(line);
+        }
+        if (!needsApproval) details.append(key);
+        const controls = document.createElement("div");
+        controls.className = "client-actions";
+        if (client.state === "revoked") controls.append(action("Approve again for 8 hours", client.id, true));
+        else if (client.state === "pending" && !expired) {
+          const approve = action("Approve for 8 hours", client.id, true);
+          approve.className = "primary";
+          controls.append(approve, action("Deny", client.id, false));
+        } else if (client.state === "approved" && !expired) controls.append(action("Remove access", client.id, false));
+        if (stopped) controls.querySelectorAll("button").forEach((button2) => {
+          button2.disabled = true;
+        });
+        li.append(info, controls, details);
+        return li;
+      }
+    );
+    const byId = new Map(clients.map((client) => [client.id, client]));
+    for (const row of Array.from(list.querySelectorAll("[data-client-id]"))) {
+      const client = byId.get(row.dataset.clientId);
+      const status = row.querySelector(".client-status");
+      if (client && status) {
+        const label = accessStatus(client, now);
+        if (status.textContent !== label) status.textContent = label;
+        const requested = row.querySelector(".client-requested");
+        const requestTime = `Requested: ${new Date(client.requestedAt).toLocaleString()}`;
+        if (requested && requested.textContent !== requestTime) requested.textContent = requestTime;
+      }
+    }
+    if (clients.length && note.textContent?.startsWith("No requests yet.")) note.textContent = "";
+    if (!clients.length) note.textContent = "No requests yet. Ask your app to use Chrome. Its request will appear here.";
+    if (stopped) note.textContent = "Resume connection above to approve apps.";
+    else if (note.textContent === "Resume connection above to approve apps.") note.textContent = "";
+  }
+  chrome.storage.onChanged.addListener((changes, area) => {
+    if (area === "local" && (changes[CLIENT_STORAGE_KEY] || changes[ACCESS_STOPPED_KEY])) void render();
+  });
+  void render();
+  setInterval(() => void render(), 3e4);
+
+  // extension/src/activity-dashboard.ts
+  var stop = document.getElementById("access-stop");
+  var resume = document.getElementById("access-resume");
+  var accessNote = document.getElementById("access-note");
+  var historyNote = document.getElementById("activity-note");
+  var list2 = document.getElementById("activity-list");
+  var filter = document.getElementById("activity-filter");
+  var popup = document.body.dataset.view === "popup";
+  var accessGeneration = 0;
+  var historyGeneration = 0;
+  async function renderAccess() {
+    const generation = ++accessGeneration;
+    try {
+      const saved = await chrome.storage.local.get(ACCESS_STOPPED_KEY);
+      if (generation !== accessGeneration) return;
+      const stopped = saved[ACCESS_STOPPED_KEY] !== void 0 && saved[ACCESS_STOPPED_KEY] !== false;
+      stop.hidden = stopped && accessNote.dataset.error !== "true";
+      resume.hidden = !stopped;
+      document.getElementById("connect").hidden = stopped;
+      if (accessNote.dataset.error !== "true") accessNote.textContent = stopped ? "All apps are disconnected. Resume, then approve your app again." : "Stop disconnects all apps. An action already running may finish.";
+    } catch {
+      accessNote.textContent = "Could not read access settings. Reopen this page to try again.";
+    }
+  }
+  var OUTCOMES = {
+    running: "Running",
+    done: "Done",
+    blocked: "Blocked",
+    failed: "Failed",
+    interrupted: "Interrupted"
+  };
+  async function renderHistory() {
+    const generation = ++historyGeneration;
+    try {
+      const saved = await chrome.storage.session.get([ACTIVITY_KEY, "activityError"]);
+      if (generation !== historyGeneration) return;
+      const entries = Array.isArray(saved[ACTIVITY_KEY]) ? saved[ACTIVITY_KEY] : [];
+      const selected = filter?.value ?? "all";
+      const visible = activityRows(entries).filter((e) => selected === "all" || e.outcome === selected).reverse().slice(0, popup ? 5 : 100);
+      renderList(list2, visible, (entry) => entry.opened?.id ?? entry.id, (entry) => JSON.stringify(entry), (entry) => {
+        const item = document.createElement("li");
+        item.className = "activity-item";
+        item.dataset.outcome = entry.outcome;
+        const details = document.createElement("details");
+        const heading = document.createElement("summary");
+        heading.className = "activity-row";
+        const host = document.createElement("span");
+        host.className = "activity-host";
+        host.textContent = entry.host || (entry.method === "tabs_list" ? "All tabs" : entry.method === "proxy_status" ? "Proxy" : "No website");
+        host.title = host.textContent;
+        const label = document.createElement("span");
+        label.className = "activity-label";
+        const completedTab = entry.outcome === "done" && (entry.method === "tab_new" || entry.method === "tab_close");
+        label.textContent = entry.opened ? "Opened \u2192 Closed" : completedTab ? entry.method === "tab_new" ? "Opened" : "Closed" : activityLabel(entry.method);
+        const outcome = document.createElement("span");
+        outcome.className = "activity-outcome";
+        outcome.textContent = OUTCOMES[entry.outcome] ?? "Unknown";
+        outcome.hidden = completedTab;
+        heading.append(host, label, outcome);
+        const meta = document.createElement("div");
+        meta.className = "activity-meta";
+        const app = document.createElement("span");
+        app.textContent = entry.key ? `${entry.app} \xB7 ${entry.key.slice(0, 12)}` : "Unverified app";
+        const time = document.createElement("time");
+        time.dateTime = new Date(entry.at).toISOString();
+        time.textContent = new Date(entry.at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+        time.title = new Date(entry.at).toLocaleString();
+        meta.append(app, time);
+        if (entry.opened) {
+          const opened = document.createElement("span");
+          opened.className = "activity-opened";
+          opened.textContent = `Opened ${new Date(entry.opened.at).toLocaleString()} \xB7 Closed ${new Date(entry.at).toLocaleString()}`;
+          meta.append(opened);
+        }
+        details.append(heading, meta);
+        item.append(details);
+        return item;
+      });
+      historyNote.textContent = saved.activityError ? "Some activity could not be saved. This history may be incomplete." : visible.length ? popup ? `Latest ${visible.length} ${visible.length === 1 ? "activity" : "activities"}.` : `${visible.length} activities shown.` : selected === "all" ? "No activity yet." : "No matching requests.";
+      document.getElementById("activity-clear").disabled = entries.length === 0 && !saved.activityError;
+    } catch {
+      historyNote.textContent = "Activity is unavailable. Reopen this page to try again.";
+    }
+  }
+  function control(id, type, note3) {
+    const button2 = document.getElementById(id);
+    button2.addEventListener("click", async (event) => {
+      if (!event.isTrusted) return;
+      button2.disabled = true;
+      try {
+        const result = await chrome.runtime.sendMessage({ type });
+        note3.dataset.error = String(!result?.ok);
+        note3.textContent = result?.ok ? "" : result?.error ?? "Could not save this change. Please try again.";
+      } catch {
+        note3.dataset.error = "true";
+        note3.textContent = "Could not reach the extension. Reopen this page and try again.";
+      } finally {
+        button2.disabled = false;
+      }
+      if (type !== "activity_clear") await renderAccess();
+      else if (note3.dataset.error !== "true") await renderHistory();
+    });
+  }
+  control("access-stop", "access_stop", accessNote);
+  control("access-resume", "access_resume", accessNote);
+  control("activity-clear", "activity_clear", historyNote);
+  document.getElementById("activity-all")?.addEventListener("click", () => {
+    void chrome.tabs.create({ url: `${chrome.runtime.getURL("options.html")}#activity-section` });
+  });
+  filter?.addEventListener("change", () => void renderHistory());
+  chrome.storage.onChanged.addListener((changes, area) => {
+    if (area === "local" && changes[ACCESS_STOPPED_KEY]) void renderAccess();
+    if (area === "session" && (changes[ACTIVITY_KEY] || changes.activityError)) void renderHistory();
+  });
+  void renderAccess();
+  void renderHistory();
+
+  // shared/policy.ts
+  function normalizeDomainPattern(pattern) {
+    let p = pattern.trim().toLowerCase();
+    if (p === "*" || p === "*://*/*" || p === "<all_urls>") return "";
+    p = p.replace(/^[a-z][a-z0-9+.-]*:\/\//, "");
+    p = p.replace(/[/?#].*$/, "");
+    p = p.replace(/^[^@]*@/, "").replace(/:\d+$/, "");
+    return p === "*" || p === "*." ? "" : p;
+  }
+
+  // shared/browser-permissions.ts
+  function siteOrigins(input) {
+    if (/^[a-z][a-z0-9+.-]*:\/\//i.test(input) && !/^https?:\/\//i.test(input)) return [];
+    const pattern = normalizeDomainPattern(input);
+    const host = pattern.startsWith("*.") ? pattern.slice(2) : pattern;
+    if (!host || host.length > 253 || !/^[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?(?:\.[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?)*$/.test(host)) return [];
+    return [`http://${pattern}/*`, `https://${pattern}/*`];
   }
-  async function applyPairing(reply) {
-    await chrome.storage.local.set({
-      wsPort: reply.port,
-      token: reply.token,
-      // The server's own --profile when it set one; otherwise let the server name us.
-      ...reply.profile ? { profile: reply.profile } : {},
-      pairingSource: "native"
+  var OPTIONAL_FEATURES = {
+    cookies: { label: "Cookies", explanation: "Read cookies on websites you have allowed. Cookie values still follow your server settings." },
+    downloads: { label: "Downloads", explanation: "Save files from websites you have allowed." }
+  };
+  var FEATURE_REQUESTS_KEY = "browserPermissionRequests";
+  var PROXY_AUTH_PERMISSIONS = ["webRequest", "webRequestAuthProvider"];
+  var IP_LOOKUP_ORIGINS = ["https://ipinfo.io/*", "https://api.ipify.org/*"];
+
+  // extension/src/extra-permissions.ts
+  var section = document.getElementById("extra-permissions");
+  var list3 = document.getElementById("extra-permissions-list");
+  var note2 = document.getElementById("extra-permissions-note");
+  var rendering = 0;
+  async function render2() {
+    if (!section || !list3 || !note2) return;
+    const generation = ++rendering;
+    const saved = (await chrome.storage.local.get(FEATURE_REQUESTS_KEY))[FEATURE_REQUESTS_KEY];
+    const pending2 = Array.isArray(saved) ? saved : [];
+    const features = [];
+    for (const feature of Object.keys(OPTIONAL_FEATURES)) {
+      const granted = await chrome.permissions.contains({ permissions: [feature] }).catch(() => false);
+      if (!granted && !pending2.includes(feature)) continue;
+      features.push({ feature, granted });
+    }
+    if (generation !== rendering) return;
+    renderList(list3, features, ({ feature }) => feature, ({ granted }) => String(granted), ({ feature, granted }) => {
+      const { label, explanation } = OPTIONAL_FEATURES[feature];
+      const row = document.createElement("li");
+      row.className = "client-row";
+      row.dataset.feature = feature;
+      const title = document.createElement("strong");
+      title.textContent = label;
+      const description = document.createElement("p");
+      description.className = "note hint";
+      description.textContent = explanation;
+      const button2 = document.createElement("button");
+      button2.className = granted ? "ghost" : "primary";
+      button2.textContent = granted ? `Remove ${label.toLowerCase()}` : `Allow ${label.toLowerCase()}`;
+      button2.addEventListener("click", async (event) => {
+        if (!event.isTrusted) return;
+        try {
+          await busyButton(button2, async () => {
+            const result = await chrome.runtime.sendMessage({ type: "feature_access", feature, allow: !granted });
+            note2.textContent = result?.ok ? "" : result?.error ?? "Could not change this permission. Please try again.";
+          });
+        } catch {
+          note2.textContent = "Could not change this permission. Please try again.";
+        }
+        await render2();
+      });
+      row.append(title, description, button2);
+      return row;
     });
+    section.hidden = features.length === 0;
   }
-  async function connectWithOneClick() {
-    let granted = false;
+  chrome.storage.onChanged.addListener((changes, area) => {
+    if (area === "local" && changes[FEATURE_REQUESTS_KEY]) void render2();
+  });
+  chrome.permissions.onAdded.addListener(() => void render2());
+  chrome.permissions.onRemoved.addListener(() => void render2());
+  void render2();
+
+  // extension/src/site-access.ts
+  async function permittedSites(sites) {
+    const checks = await Promise.all(sites.map(async (site) => {
+      const origins = siteOrigins(site);
+      return origins.length && await chrome.permissions.contains({ origins }).catch(() => false) ? site : null;
+    }));
+    return checks.filter((site) => site !== null);
+  }
+  async function changeSiteAccess(input, allow) {
+    const origins = siteOrigins(input);
+    if (!origins.length) return { ok: false, error: "Please enter one website, such as example.com. All-site access is not available." };
     try {
-      granted = await chrome.permissions.request({ permissions: ["nativeMessaging"] });
+      const result = await chrome.runtime.sendMessage({
+        type: "site_access",
+        host: normalizeDomainPattern(input),
+        allow
+      });
+      return result ?? { ok: false, error: "Please start your connected app and try again." };
     } catch (err) {
-      return { ok: false, message: err instanceof Error ? err.message : String(err) };
+      return { ok: false, error: err instanceof Error ? err.message : "Could not change this website permission. Please try again." };
+    }
+  }
+
+  // extension/src/connect.ts
+  async function connectWithOneClick() {
+    try {
+      return await chrome.runtime.sendMessage({ type: "connect_with_click" }) ?? { ok: false, message: "Could not reach the extension." };
+    } catch {
+      return { ok: false, message: "Could not reach the extension. Reopen the popup and try again." };
     }
-    if (!granted) return { ok: false, message: "Chrome needs that permission to fetch the pairing for you. You can also pair by hand in Settings." };
-    const reply = await fetchPairing();
-    if (!reply.ok) return { ok: false, message: reply.message };
-    await applyPairing(reply);
-    await chrome.runtime.sendMessage({ type: "reconnect" }).catch(() => void 0);
-    return { ok: true };
   }
 
   // shared/proxy.ts
@@ -107,12 +552,13 @@
     sourceEl.textContent = pairingSource === "auto" ? "Paired automatically from the pairing.json the server wrote into this extension folder. Saving here overrides it." : pairingSource === "manual" ? "Paired by hand. Saved values take precedence over the bundled pairing.json." : typeof wsPort === "number" && wsPort > 0 && connState !== "idle" ? "Paired with values saved by an earlier version. Saving here keeps them manual." : "Not paired yet. If you loaded this extension from the MCP Browser Extension package folder, start the server once and it pairs itself; otherwise paste the values below.";
     portEl.value = typeof wsPort === "number" && wsPort > 0 ? String(wsPort) : String(DEFAULT_WS_PORT);
     profileEl.value = typeof profile === "string" ? profile : "";
-    render(typeof connState === "string" ? connState : "idle");
+    render3(typeof connState === "string" ? connState : "idle");
   }
   var quickEl = document.getElementById("quick");
   var connectEl = document.getElementById("connect");
   var connectMsgEl = document.getElementById("connect-msg");
-  connectEl.addEventListener("click", async () => {
+  connectEl.addEventListener("click", async (event) => {
+    if (!event.isTrusted) return;
     connectEl.disabled = true;
     connectEl.textContent = "Connecting\u2026";
     const res = await connectWithOneClick();
@@ -121,19 +567,23 @@
     connectMsgEl.className = res.ok ? "hint" : "hint error";
     connectMsgEl.textContent = res.ok ? "Connecting\u2026" : res.message ?? "Could not connect.";
   });
-  function render(state) {
+  function render3(state) {
     quickEl.hidden = false;
     if (!connectEl.disabled) connectEl.textContent = state === "connected" ? "Connect again" : "Connect";
     const labels = {
-      connected: "\u2705 connected",
+      connected: "connected",
       connecting: "\u2026 connecting",
-      unauthorized: "\u26D4 rejected (bad/stale token \u2014 re-paste)",
-      superseded: "\u26D4 another browser connected under the same profile name. Type a different Profile name above and Save & connect.",
+      unauthorized: "rejected (bad/stale token \u2014 re-paste)",
+      superseded: "another browser connected under the same profile name. Type a different Profile name above and Save & connect.",
       idle: "\u25CB not connected"
     };
     statusEl.textContent = `Status: ${labels[state] ?? state}`;
+    void chrome.storage.local.get(ACCESS_STOPPED_KEY).then((saved) => {
+      if (saved[ACCESS_STOPPED_KEY]) statusEl.textContent = "Status: access stopped";
+    });
   }
-  saveEl.addEventListener("click", async () => {
+  saveEl.addEventListener("click", async (event) => {
+    if (!event.isTrusted) return;
     const wsPort = Number(portEl.value);
     const stored = await chrome.storage.local.get("token");
     const token = tokenEl.value.trim() || (typeof stored.token === "string" ? stored.token : "");
@@ -143,8 +593,8 @@
       return;
     }
     await chrome.storage.local.set({ wsPort, token, profile, pairingSource: "manual" });
-    await chrome.runtime.sendMessage({ type: "reconnect" }).catch(() => void 0);
-    statusEl.textContent = "Status: \u2026 connecting";
+    const result = await chrome.runtime.sendMessage({ type: "reconnect" }).catch(() => void 0);
+    statusEl.textContent = result?.ok === false ? `Status: ${result.error}` : "Status: \u2026 connecting";
   });
   var blockedWrapEl = document.getElementById("blocked-wrap");
   var blockedEl = document.getElementById("blocked");
@@ -153,13 +603,18 @@
   var newSiteEl = document.getElementById("new-site");
   var addSiteEl = document.getElementById("add-site");
   async function grant(host, allow) {
-    const res = await chrome.runtime.sendMessage({ type: "site_grant", host, allow }).catch(() => null);
-    sitesNoteEl.textContent = res?.ok ? "" : `Could not reach the MCP Browser Extension server${res?.error ? ` (${res.error})` : ""}. Is your AI client running?`;
+    const res = await changeSiteAccess(host, allow);
+    await renderSites();
+    sitesNoteEl.textContent = res.ok ? "" : res.error ?? "Could not change website access. Please try again.";
   }
   function button(label, onClick) {
     const b = document.createElement("button");
     b.textContent = label;
-    b.addEventListener("click", onClick);
+    b.addEventListener("click", (event) => {
+      if (event.isTrusted) void busyButton(b, onClick).catch(() => {
+        sitesNoteEl.textContent = "Could not finish that action. Please try again.";
+      });
+    });
     return b;
   }
   function siteRow(host, extra) {
@@ -175,36 +630,46 @@
     t.textContent = text;
     return t;
   }
+  var sitesGeneration = 0;
   async function renderSites() {
-    const { allowedSites, grantedSites, blockedSites, connState } = await chrome.storage.local.get([
+    const generation = ++sitesGeneration;
+    const { allowedSites, grantedSites, blockedSites, dismissedSites, connState } = await chrome.storage.local.get([
       "allowedSites",
       "grantedSites",
       "blockedSites",
+      "dismissedSites",
       "connState"
     ]);
-    const allowed = Array.isArray(allowedSites) ? allowedSites : [];
+    const allowed = Array.isArray(allowedSites) ? allowedSites.map(normalizeDomainPattern).filter(Boolean) : [];
     const granted = Array.isArray(grantedSites) ? grantedSites : null;
-    const blocked = Array.isArray(blockedSites) ? blockedSites : [];
-    blockedEl.replaceChildren(
-      ...blocked.map(
-        (b) => siteRow(b.host, [
-          tag(b.method ? `blocked ${b.method}` : "blocked"),
-          button("Allow", () => void grant(b.host, true)),
-          button("Dismiss", () => void chrome.runtime.sendMessage({ type: "dismiss_blocked", host: b.host }))
-        ])
-      )
+    const permitted = await permittedSites(allowed);
+    if (generation !== sitesGeneration) return;
+    const pending2 = Array.isArray(blockedSites) ? blockedSites : [];
+    const blocked = [.../* @__PURE__ */ new Set([...pending2.map((b) => b.host), ...allowed.filter((site) => !permitted.includes(site))])].filter((host) => !permitted.includes(host) && (!Array.isArray(dismissedSites) || !dismissedSites.includes(host)));
+    renderList(
+      blockedEl,
+      blocked,
+      (host) => host,
+      (host) => host,
+      (host) => siteRow(host, [
+        tag("needs permission"),
+        button("Allow", () => grant(host, true)),
+        button("Dismiss", () => chrome.runtime.sendMessage({ type: "dismiss_blocked", host }))
+      ])
     );
-    blockedWrapEl.hidden = blocked.length === 0 || granted === null;
-    allowedEl.replaceChildren(
-      ...allowed.map(
-        (host) => host === "*" ? siteRow("Every site", [tag("--unsafe-all-domains")]) : granted?.includes(host) ? siteRow(host, [button("Remove", () => void grant(host, false))]) : siteRow(host, [tag("set by server flags")])
-      )
+    blockedWrapEl.hidden = blocked.length === 0 || connState !== "connected";
+    renderList(
+      allowedEl,
+      permitted,
+      (host) => host,
+      (host) => JSON.stringify([host, granted?.includes(host)]),
+      (host) => siteRow(host, [...granted?.includes(host) ? [] : [tag("set by server flags")], button("Remove", () => grant(host, false))])
     );
     if (connState !== "connected") {
       sitesNoteEl.textContent = "Connect to the MCP Browser Extension server to see and change the allowed sites.";
     } else if (granted === null) {
       sitesNoteEl.textContent = "This MCP Browser Extension server does not take sites from here (it is older, or runs with --no-site-grants). Use --allow-domain instead.";
-    } else if (allowed.length === 0) {
+    } else if (permitted.length === 0) {
       sitesNoteEl.textContent = "No sites are allowed yet.";
     } else {
       sitesNoteEl.textContent = "";
@@ -213,23 +678,33 @@
     addSiteEl.disabled = !canGrant;
     newSiteEl.disabled = !canGrant;
   }
-  addSiteEl.addEventListener("click", () => {
+  function addSite(event) {
+    if (!event.isTrusted) return;
     const host = newSiteEl.value.trim();
     if (!host) return;
     newSiteEl.value = "";
     void grant(host, true);
-  });
+  }
+  addSiteEl.addEventListener("click", addSite);
   newSiteEl.addEventListener("keydown", (e) => {
-    if (e.key === "Enter") addSiteEl.click();
+    if (e.key === "Enter") {
+      e.preventDefault();
+      addSite(e);
+    }
   });
   chrome.storage.onChanged.addListener((changes, area) => {
-    if (area === "local" && changes.connState) render(String(changes.connState.newValue));
+    if (area === "local" && changes[ACCESS_STOPPED_KEY]) {
+      void chrome.storage.local.get("connState").then((saved) => render3(String(saved.connState ?? "idle")));
+    }
+    if (area === "local" && changes.connState) render3(String(changes.connState.newValue));
     if (area === "local" && changes.pairedProfile) renderPairedAs(changes.pairedProfile.newValue);
-    if (area === "local" && (changes.allowedSites || changes.grantedSites || changes.blockedSites || changes.connState)) {
+    if (area === "local" && (changes.allowedSites || changes.grantedSites || changes.blockedSites || changes.dismissedSites || changes.connState)) {
       void renderSites();
     }
   });
   void renderSites();
+  chrome.permissions.onAdded.addListener(() => void renderSites());
+  chrome.permissions.onRemoved.addListener(() => void renderSites());
   void loadExisting();
   var proxyEnabledEl = document.getElementById("proxy-enabled");
   var proxySchemeEl = document.getElementById("proxy-scheme");
@@ -269,7 +744,8 @@
   }
   proxyHostEl.addEventListener("change", splitPastedProxy);
   proxyHostEl.addEventListener("paste", () => setTimeout(splitPastedProxy, 0));
-  proxyWebrtcEl.addEventListener("change", async () => {
+  proxyWebrtcEl.addEventListener("change", async (event) => {
+    if (!event.isTrusted) return;
     if (proxyWebrtcEl.checked) {
       proxyWebrtcEl.checked = await chrome.permissions.request({ permissions: ["privacy"] }).catch(() => false);
     } else {
@@ -278,9 +754,9 @@
     }
     await chrome.runtime.sendMessage({ type: "proxy_apply" }).catch(() => void 0);
   });
-  proxySaveEl.addEventListener("click", async () => {
+  proxySaveEl.addEventListener("click", async (event) => {
+    if (!event.isTrusted) return;
     splitPastedProxy();
-    const stored = parseProxyConfig((await chrome.storage.local.get(PROXY_STORAGE_KEY))[PROXY_STORAGE_KEY]);
     const host = proxyHostEl.value.trim();
     const port = Number(proxyPortEl.value);
     const enabled = proxyEnabledEl.checked;
@@ -288,16 +764,28 @@
       return proxyNote("Proxy: enter a host and a port (1-65535) first", "err");
     }
     const username = proxyUserEl.value.trim();
-    const password = proxyPassEl.value || (stored && stored.username === username ? stored.password : "");
     const scheme = proxySchemeEl.value;
     if (enabled && username && scheme.startsWith("socks")) {
       return proxyNote("Proxy: Chrome cannot log in to a SOCKS proxy. Pick HTTP or HTTPS, or use a proxy without a login.", "err");
     }
+    if (enabled && username && !await chrome.permissions.request({ permissions: PROXY_AUTH_PERMISSIONS }).catch(() => false)) {
+      return proxyNote("Proxy access was not added. Click Save proxy whenever you are ready.", "err");
+    }
+    const stored = parseProxyConfig((await chrome.storage.local.get(PROXY_STORAGE_KEY))[PROXY_STORAGE_KEY]);
+    const password = proxyPassEl.value || (stored && stored.username === username ? stored.password : "");
     await chrome.storage.local.set({ [PROXY_STORAGE_KEY]: { enabled, scheme, host, port, username, password } });
+    if (!enabled) {
+      if (await chrome.permissions.contains({ permissions: ["proxy"] })) await chrome.proxy.settings.clear({ scope: "regular" });
+      await chrome.permissions.remove({ permissions: PROXY_AUTH_PERMISSIONS });
+    }
     proxyPassEl.value = "";
     proxyNote(enabled ? `Proxy: on (${scheme}://${host}:${port}). Click Check IP to confirm.` : "Proxy: off", enabled ? "on" : "");
   });
-  proxyCheckEl.addEventListener("click", async () => {
+  proxyCheckEl.addEventListener("click", async (event) => {
+    if (!event.isTrusted) return;
+    if (!await chrome.permissions.request({ origins: IP_LOOKUP_ORIGINS }).catch(() => false)) {
+      return proxyNote("IP lookup permission was not added. You can try again whenever you are ready.", "err");
+    }
     proxyCheckEl.disabled = true;
     proxyNote("Proxy: checking\u2026");
     const res = await chrome.runtime.sendMessage({ type: "proxy_status" }).catch(() => null);