@hasna/contacts 0.7.0 → 0.9.0

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,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#2E4A7A"/>
+      <stop offset="1" stop-color="#172C4F"/>
+    </linearGradient>
+    <linearGradient id="fg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#FFFFFF"/>
+      <stop offset="1" stop-color="#D6E1F5"/>
+    </linearGradient>
+  </defs>
+  <rect x="4" y="4" width="120" height="120" rx="30" fill="url(#bg)"/>
+  <circle cx="64" cy="50" r="19" fill="url(#fg)"/>
+  <path d="M28 104c3-22 18-33 36-33s33 11 36 33c0 3-2 5-5 5H33c-3 0-5-2-5-5z" fill="url(#fg)"/>
+  <circle cx="96" cy="36" r="11" fill="#E8B04B"/>
+  <path d="M91 36l3.5 3.5L101.5 32" fill="none" stroke="#172C4F" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/extension/manifest.json

@@ -0,0 +1,54 @@
+{
+  "manifest_version": 3,
+  "name": "Hasna Contacts",
+  "version": "0.9.0",
+  "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,78 @@
+:root {
+  color-scheme: light dark;
+  --bg: #f6f8fb;
+  --surface: #ffffff;
+  --fg: #172033;
+  --muted: #66707f;
+  --line: #e0e6ee;
+  --brand: #2e4a7a;
+  --brand-2: #172c4f;
+  --brand-soft: #e9eff8;
+  --accent: #8fb0e6;
+  --danger: #9b3229;
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(23, 44, 79, 0.06);
+  --radius: 12px;
+  font: 14px / 1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: var(--fg);
+  background: var(--bg);
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #12171f;
+    --surface: #1a2130;
+    --fg: #e6ebf3;
+    --muted: #97a1b1;
+    --line: #2a3446;
+    --brand: #4a6ea8;
+    --brand-2: #2e4a7a;
+    --brand-soft: #1f2a3d;
+    --accent: #6f93cc;
+    --danger: #f08a80;
+    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
+  }
+}
+* { box-sizing: border-box; }
+body { margin: 0; width: 344px; min-height: 200px; display: flex; flex-direction: column; }
+h1, h2, p { margin: 0; }
+code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--brand-soft); padding: 1px 5px; border-radius: 5px; }
+.muted { color: var(--muted); }
+.small { font-size: 12px; }
+
+.top { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
+.logo { border-radius: 8px; flex: none; }
+.brand { min-width: 0; flex: 1; }
+h1 { font-size: 15px; font-weight: 650; letter-spacing: -0.2px; line-height: 1.2; }
+.page { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.page[data-ready="true"]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2f9e6a; margin-right: 6px; vertical-align: 1px; }
+
+main { padding: 12px 12px 4px; flex: 1; }
+.state { padding: 22px 10px; text-align: center; color: var(--muted); }
+.state h2 { color: var(--fg); font-size: 14px; font-weight: 650; margin-bottom: 6px; }
+.state p + p { margin-top: 8px; }
+.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 10px; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.search { display: block; width: 100%; margin: 0 0 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); font: 14px system-ui, sans-serif; }
+.search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+.page-actions { display: flex; flex-direction: column; gap: 6px; padding: 0 4px 12px; }
+.chip-btn { align-self: flex-start; border: 1px solid var(--line); background: var(--surface); color: var(--brand); font: 600 12px system-ui, sans-serif; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
+.chip-btn:hover, .chip-btn:focus-visible { border-color: var(--accent); outline: none; }
+
+.contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
+.contact { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow); transition: transform 0.12s ease, border-color 0.12s ease; }
+.contact:hover:not(:disabled), .contact:focus-visible { border-color: var(--accent); transform: translateY(-1px); outline: none; }
+.contact:disabled { cursor: default; opacity: 0.72; box-shadow: none; }
+.contact .avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font: 600 12px system-ui, sans-serif; display: grid; place-items: center; }
+.contact .meta { flex: 1; min-width: 0; }
+.contact .name { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.contact .sub { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.contact .arrow { flex: none; color: var(--muted); font-size: 16px; line-height: 1; }
+.contact.busy .arrow { animation: pulse 0.9s ease-in-out infinite; }
+@keyframes pulse { 50% { opacity: 0.3; } }
+.footnote { padding: 12px 6px 4px; }
+
+footer { padding: 6px 16px 12px; min-height: 30px; }
+#status { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
+#status[data-kind="error"] { color: var(--danger); }
+#status[data-kind="ok"] { color: #2f9e6a; }

package/extension/popup.html

@@ -0,0 +1,47 @@
+<!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">
+  <img class="logo" src="icons/48.png" width="28" height="28" alt="">
+  <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>Connecting to Contacts…</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> in a terminal, then reopen Contacts.</p>
+    <p id="setup-reason" class="muted"></p>
+  </section>
+
+  <section id="view-contacts" hidden>
+    <input id="query" class="search" type="search" placeholder="Search contacts…" 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>
+    <ul id="contacts" class="contacts" aria-label="Contacts"></ul>
+    <p id="empty" class="muted" hidden>No contacts match. Try another name, company or email.</p>
+    <p class="muted small footnote">Tap a contact to fill name, email, phone, company and address fields. 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>