@hasna/contacts 0.7.0 → 0.9.0

package/extension/background.js

@@ -0,0 +1,284 @@
+import { fillDocument } from "./fill.js";
+
+const HOST = "com.hasna.contacts";
+let port, connecting;
+let generation = 0;
+const pending = new Map();
+function safeOrigin(url) {
+  try {
+    const u = new URL(url);
+    return u.protocol === "https:" || (u.protocol === "http:" && ["127.0.0.1", "localhost"].includes(u.hostname))
+      ? u.origin
+      : null;
+  } catch {
+    return null;
+  }
+}
+function nativeRequest(nativePort, op, data = {}) {
+  return new Promise((resolve, reject) => {
+    const id = crypto.randomUUID();
+    const timer = setTimeout(() => {
+      pending.delete(id);
+      reject(new Error("NATIVE_TIMEOUT"));
+    }, 20000);
+    pending.set(id, { resolve, reject, timer, nativePort });
+    nativePort.postMessage({ id, op, ...data });
+  });
+}
+async function rpc(op, data = {}) {
+  await connect();
+  return nativeRequest(port, op, data);
+}
+async function connect() {
+  if (connecting) return connecting;
+  if (port) return;
+  connecting = (async () => {
+    const saved = await chrome.storage.local.get("browserId");
+    let browserId = saved.browserId || crypto.randomUUID();
+    for (let attempt = 0; attempt < 2; attempt++) {
+      await chrome.storage.local.set({ browserId });
+      const nativePort = chrome.runtime.connectNative(HOST);
+      port = nativePort;
+      nativePort.onMessage.addListener((message) => {
+        const entry = pending.get(message.id);
+        if (!entry || entry.nativePort !== nativePort) return;
+        clearTimeout(entry.timer);
+        pending.delete(message.id);
+        message.ok ? entry.resolve(message.result) : entry.reject(new Error(message.error || "NATIVE_UNAVAILABLE"));
+      });
+      nativePort.onDisconnect.addListener(() => {
+        void chrome.runtime.lastError;
+        if (port === nativePort) {
+          generation++;
+          port = undefined;
+        }
+        for (const [id, entry] of pending) {
+          if (entry.nativePort !== nativePort) continue;
+          clearTimeout(entry.timer);
+          entry.reject(new Error("NATIVE_UNAVAILABLE"));
+          pending.delete(id);
+        }
+      });
+      try {
+        await nativeRequest(nativePort, "hello", { browserId });
+        return;
+      } catch (error) {
+        if (port === nativePort) {
+          generation++;
+          port = undefined;
+        }
+        nativePort.disconnect();
+        if (error.message !== "BROWSER_ALREADY_CONNECTED" || attempt !== 0) throw error;
+        browserId = crypto.randomUUID();
+      }
+    }
+  })();
+  try {
+    await connecting;
+  } finally {
+    connecting = undefined;
+  }
+}
+async function frames(tabId) {
+  return ((await chrome.webNavigation.getAllFrames({ tabId })) || [])
+    .map((f) => ({ frameId: f.frameId, documentId: f.documentId, origin: safeOrigin(f.url) }))
+    .filter((f) => f.origin && f.documentId);
+}
+// Detect only the page the popup was opened from; no fallback to another tab.
+async function pageContext(tabId, expected) {
+  const tab = Number.isInteger(tabId)
+    ? await chrome.tabs.get(tabId)
+    : (await chrome.tabs.query({ active: true, lastFocusedWindow: true }))[0];
+  const site = safeOrigin(tab?.url);
+  if (!site || !Number.isInteger(tab?.id)) return null;
+  const all = await frames(tab.id);
+  const top = all.find((f) => f.frameId === 0);
+  if (!top || top.origin !== site || (expected && (expected.origin !== site || expected.documentId !== top.documentId)))
+    throw new Error("TAB_CHANGED");
+  const detected = [];
+  const blocked = new Set();
+  for (const frame of all) {
+    try {
+      const result = await chrome.scripting.executeScript({
+        target: { tabId: tab.id, documentIds: [frame.documentId] },
+        func: fillDocument,
+        args: [frame.origin, {}, "inspect"],
+        world: "ISOLATED",
+      });
+      const fields = result[0]?.result?.fields || [];
+      if (fields.length) detected.push({ origin: frame.origin, fields });
+    } catch {
+      blocked.add(frame.origin);
+    }
+  }
+  return {
+    tabId: tab.id,
+    origin: site,
+    documentId: top.documentId,
+    fieldCount: detected.reduce((n, f) => n + f.fields.reduce((m, v) => m + v.count, 0), 0),
+    frameOrigins: [...new Set([site, ...detected.map((f) => f.origin)])].sort(),
+    blockedOrigins: [...blocked].sort(),
+  };
+}
+async function fill(input) {
+  await connect();
+  const started = generation;
+  const active = () => {
+    if (started !== generation || !port) throw new Error("FILL_REVOKED");
+  };
+  active();
+  if (!Number.isInteger(input.tabId)) throw new Error("INVALID_TAB");
+  if (typeof input.contactId !== "string" || !/^[a-zA-Z0-9_-]{1,128}$/.test(input.contactId))
+    throw new Error("CONTACT_NOT_FOUND");
+  const tab = await chrome.tabs.get(input.tabId);
+  active();
+  if (safeOrigin(tab.url) !== input.origin) throw new Error("TAB_CHANGED");
+  const before = await frames(input.tabId);
+  active();
+  const top = before.find((f) => f.frameId === 0);
+  if (!top || top.origin !== input.origin || top.documentId !== input.documentId) throw new Error("TAB_CHANGED");
+  const selectedOrigins = [...new Set([input.origin, ...(input.frameOrigins || [])])].sort();
+  const selected = before.filter((f) => selectedOrigins.includes(f.origin));
+  const documents = [];
+  // Inspect before resolving. Exact document IDs prevent a navigation from
+  // changing where values are injected; page text/values never leave the DOM.
+  for (const f of selected) {
+    active();
+    const result = await chrome.scripting.executeScript({
+      target: { tabId: input.tabId, documentIds: [f.documentId] },
+      func: fillDocument,
+      args: [f.origin, {}, "inspect"],
+      world: "ISOLATED",
+    });
+    const fields = result[0]?.result?.fields || [];
+    if (fields.length) documents.push({ ...f, fields: fields.filter((x) => x.count === 1).map((x) => x.field) });
+  }
+  if (!documents.length) return { ok: false, error: "NO_SUPPORTED_FIELDS", excludedFrames: before.length - selected.length };
+  active();
+  const values = await rpc("resolve", { contactId: input.contactId });
+  try {
+    active();
+    const current = await frames(input.tabId);
+    active();
+    if (!current.some((f) => f.frameId === 0 && f.documentId === top.documentId && f.origin === top.origin))
+      throw new Error("TAB_CHANGED");
+    const results = [];
+    for (const doc of documents) {
+      active();
+      if (!current.some((f) => f.documentId === doc.documentId && f.origin === doc.origin)) throw new Error("FRAME_CHANGED");
+      const picked = {};
+      for (const field of doc.fields) {
+        const key = field === "country-name" ? "country" : field === "tel-national" ? "tel" : field;
+        if (values[key]) picked[key] = values[key];
+      }
+      try {
+        const result = await chrome.scripting.executeScript({
+          target: { tabId: input.tabId, documentIds: [doc.documentId] },
+          func: fillDocument,
+          args: [doc.origin, picked, "fill"],
+          world: "ISOLATED",
+        });
+        active();
+        results.push({ frameId: doc.frameId, origin: doc.origin, ...result[0]?.result });
+      } finally {
+        for (const k of Object.keys(picked)) delete picked[k];
+      }
+    }
+    return {
+      ok: true,
+      contactId: input.contactId,
+      tabId: input.tabId,
+      origin: input.origin,
+      filled: results.reduce((n, r) => n + (r.fields || []).filter((f) => f.status === "filled").length, 0),
+      excludedFrames: before.length - selected.length,
+      results,
+    };
+  } finally {
+    for (const k of Object.keys(values)) delete values[k];
+  }
+}
+function searchQuery(value) {
+  if (value === undefined || value === null) return "";
+  if (typeof value !== "string") throw new Error("INVALID_QUERY");
+  return value.trim().slice(0, 200);
+}
+// In-page picker (content.js). Everything about the target is derived from the
+// sender Chrome attaches to the message — tab, frame, document and URL — never
+// from the message body, so a page cannot point a fill at another tab or origin.
+const PAGE_OPS = new Set(["page-search", "page-fill"]);
+const pageFills = new Set();
+function pageSender(sender) {
+  if (!sender || sender.id !== chrome.runtime.id) return null;
+  if (!sender.tab || !Number.isInteger(sender.tab.id)) return null;
+  if (!Number.isInteger(sender.frameId) || typeof sender.documentId !== "string") return null;
+  const origin = safeOrigin(sender.url);
+  if (!origin) return null;
+  return { tabId: sender.tab.id, frameId: sender.frameId, documentId: sender.documentId, origin };
+}
+async function pageFill(page, contactId) {
+  if (typeof contactId !== "string" || !/^[a-zA-Z0-9_-]{1,128}$/.test(contactId)) throw new Error("CONTACT_NOT_FOUND");
+  if (pageFills.has(page.tabId)) throw new Error("FILL_BUSY");
+  pageFills.add(page.tabId);
+  try {
+    // Same detection the popup uses: the fill covers the top document and every
+    // frame where supported fields were found, not only the frame the badge
+    // lives in. The sender's own document must still be the one it claims.
+    const context = await pageContext(page.tabId);
+    if (!context) throw new Error("TAB_CHANGED");
+    const me = (await frames(page.tabId)).find((f) => f.frameId === page.frameId);
+    if (!me || me.documentId !== page.documentId || me.origin !== page.origin) throw new Error("TAB_CHANGED");
+    const result = await fill({
+      contactId,
+      tabId: page.tabId,
+      origin: context.origin,
+      documentId: context.documentId,
+      frameOrigins: [...new Set([...context.frameOrigins, page.origin])].sort(),
+    });
+    // The page receives a receipt of counts only: no ids, origins or frames.
+    const fields = (result.results || []).flatMap((r) => r.fields || []);
+    return { ok: result.ok === true, filled: result.filled || 0, skipped: fields.filter((f) => f.status !== "filled").length };
+  } finally {
+    pageFills.delete(page.tabId);
+  }
+}
+chrome.runtime.onMessage.addListener((message, sender, reply) => {
+  const page = message && PAGE_OPS.has(message.op) ? pageSender(sender) : null;
+  // Otherwise only the popup may talk to this worker.
+  if (!page && (sender.id !== chrome.runtime.id || sender.url?.split("?")[0] !== chrome.runtime.getURL("popup.html")))
+    return false;
+  (async () => {
+    if (page) {
+      if (message.op === "page-search") return rpc("search", { query: searchQuery(message.query) });
+      return pageFill(page, message.contactId);
+    }
+    if (message.op === "init") {
+      const [contacts, pageInfo] = await Promise.all([rpc("search", { query: "" }), pageContext(message.tabId)]);
+      return { contacts, page: pageInfo };
+    }
+    if (message.op === "search") return rpc("search", { query: searchQuery(message.query) });
+    if (message.op === "detect") return pageContext(message.input.tabId, message.input);
+    if (message.op === "fill") return fill(message.input);
+    throw new Error("UNKNOWN_COMMAND");
+  })()
+    .then((result) => reply({ ok: true, result }))
+    .catch((e) => {
+      const allowed = [
+        "NATIVE_UNAVAILABLE",
+        "NATIVE_TIMEOUT",
+        "CONTACTS_UNAVAILABLE",
+        "CONTACTS_NOT_CONFIGURED",
+        "CONTACT_NOT_FOUND",
+        "TAB_CHANGED",
+        "FRAME_CHANGED",
+        "FILL_REVOKED",
+        "FILL_BUSY",
+        "INVALID_QUERY",
+      ];
+      reply({ ok: false, error: allowed.includes(e.message) ? e.message : "FILL_FAILED" });
+    });
+  return true;
+});
+chrome.alarms.onAlarm.addListener(() => connect().catch(() => {}));
+chrome.runtime.onInstalled.addListener(() => chrome.alarms.create("contacts-native", { periodInMinutes: 1 }));
+chrome.runtime.onStartup.addListener(() => connect().catch(() => {}));
+connect().catch(() => {});

package/extension/content.js

@@ -0,0 +1,387 @@
+// Contacts — in-page picker (content script, every https frame).
+//
+// Finds identity/address controls with the shared detect.js rules, draws a
+// small Contacts badge inside the anchor fields and, on a TRUSTED and VISIBLE
+// click, opens a picker with a search box listing contact names. Choosing a
+// contact asks the background worker to run the human fill for this tab;
+// contact values never enter this script — the worker injects them into exact
+// document IDs.
+//
+// Never fills on load, never reads field values, never talks to the Contacts
+// API, never acts on synthetic or deceived events. A page script can find the
+// badge host element but cannot open the closed shadow root; the host's own
+// styling is pinned with !important so page CSS cannot hide, fade, move or
+// blend it; and every click must be trusted AND land on a control that
+// IntersectionObserver v2 has reported as unoccluded and unaltered for a
+// minimum dwell time. A covered, transparent or off-screen badge or row is
+// refused.
+(() => {
+  if (typeof window === "undefined" || window.__hasnaContactsPicker) return;
+  window.__hasnaContactsPicker = true;
+  const detect = window.ContactsDetect;
+  if (!detect || !document.documentElement) return;
+
+  const BADGE = 20;
+  const MIN_VISIBLE_MS = 300; // continuous unoccluded time before a click counts
+  const MAX_SHADOW_WALK = 3000; // elements inspected per scan for open shadow roots
+  const state = { host: null, layer: null, menu: null, badges: new Map(), open: null, rescan: 0, raf: 0, search: 0, seq: 0 };
+
+  // IntersectionObserver v2 (trackVisibility) reports isVisible === false when the
+  // target is covered by other content or when it, or an ancestor, carries
+  // opacity, filters or transforms. Clicks are accepted only after a control has
+  // been continuously visible for MIN_VISIBLE_MS. No observer means no clicks.
+  const visibleSince = new WeakMap();
+  const clock = () => (typeof performance !== "undefined" && performance.now ? performance.now() : Date.now());
+  const observer =
+    typeof IntersectionObserver === "function"
+      ? new IntersectionObserver(
+          (entries) => {
+            for (const entry of entries) {
+              if (entry.isVisible === true && entry.isIntersecting && entry.intersectionRatio >= 0.99) visibleSince.set(entry.target, visibleSince.get(entry.target) ?? clock());
+              else visibleSince.delete(entry.target);
+            }
+          },
+          { threshold: 1, trackVisibility: true, delay: 100 },
+        )
+      : null;
+  function watch(el) {
+    if (observer) observer.observe(el);
+  }
+  function unwatch(el) {
+    if (observer) observer.unobserve(el);
+    visibleSince.delete(el);
+  }
+  /** True only for a trusted click on a control that has been visibly unobstructed long enough. */
+  function acceptable(event, el) {
+    if (!event || event.isTrusted !== true) return false;
+    if (!observer) return false;
+    const since = visibleSince.get(el);
+    return typeof since === "number" && clock() - since >= MIN_VISIBLE_MS;
+  }
+
+  // The host is a light-DOM element the page can style; pin everything that could
+  // hide, fade, move, clip or blend it. Important shadow :host declarations win
+  // over page rules of any specificity or importance.
+  const css = `
+:host { all: initial !important; display: block !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; backdrop-filter: none !important; clip-path: none !important; clip: auto !important; mask: none !important; mix-blend-mode: normal !important; pointer-events: auto !important; contain: none !important; content-visibility: visible !important; isolation: auto !important; perspective: none !important; zoom: 1 !important; translate: none !important; rotate: none !important; scale: none !important; }
+.layer { position: fixed; inset: 0; pointer-events: none; z-index: 2147483647; font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: #172033; }
+.badge { position: absolute; width: ${BADGE}px; height: ${BADGE}px; border: 0; border-radius: 6px; padding: 0; margin: 0; cursor: pointer; pointer-events: auto; background: #2e4a7a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='7.5' r='3.2' fill='%23ffffff'/><path d='M4.5 16c.5-3.3 2.8-5 5.5-5s5 1.7 5.5 5z' fill='%23d6e1f5'/></svg>") center/16px no-repeat; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
+.badge:hover, .badge:focus-visible { box-shadow: 0 0 0 2px #8fb0e6, 0 1px 2px rgba(0,0,0,.25); outline: none; }
+.menu { position: absolute; min-width: 284px; max-width: 340px; pointer-events: auto; background: #ffffff; color: #172033; border: 1px solid #d8dfe9; border-radius: 12px; box-shadow: 0 12px 32px rgba(23, 44, 79, .18), 0 2px 6px rgba(0,0,0,.08); overflow: hidden; }
+.menu header { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; border-bottom: 1px solid #e6ebf2; }
+.menu header .mark { width: 18px; height: 18px; border-radius: 5px; background: #2e4a7a; flex: none; }
+.menu header strong { font-size: 13px; font-weight: 650; }
+.menu header span { margin-left: auto; color: #6b7686; font-size: 11px; }
+.search { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 9px 12px; border: 0; border-bottom: 1px solid #e6ebf2; background: #f6f8fb; color: inherit; font: inherit; outline: none; }
+.search:focus { background: #eef3fa; }
+.list { list-style: none; margin: 0; padding: 6px; max-height: 240px; overflow: auto; }
+.item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.item:hover, .item:focus-visible { background: #eef3fa; outline: none; }
+.item .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #2e4a7a, #172c4f); color: #fff; font: 600 11px system-ui, sans-serif; display: grid; place-items: center; flex: none; }
+.item .meta { flex: 1; min-width: 0; }
+.item .name { display: block; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.item .sub { display: block; color: #6b7686; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.note { padding: 10px 12px; color: #55606f; font-size: 12px; }
+.note.error { color: #9b3229; }
+.note code { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; background: #f1f4f8; padding: 1px 4px; border-radius: 4px; }
+.foot { padding: 6px 12px 9px; color: #7a8492; font-size: 11px; border-top: 1px solid #e6ebf2; }
+@media (prefers-color-scheme: dark) {
+  .layer { color: #e6ebf3; }
+  .menu { background: #171e2b; color: #e6ebf3; border-color: #2b3546; box-shadow: 0 12px 32px rgba(0,0,0,.5); }
+  .menu header, .foot { border-color: #253046; }
+  .search { background: #1d2636; border-color: #253046; } .search:focus { background: #223047; }
+  .item:hover, .item:focus-visible { background: #223047; }
+  .note { color: #aab4c3; } .note code { background: #223047; }
+  .foot, .menu header span, .item .sub { color: #8d98a8; }
+}`;
+
+  function parent() {
+    return document.body || document.documentElement;
+  }
+  function mount() {
+    if (state.host) {
+      // A page that removes the host does not get a silent, badge-less form.
+      if (!state.host.isConnected) parent().appendChild(state.host);
+      return;
+    }
+    const host = document.createElement("hasna-contacts-picker");
+    const shadow = host.attachShadow({ mode: "closed" });
+    const style = document.createElement("style");
+    style.textContent = css;
+    const layer = document.createElement("div");
+    layer.className = "layer";
+    shadow.append(style, layer);
+    parent().appendChild(host);
+    state.host = host;
+    state.layer = layer;
+  }
+  const trusted = (event) => !!event && event.isTrusted === true;
+
+  function place(el, badge) {
+    let rect;
+    try { rect = el.getBoundingClientRect(); } catch { return false; }
+    if (!rect || rect.width < BADGE + 12 || rect.height < BADGE) { badge.style.display = "none"; return false; }
+    badge.style.display = "";
+    badge.style.left = `${Math.round(rect.right - BADGE - 6)}px`;
+    badge.style.top = `${Math.round(rect.top + (rect.height - BADGE) / 2)}px`;
+    return true;
+  }
+  function dropBadge(el, badge) {
+    unwatch(badge);
+    badge.remove();
+    state.badges.delete(el);
+    if (state.open && state.open.el === el) closeMenu();
+  }
+  function reposition() {
+    state.raf = 0;
+    for (const [el, badge] of state.badges) {
+      if (!el.isConnected) {
+        dropBadge(el, badge);
+        continue;
+      }
+      place(el, badge);
+    }
+    if (state.open && state.menu) placeMenu(state.open.el);
+  }
+  function scheduleReposition() {
+    if (state.raf) return;
+    state.raf = requestAnimationFrame(reposition);
+  }
+  function decorate(hit) {
+    if (state.badges.has(hit.el)) return;
+    const badge = document.createElement("button");
+    badge.type = "button";
+    badge.className = "badge";
+    badge.setAttribute("aria-label", "Fill with Contacts");
+    badge.title = "Fill this form from your Contacts";
+    badge.addEventListener("click", (event) => {
+      if (!acceptable(event, badge)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (state.open && state.open.el === hit.el) closeMenu();
+      else openMenu(hit).catch(() => {});
+    });
+    state.layer.appendChild(badge);
+    state.badges.set(hit.el, badge);
+    watch(badge);
+    place(hit.el, badge);
+  }
+  function scan() {
+    const found = detect.collect(document, [], MAX_SHADOW_WALK);
+    const summary = detect.summarize(found);
+    if (!summary.contact) {
+      for (const [el, badge] of state.badges) dropBadge(el, badge);
+      return summary;
+    }
+    mount();
+    for (const hit of detect.anchors(found)) decorate(hit);
+    scheduleReposition();
+    return summary;
+  }
+  function placeMenu(el) {
+    const rect = el.getBoundingClientRect();
+    const menu = state.menu;
+    const width = Math.min(340, Math.max(284, rect.width));
+    let left = Math.round(rect.left);
+    if (left + width > window.innerWidth - 8) left = Math.max(8, window.innerWidth - width - 8);
+    let top = Math.round(rect.bottom + 6);
+    const height = menu.offsetHeight || 220;
+    if (top + height > window.innerHeight - 8 && rect.top - height - 6 > 0) top = Math.round(rect.top - height - 6);
+    menu.style.left = `${left}px`;
+    menu.style.top = `${top}px`;
+    menu.style.width = `${width}px`;
+  }
+  function note(text, error = false) {
+    const p = document.createElement("p");
+    p.className = `note${error ? " error" : ""}`;
+    p.textContent = text;
+    return p;
+  }
+  function initials(name) {
+    const parts = String(name || "").trim().split(/\s+/).filter(Boolean);
+    return (parts.length ? parts.slice(0, 2).map((p) => p[0]).join("") : "?").toUpperCase();
+  }
+  async function search(query, body, hit) {
+    const seq = ++state.seq;
+    let r;
+    try { r = await chrome.runtime.sendMessage({ op: "page-search", query }); } catch { r = null; }
+    if (seq !== state.seq || !state.open || state.open.el !== hit.el) return;
+    if (!r || !r.ok) {
+      body.replaceChildren(note(r && r.error === "CONTACTS_NOT_CONFIGURED" ? "Contacts is not signed in on this station." : "Contacts is not connected on this station.", true));
+      const how = note("");
+      how.append("Run ");
+      const code = document.createElement("code");
+      code.textContent = "contacts browser install";
+      how.append(code, " in a terminal, then reload this page.");
+      body.append(how);
+      placeMenu(hit.el);
+      return;
+    }
+    const contacts = r.result || [];
+    if (!contacts.length) {
+      body.replaceChildren(note(query ? `No contacts match “${query}”.` : "No contacts yet."));
+      placeMenu(hit.el);
+      return;
+    }
+    const list = document.createElement("ul");
+    list.className = "list";
+    for (const contact of contacts) {
+      const li = document.createElement("li");
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "item";
+      const avatar = document.createElement("span");
+      avatar.className = "avatar";
+      avatar.textContent = initials(contact.name);
+      const meta = document.createElement("span");
+      meta.className = "meta";
+      const name = document.createElement("span");
+      name.className = "name";
+      name.textContent = contact.name;
+      const sub = document.createElement("span");
+      sub.className = "sub";
+      sub.textContent = [contact.company, contact.email].filter(Boolean).join(" · ");
+      meta.append(name, sub);
+      btn.append(avatar, meta);
+      btn.addEventListener("click", (event) => {
+        if (!acceptable(event, btn)) {
+          if (event && event.isTrusted === true && !body.querySelector(".note.early")) {
+            // A real click that arrived before the row was verifiably visible (one note, not one per click).
+            const early = note("Contacts could not confirm this picker is fully visible. Try again.", true);
+            early.className += " early";
+            body.append(early);
+          }
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        fill(contact, body, hit).catch(() => {});
+      });
+      li.appendChild(btn);
+      list.appendChild(li);
+      watch(btn);
+    }
+    for (const btn of body.querySelectorAll ? body.querySelectorAll("button") : []) unwatch(btn);
+    body.replaceChildren(list);
+    placeMenu(hit.el);
+  }
+  async function openMenu(hit) {
+    closeMenu();
+    const menu = document.createElement("div");
+    menu.className = "menu";
+    menu.setAttribute("role", "dialog");
+    menu.setAttribute("aria-label", "Contacts");
+    const header = document.createElement("header");
+    const mark = document.createElement("span");
+    mark.className = "mark";
+    const title = document.createElement("strong");
+    title.textContent = "Fill from Contacts";
+    const site = document.createElement("span");
+    site.textContent = location.hostname;
+    header.append(mark, title, site);
+    const input = document.createElement("input");
+    input.type = "search";
+    input.className = "search";
+    input.placeholder = "Search contacts…";
+    input.setAttribute("aria-label", "Search contacts");
+    input.autocomplete = "off";
+    const body = document.createElement("div");
+    body.append(note("Loading your contacts…"));
+    const foot = document.createElement("div");
+    foot.className = "foot";
+    foot.textContent = "Fills name, email, phone, company and address fields.";
+    menu.append(header, input, body, foot);
+    state.layer.appendChild(menu);
+    state.menu = menu;
+    state.open = hit;
+    placeMenu(hit.el);
+    input.addEventListener("input", (event) => {
+      if (!trusted(event)) return;
+      clearTimeout(state.search);
+      const query = input.value.trim().slice(0, 200);
+      state.search = setTimeout(() => search(query, body, hit), 250);
+    });
+    input.addEventListener("keydown", (event) => {
+      if (event.key === "Escape" && trusted(event)) closeMenu();
+    });
+    input.focus({ preventScroll: true });
+    await search("", body, hit);
+  }
+  async function fill(contact, body, hit) {
+    body.replaceChildren(note(`Filling ${contact.name}…`));
+    let r;
+    try { r = await chrome.runtime.sendMessage({ op: "page-fill", contactId: contact.id }); } catch { r = null; }
+    if (!state.open || state.open.el !== hit.el) return;
+    if (!r || !r.ok) {
+      const hints = { CONTACT_NOT_FOUND: "This contact is no longer available.", TAB_CHANGED: "The page changed. Try again.", CONTACTS_NOT_CONFIGURED: "Contacts is not signed in on this station.", FILL_BUSY: "Another fill is still running in this tab." };
+      body.replaceChildren(note(hints[r && r.error] || "Autofill did not complete. Try again.", true));
+      return;
+    }
+    const result = r.result;
+    if (!result.ok) { body.replaceChildren(note("No supported fields were found to fill.", true)); return; }
+    body.replaceChildren(note(`Filled ${result.filled} field${result.filled === 1 ? "" : "s"}.${result.skipped ? ` ${result.skipped} need your review.` : ""}`));
+    setTimeout(() => { if (state.open && state.open.el === hit.el) closeMenu(); }, 1600);
+  }
+  function closeMenu() {
+    clearTimeout(state.search);
+    if (state.menu) {
+      for (const btn of state.menu.querySelectorAll("button")) unwatch(btn);
+      state.menu.remove();
+    }
+    state.menu = null;
+    state.open = null;
+  }
+  function onDocumentPointer(event) {
+    if (!state.open || !trusted(event)) return;
+    const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+    if (path.includes(state.host)) return;
+    closeMenu();
+  }
+  function onKey(event) {
+    if (event.key === "Escape" && state.open && trusted(event)) closeMenu();
+  }
+  function scheduleScan() {
+    clearTimeout(state.rescan);
+    state.rescan = setTimeout(scan, 350);
+  }
+
+  // Rescan only for mutations that can change the set of form controls: a
+  // control's own attributes, or inserted subtrees that carry controls, forms,
+  // frames or shadow hosts. Text and layout churn on busy pages is ignored.
+  const CONTROLS = "input,select,textarea,form,iframe";
+  function relevant(mutation) {
+    if (state.host && (mutation.target === state.host || state.host.contains(mutation.target))) return false;
+    if (mutation.type === "attributes") {
+      const t = mutation.target;
+      return !!t && typeof t.matches === "function" && t.matches("input,select,textarea");
+    }
+    for (const node of mutation.addedNodes || []) {
+      if (!node || node.nodeType !== 1) continue;
+      if (node.shadowRoot) return true;
+      if (typeof node.matches === "function" && node.matches(CONTROLS)) return true;
+      if (typeof node.querySelector === "function" && node.querySelector(CONTROLS)) return true;
+    }
+    for (const node of mutation.removedNodes || []) {
+      if (node && node.nodeType === 1 && state.badges.size) return true;
+    }
+    return false;
+  }
+
+  scan();
+  const mutations = new MutationObserver((records) => {
+    for (const m of records) {
+      if (relevant(m)) {
+        scheduleScan();
+        return;
+      }
+    }
+  });
+  mutations.observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ["autocomplete", "name", "id", "disabled", "readonly", "type"] });
+  window.addEventListener("scroll", scheduleReposition, { capture: true, passive: true });
+  window.addEventListener("resize", scheduleReposition, { passive: true });
+  document.addEventListener("pointerdown", onDocumentPointer, true);
+  document.addEventListener("keydown", onKey, true);
+  setInterval(() => {
+    if (state.badges.size) scheduleReposition();
+  }, 1000);
+})();