@hasna/contacts 0.8.1 → 0.9.1

package/extension/detect.js

@@ -0,0 +1,228 @@
+// Contacts — shared identity/address field detection rules for the in-page picker.
+//
+// Loaded before content.js as a classic content script and loadable under
+// node:vm in tests. It is PURE: it reads form-control attributes and labels,
+// never values, never the Contacts API. The allowlist and aliases mirror
+// fill.js, which stays self-contained because chrome.scripting serializes it.
+(function (root, factory) {
+  if (typeof module !== "undefined" && module.exports) module.exports = factory();
+  else root.ContactsDetect = factory();
+})(typeof globalThis !== "undefined" ? globalThis : this, function () {
+  const IDENTITY_FIELDS = new Set([
+    "name",
+    "given-name",
+    "additional-name",
+    "family-name",
+    "honorific-prefix",
+    "nickname",
+    "organization",
+    "organization-title",
+    "email",
+    "tel",
+    "tel-national",
+    "url",
+    "bday",
+  ]);
+  const ADDRESS_FIELDS = new Set([
+    "street-address",
+    "address-line1",
+    "address-line2",
+    "address-level1",
+    "address-level2",
+    "postal-code",
+    "country",
+    "country-name",
+  ]);
+  const FIELDS = new Set([...IDENTITY_FIELDS, ...ADDRESS_FIELDS]);
+  // Fields that make a form worth a Contacts badge on their own.
+  const BADGE_FIELDS = new Set(["name", "given-name", "family-name", "email", "tel", "tel-national", "organization"]);
+  const ALIASES = {
+    name: "name",
+    fullname: "name",
+    yourname: "name",
+    contactname: "name",
+    firstname: "given-name",
+    givenname: "given-name",
+    fname: "given-name",
+    forename: "given-name",
+    middlename: "additional-name",
+    lastname: "family-name",
+    familyname: "family-name",
+    surname: "family-name",
+    lname: "family-name",
+    nickname: "nickname",
+    title: "honorific-prefix",
+    salutation: "honorific-prefix",
+    company: "organization",
+    companyname: "organization",
+    organization: "organization",
+    organisation: "organization",
+    employer: "organization",
+    jobtitle: "organization-title",
+    position: "organization-title",
+    role: "organization-title",
+    email: "email",
+    emailaddress: "email",
+    mail: "email",
+    phone: "tel",
+    phonenumber: "tel",
+    telephone: "tel",
+    tel: "tel",
+    mobile: "tel",
+    mobilenumber: "tel",
+    cell: "tel",
+    website: "url",
+    url: "url",
+    homepage: "url",
+    birthday: "bday",
+    dateofbirth: "bday",
+    dob: "bday",
+    address: "address-line1",
+    address1: "address-line1",
+    addressline1: "address-line1",
+    streetaddress: "street-address",
+    street: "address-line1",
+    address2: "address-line2",
+    addressline2: "address-line2",
+    apartment: "address-line2",
+    suite: "address-line2",
+    city: "address-level2",
+    town: "address-level2",
+    locality: "address-level2",
+    state: "address-level1",
+    province: "address-level1",
+    region: "address-level1",
+    county: "address-level1",
+    zip: "postal-code",
+    zipcode: "postal-code",
+    postcode: "postal-code",
+    postalcode: "postal-code",
+    country: "country",
+    countrycode: "country",
+    countryname: "country-name",
+  };
+  const SKIP_TYPES = new Set([
+    "hidden",
+    "password",
+    "submit",
+    "button",
+    "checkbox",
+    "radio",
+    "file",
+    "image",
+    "reset",
+    "range",
+    "color",
+  ]);
+
+  function normalize(value) {
+    return String(value || "")
+      .toLowerCase()
+      .replace(/[^a-z0-9]/g, "");
+  }
+  function attr(el, name) {
+    try {
+      return typeof el.getAttribute === "function" ? el.getAttribute(name) : null;
+    } catch {
+      return null;
+    }
+  }
+  function tagName(el) {
+    return String(el.tagName || el.localName || "").toLowerCase();
+  }
+
+  /** True for an enabled, writable text-like control worth inspecting. */
+  function isCandidate(el) {
+    if (!el) return false;
+    const tag = tagName(el);
+    if (tag !== "input" && tag !== "select" && tag !== "textarea") return false;
+    if (el.disabled || el.readOnly) return false;
+    if (tag === "input" && SKIP_TYPES.has(String(el.type || "text").toLowerCase())) return false;
+    if (attr(el, "aria-hidden") === "true") return false;
+    return true;
+  }
+
+  /**
+   * Map one control to a supported field name, or null. Autocomplete tokens win
+   * (an explicit unrelated token is authoritative); aliases fall back to the
+   * control's name/id, then its aria-label, placeholder and associated label.
+   * Input types email/tel/url count as hints when nothing else names the field.
+   */
+  function classify(el) {
+    if (!isCandidate(el)) return null;
+    const tokens = String(attr(el, "autocomplete") || "")
+      .toLowerCase()
+      .split(/\s+/);
+    const auto = tokens.find((t) => FIELDS.has(t));
+    if (auto) return auto;
+    if (tokens.includes("off") === false && tokens.some((t) => t && t !== "on")) return null;
+    const hints = [el.name, el.id, attr(el, "aria-label"), el.placeholder];
+    const labels = el.labels && el.labels.length ? Array.from(el.labels) : [];
+    for (const label of labels) hints.push(label.textContent);
+    for (const hint of hints) {
+      const key = normalize(hint);
+      if (key && ALIASES[key]) return ALIASES[key];
+    }
+    const type = String(el.type || "").toLowerCase();
+    if (type === "email") return "email";
+    if (type === "tel") return "tel";
+    if (type === "url") return "url";
+    return null;
+  }
+
+  /**
+   * Every supported control under `root`, including open shadow roots. The
+   * shadow-host walk is bounded by `budget` elements per call so a very large
+   * document costs one bounded pass, never an unbounded tree walk.
+   */
+  function collect(root, out = [], budget = Infinity) {
+    if (!root || typeof root.querySelectorAll !== "function") return out;
+    for (const el of root.querySelectorAll("input,select,textarea")) {
+      const field = classify(el);
+      if (field) out.push({ el, field });
+    }
+    let seen = 0;
+    for (const host of root.querySelectorAll("*")) {
+      if (++seen > budget) break;
+      if (host.shadowRoot) collect(host.shadowRoot, out, budget);
+    }
+    return out;
+  }
+
+  /** Controls that get a picker badge: the name, the email, then the address. */
+  function anchors(list, max = 3) {
+    const order = ["name", "given-name", "email", "address-line1", "street-address", "tel", "organization"];
+    const chosen = [];
+    for (const field of order) {
+      const hit = list.find((x) => x.field === field && !chosen.includes(x));
+      if (hit) chosen.push(hit);
+      if (chosen.length >= max) break;
+    }
+    return chosen;
+  }
+
+  function summarize(list) {
+    const identity = list.filter((x) => IDENTITY_FIELDS.has(x.field)).length;
+    const address = list.length - identity;
+    return {
+      total: list.length,
+      identity,
+      address,
+      contact: list.some((x) => BADGE_FIELDS.has(x.field)),
+    };
+  }
+
+  return {
+    FIELDS,
+    IDENTITY_FIELDS,
+    ADDRESS_FIELDS,
+    BADGE_FIELDS,
+    ALIASES,
+    normalize,
+    isCandidate,
+    classify,
+    collect,
+    anchors,
+    summarize,
+  };
+});

package/extension/fill.js

@@ -0,0 +1,112 @@
+// This function is serialized by chrome.scripting; keep it self-contained.
+// It runs in an isolated world, in a previously selected documentId only.
+export function fillDocument(expectedOrigin, values, mode = "fill") {
+  if (location.origin !== expectedOrigin) return { status: "origin_changed", fields: [] };
+  const allowed = new Set([
+    "name",
+    "given-name",
+    "additional-name",
+    "family-name",
+    "honorific-prefix",
+    "nickname",
+    "organization",
+    "organization-title",
+    "email",
+    "tel",
+    "tel-national",
+    "url",
+    "bday",
+    "street-address",
+    "address-line1",
+    "address-line2",
+    "address-level1",
+    "address-level2",
+    "postal-code",
+    "country",
+    "country-name",
+  ]);
+  const aliases = {
+    name: "name", fullname: "name", yourname: "name", contactname: "name",
+    firstname: "given-name", givenname: "given-name", fname: "given-name", forename: "given-name",
+    middlename: "additional-name",
+    lastname: "family-name", familyname: "family-name", surname: "family-name", lname: "family-name",
+    nickname: "nickname", title: "honorific-prefix", salutation: "honorific-prefix",
+    company: "organization", companyname: "organization", organization: "organization", organisation: "organization", employer: "organization",
+    jobtitle: "organization-title", position: "organization-title", role: "organization-title",
+    email: "email", emailaddress: "email", mail: "email",
+    phone: "tel", phonenumber: "tel", telephone: "tel", tel: "tel", mobile: "tel", mobilenumber: "tel", cell: "tel",
+    website: "url", url: "url", homepage: "url",
+    birthday: "bday", dateofbirth: "bday", dob: "bday",
+    address: "address-line1", address1: "address-line1", addressline1: "address-line1", streetaddress: "street-address", street: "address-line1",
+    address2: "address-line2", addressline2: "address-line2", apartment: "address-line2", suite: "address-line2",
+    city: "address-level2", town: "address-level2", locality: "address-level2",
+    state: "address-level1", province: "address-level1", region: "address-level1", county: "address-level1",
+    zip: "postal-code", zipcode: "postal-code", postcode: "postal-code", postalcode: "postal-code",
+    country: "country", countrycode: "country", countryname: "country-name",
+  };
+  const skipTypes = ["hidden", "password", "submit", "button", "checkbox", "radio", "file", "image", "reset", "range", "color"];
+  const nodes = [];
+  function walk(root) {
+    for (const el of root.querySelectorAll("*")) {
+      if (el.matches("input,select,textarea")) nodes.push(el);
+      if (el.shadowRoot) walk(el.shadowRoot);
+    }
+  }
+  walk(document);
+  const norm = (s) => String(s || "").toLowerCase().replace(/[^a-z0-9]/g, "");
+  const groups = new Map();
+  for (const el of nodes) {
+    const tokens = (el.getAttribute("autocomplete") || "").toLowerCase().split(/\s+/);
+    let field = tokens.find((t) => allowed.has(t));
+    if (!field) {
+      if (tokens.some((t) => t && t !== "on" && t !== "off")) continue;
+      const hints = [el.name, el.id, el.getAttribute("aria-label"), el.placeholder];
+      for (const label of el.labels ? Array.from(el.labels) : []) hints.push(label.textContent);
+      for (const hint of hints) {
+        const key = norm(hint);
+        if (key && aliases[key]) { field = aliases[key]; break; }
+      }
+      if (!field) {
+        const type = String(el.type || "").toLowerCase();
+        field = type === "email" ? "email" : type === "tel" ? "tel" : type === "url" ? "url" : undefined;
+      }
+    }
+    if (!field || el.matches(":disabled") || el.readOnly || skipTypes.includes(el.type)) continue;
+    if (el.closest('[inert],[aria-hidden="true"]')) continue;
+    const style = getComputedStyle(el);
+    if (style.visibility !== "visible" || Number(style.opacity) === 0 || !el.getClientRects().length) continue;
+    if (el.checkVisibility && !el.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true })) continue;
+    if (!groups.has(field)) groups.set(field, []);
+    groups.get(field).push(el);
+  }
+  if (mode === "inspect") return { status: "ready", fields: [...groups].map(([field, els]) => ({ field, count: els.length })) };
+  const results = [];
+  for (const [field, els] of groups) {
+    if (els.length !== 1) { results.push({ field, status: "ambiguous" }); continue; }
+    const key = field === "country-name" ? "country" : field === "tel-national" ? "tel" : field;
+    const value = values[key];
+    if (!value) { results.push({ field, status: "unavailable" }); continue; }
+    const el = els[0];
+    let next = value;
+    if (field === "bday" && el.type === "date") next = value.slice(0, 10);
+    if (el instanceof HTMLSelectElement) {
+      const candidates = [norm(next)];
+      if (field === "country" || field === "country-name") {
+        try { candidates.push(norm(new Intl.DisplayNames(["en"], { type: "region" }).of(next.toUpperCase()))); } catch {}
+      }
+      const options = [...el.options].filter((o) => !o.disabled && (candidates.includes(norm(o.value)) || candidates.includes(norm(o.textContent))));
+      if (options.length !== 1) { results.push({ field, status: "option_missing_or_ambiguous" }); continue; }
+      next = options[0].value;
+    } else if (el.maxLength > 0 && next.length > el.maxLength) {
+      results.push({ field, status: "too_short" }); continue;
+    }
+    const proto = el instanceof HTMLSelectElement ? HTMLSelectElement.prototype : el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+    try {
+      Object.getOwnPropertyDescriptor(proto, "value").set.call(el, next);
+      el.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+      el.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+      results.push({ field, status: el.value === next ? "filled" : "rejected" });
+    } catch { results.push({ field, status: "rejected" }); }
+  }
+  return { status: results.some((x) => x.status === "filled") ? "filled" : "no_fields_filled", fields: results };
+}

package/extension/icons/icon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <rect x="4" y="4" width="120" height="120" rx="28" fill="#0A0A0A"/>
+  <g fill="none" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="64" cy="50" r="17"/>
+    <path d="M32 100c4-20 17-30 32-30s28 10 32 30"/>
+  </g>
+</svg>

package/extension/manifest.json

@@ -0,0 +1,54 @@
+{
+  "manifest_version": 3,
+  "name": "Hasna Contacts",
+  "version": "0.9.1",
+  "description": "Fill names, emails, phones, companies and addresses from your Contacts. Detects identity fields on the page and offers your contacts inline; nothing is filled until you pick one.",
+  "minimum_chrome_version": "119",
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAzMCnB26YET/ZdPDrwxAnrgeekYVPjoWHUEFUHpiYHFtgjyuBsh63wTlw+nBn0730e84FbbWJ04WYzy9TQcaZK9haaGOALouQa9KTzufHC6JB1T7KdlnPGDgiIcUxsqXn18Rc3J8eWCYB4vX0wc0OgevLDjvbR917XwUpNFxv8jkVpe/yyyRvhG+MYFw9Mwy2j2FMqNHwmtlGXWEt9ZmcTUx0No2dCxbRGdZA9QzcpPgL2i2BTul1eQpLfc2kSbaBMtVrrwPXz0Ara0qjXQP2RLyHlj0t1f0W29AVm6mjRwVGxw/3M4kXfOsUpeEBSQxC8M3KMRd1sYgJ2GFNwmY/fwIDAQAB",
+  "icons": {
+    "16": "icons/16.png",
+    "32": "icons/32.png",
+    "48": "icons/48.png",
+    "128": "icons/128.png"
+  },
+  "permissions": [
+    "activeTab",
+    "scripting",
+    "nativeMessaging",
+    "storage",
+    "tabs",
+    "webNavigation",
+    "alarms"
+  ],
+  "host_permissions": [
+    "https://*/*",
+    "http://127.0.0.1/*",
+    "http://localhost/*"
+  ],
+  "content_scripts": [
+    {
+      "matches": ["https://*/*", "http://127.0.0.1/*", "http://localhost/*"],
+      "js": ["detect.js", "content.js"],
+      "run_at": "document_idle",
+      "all_frames": true,
+      "match_about_blank": false
+    }
+  ],
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "action": {
+    "default_popup": "popup.html",
+    "default_title": "Contacts",
+    "default_icon": {
+      "16": "icons/16.png",
+      "32": "icons/32.png",
+      "48": "icons/48.png",
+      "128": "icons/128.png"
+    }
+  },
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'none'; connect-src 'none'"
+  }
+}

package/extension/popup.css

@@ -0,0 +1,71 @@
+/* Contacts — monochrome system. One ink, one paper, hairlines, inverted hover. */
+:root {
+  color-scheme: light dark;
+  --paper: #ffffff;
+  --ink: #0a0a0a;
+  --muted: #6f6f6f;
+  --line: #e4e4e4;
+  --line-strong: #0a0a0a;
+  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+  --sans: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
+  --r: 4px;
+  font: 13px / 1.45 var(--sans);
+  color: var(--ink);
+  background: var(--paper);
+  -webkit-font-smoothing: antialiased;
+}
+@media (prefers-color-scheme: dark) {
+  :root { --paper: #0a0a0a; --ink: #f4f4f4; --muted: #8c8c8c; --line: #262626; --line-strong: #f4f4f4; }
+}
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+body { margin: 0; width: 336px; min-height: 180px; display: flex; flex-direction: column; background: var(--paper); }
+h1, h2, p { margin: 0; }
+code { font: 11px var(--mono); border: 1px solid var(--line); padding: 1px 5px; border-radius: var(--r); }
+.muted { color: var(--muted); }
+.small { font-size: 11px; }
+.label { font: 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
+
+.top { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line-strong); }
+.mark { width: 22px; height: 22px; flex: none; background: var(--ink); color: var(--paper); border-radius: 5px; display: grid; place-items: center; }
+.mark svg { width: 14px; height: 14px; display: block; }
+.brand { min-width: 0; flex: 1; }
+h1 { font: 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.2; }
+.page { margin-top: 3px; font: 10.5px var(--mono); letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.page[data-ready="true"] { color: var(--ink); }
+.page[data-ready="true"]::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--ink); margin-right: 7px; vertical-align: 1px; }
+
+main { flex: 1; padding: 10px 14px 6px; }
+.state { padding: 26px 8px 22px; text-align: center; color: var(--muted); }
+.state h2 { color: var(--ink); font: 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; }
+.state p + p { margin-top: 8px; }
+.spinner { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: spin 0.9s linear infinite; margin-bottom: 10px; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.search { display: block; width: 100%; margin: 0 0 10px; padding: 9px 0 9px 22px; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236f6f6f' stroke-width='1.6'><circle cx='9' cy='9' r='5.5'/><path d='M13.5 13.5L17 17'/></svg>") left center/14px no-repeat; color: var(--ink); font: 13px var(--sans); }
+.search::placeholder { color: var(--muted); }
+.search:focus-visible { outline: none; border-bottom-width: 2px; }
+.search::-webkit-search-cancel-button { -webkit-appearance: none; }
+
+.page-actions { display: flex; flex-direction: column; gap: 6px; padding: 0 0 12px; }
+.chip-btn { align-self: flex-start; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--r); cursor: pointer; }
+.chip-btn:hover, .chip-btn:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
+
+.section-label { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0 8px; }
+.contacts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-height: 300px; overflow: auto; }
+.contact { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 6px 9px 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background 0.1s ease, color 0.1s ease; }
+.contact:hover:not(:disabled), .contact:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
+.contact:disabled { cursor: default; color: var(--muted); }
+.contact .avatar { width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 3px; display: grid; place-items: center; font: 10px var(--mono); letter-spacing: 0.06em; flex: none; }
+.contact .meta { flex: 1; min-width: 0; }
+.contact .name { display: block; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.contact .sub { display: block; margin-top: 1px; font: 10px var(--mono); letter-spacing: 0.04em; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.contact .arrow { flex: none; font: 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
+.contact.busy .arrow { animation: pulse 0.9s ease-in-out infinite; }
+@keyframes pulse { 50% { opacity: 0.2; } }
+.footnote { padding: 12px 0 4px; font-size: 11px; }
+
+footer { padding: 8px 14px 12px; min-height: 30px; border-top: 1px solid var(--line); }
+#status { font: 10.5px var(--mono); letter-spacing: 0.03em; color: var(--muted); overflow-wrap: anywhere; }
+#status[data-kind="error"] { color: var(--ink); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
+#status[data-kind="ok"] { color: var(--ink); }

package/extension/popup.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Contacts</title>
+<link rel="stylesheet" href="popup.css">
+</head>
+<body>
+<header class="top">
+  <span class="mark" aria-hidden="true">
+    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="10" cy="7.5" r="3.2"/><path d="M4.5 16.5c.6-3.6 2.9-5.5 5.5-5.5s4.9 1.9 5.5 5.5"/></svg>
+  </span>
+  <div class="brand">
+    <h1>Contacts</h1>
+    <p id="page" class="page">Checking this page…</p>
+  </div>
+</header>
+
+<main>
+  <section id="view-connecting" class="state">
+    <span class="spinner" aria-hidden="true"></span>
+    <p class="label">Connecting</p>
+  </section>
+
+  <section id="view-setup" class="state" hidden>
+    <h2>Not connected</h2>
+    <p>Contacts uses the <code>contacts</code> CLI already on this station. Run <code>contacts browser install</code>, then reopen Contacts.</p>
+    <p id="setup-reason" class="muted small"></p>
+  </section>
+
+  <section id="view-contacts" hidden>
+    <input id="query" class="search" type="search" placeholder="Search name, company, email" autocomplete="off" aria-label="Search contacts">
+    <div id="page-actions" class="page-actions" hidden>
+      <button id="detect-frames" class="chip-btn" type="button">Detect embedded fields</button>
+      <span class="muted small">Chrome asks before Contacts looks inside embedded content.</span>
+    </div>
+    <div class="section-label"><span class="label">Contacts</span><span class="label">Tap to fill</span></div>
+    <ul id="contacts" class="contacts" aria-label="Contacts"></ul>
+    <p id="empty" class="muted small" hidden>No contacts match. Try another name, company or email.</p>
+    <p class="muted footnote">Fills name, email, phone, company and address. Nothing is submitted.</p>
+  </section>
+</main>
+
+<footer>
+  <p id="status" role="status" aria-live="polite"></p>
+</footer>
+<script type="module" src="popup.js"></script>
+</body>
+</html>