NB - Native Browser Bridge

@@ -0,0 +1,220 @@+<!doctype html>+<!--+  Rich sandboxed README for adom-browser-extension.+  Served at /readme/john/app/adom-browser-extension inside a SANDBOXED iframe+  (CSP: sandbox allow-scripts allow-downloads — opaque origin, no cookies/parent+  access). Renders ABOVE the required README.md. Assets are referenced by+  ABSOLUTE /blob URLs because the opaque origin can't resolve relative paths.+  Auto-resizes by posting {type:"readme-height",height} to the parent (see app.js).+-->+<html lang="en">+<head>+<meta charset="utf-8">+<meta name="viewport" content="width=device-width, initial-scale=1">+<title>Adom Browser Extension — showcase</title>+<link rel="preconnect" href="https://api.fontshare.com">+<link href="https://api.fontshare.com/v2/css?f[]=familjen-grotesk@700,600&f[]=satoshi@400,500,700&display=swap" rel="stylesheet">+<style>+  :root{+    --bg:#0a0e14; --panel:#0d1117; --panel2:#11161f; --border:#222b38;+    --text:#e6edf3; --muted:#9aa6b5; --teal:#00b8b1; --teal-bright:#00e6dc;+    --blue:#39b8ff; --purple:#8c6bf7; --green:#34d17e; --yellow:#ffcf4d;+  }+  *{box-sizing:border-box}+  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);+    font-family:'Satoshi',system-ui,Segoe UI,Arial,sans-serif;line-height:1.5;+    -webkit-font-smoothing:antialiased}+  .wrap{max-width:1020px;margin:0 auto;padding:30px 22px 14px}+  h1,h2,h3{font-family:'Familjen Grotesk',system-ui,Arial,sans-serif;letter-spacing:-.02em;line-height:1.08}+  a{color:var(--teal-bright);text-decoration:none}+  .lede{font-size:clamp(22px,3.4vw,34px);font-weight:700;margin:0 0 10px;+    background:linear-gradient(100deg,#00e6dc,#39b8ff 58%,#8c6bf7);+    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}+  .sub{color:var(--muted);font-size:16px;max-width:680px;margin:0 0 26px}+  .sub b{color:var(--text);font-weight:700}++  /* video */+  .video-card{position:relative;border:1px solid var(--border);border-radius:14px;overflow:hidden;+    background:#000;box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 120px rgba(0,184,177,.06)}+  .video-card video{display:block;width:100%;height:auto}+  .cap{color:var(--muted);font-size:13.5px;margin:10px 2px 0}+  .cap b{color:var(--text)}++  .rail{display:flex;align-items:center;gap:10px;margin:40px 0 18px}+  .rail h2{font-size:24px;margin:0}+  .rail .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}+  .pill{display:inline-block;font-family:'Familjen Grotesk',sans-serif;font-size:11px;font-weight:600;+    letter-spacing:.06em;text-transform:uppercase;color:var(--teal-bright);+    border:1px solid rgba(0,184,177,.35);background:rgba(0,184,177,.07);border-radius:999px;padding:3px 11px}++  .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}+  @media(max-width:720px){.grid{grid-template-columns:1fr}}+  .card{border:1px solid var(--border);border-radius:13px;overflow:hidden;background:var(--panel);+    display:flex;flex-direction:column}+  .card.full{grid-column:1/-1}+  .shot{display:block;width:100%;height:auto;border-bottom:1px solid var(--border);background:#0d1117}+  .body{padding:15px 16px 17px}+  .tag{font-family:'Familjen Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:.05em;+    text-transform:uppercase;color:var(--muted);margin:0 0 6px}+  .tag.ok{color:var(--green)} .tag.feat{color:var(--blue)}+  .card h3{font-size:18px;margin:0 0 7px}+  .card p{margin:0;color:var(--muted);font-size:14px}+  .card p b,.body b{color:var(--text);font-weight:700}+  .vault{display:inline-block;font-size:11.5px;color:var(--teal);border:1px dashed rgba(0,184,177,.4);+    border-radius:7px;padding:2px 8px;margin-top:10px;font-family:'Satoshi',monospace}++  /* captcha highlight */+  .captcha{border:1px solid rgba(0,184,177,.28);border-radius:14px;overflow:hidden;+    background:linear-gradient(180deg,rgba(0,184,177,.06),transparent 60%)}+  .captcha .inner{display:grid;grid-template-columns:1.05fr .95fr;gap:0}+  @media(max-width:720px){.captcha .inner{grid-template-columns:1fr}}+  .captcha img{display:block;width:100%;height:auto;border-right:1px solid var(--border)}+  .captcha .copy{padding:22px 22px}+  .captcha h3{font-size:21px;margin:0 0 9px}+  .captcha p{color:var(--muted);font-size:14px;margin:0 0 12px}+  .chk{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;margin:8px 0;color:var(--text)}+  .chk .b{color:var(--green);font-weight:800;flex:0 0 auto}+  .foot{color:var(--muted);font-size:12.5px;margin:30px 2px 4px;text-align:center}+  .foot b{color:var(--text)}+</style>+</head>+<body>+<div class="wrap">++  <div class="lede">Five real vendor sites. One logged-in session. No bot walls.</div>+  <p class="sub">The native-browser extension drives your <b>actual signed-in Chrome/Edge</b> — so every+  vendor's cookies, SSO, saved logins and "I'm not a robot" human-trust come for free. Here it is on+  <b>Mouser, SnapMagic, ComponentSearchEngine, DigiKey and TI</b>, signing in and fetching chip CAD+  past the login walls that stop a headless bot cold.</p>++  <!-- VIDEO -->+  <div class="video-card">+    <video controls preload="metadata" playsinline+      poster="https://wiki.adom.inc/blob/app/adom-browser-extension/screenshots/demo-login.png">+      <source src="https://wiki.adom.inc/blob/app/adom-browser-extension/demo/adom-native-browser-demo.mp4" type="video/mp4">+      Your browser can't play embedded video —+      <a href="https://wiki.adom.inc/blob/app/adom-browser-extension/demo/adom-native-browser-demo.mp4">download the clip</a>.+    </video>+  </div>+  <p class="cap"><b>▶ 36-second demo.</b> The Adom cursor signs in to Mouser — <b>Chrome autofills the+  saved password, Adom never sees it</b> — then fetches the ST <b>VL53L5CX</b> 8×8 ToF sensor's CAD+  (KiCad symbol + footprint, STEP 3D model, datasheet) from ComponentSearchEngine. No captcha, because+  it's a <b>real</b> session.</p>++  <!-- VENDORS -->+  <div class="rail"><h2>Five vendors, one real session</h2><span class="ln"></span><span class="pill">live</span></div>++  <div class="grid">++    <div class="card">+      <img class="shot" src="https://wiki.adom.inc/blob/app/adom-browser-extension/screenshots/demo-login.png" alt="Adom drives the Mouser sign-in — the cursor on the Username field, johnAdom + password autofilled">+      <div class="body">+        <p class="tag ok">✓ login automated</p>+        <h3>Mouser — autofill sign-in</h3>+        <p>The Adom cursor focuses the <b>Username</b> field; Chrome autofills <b>johnAdom</b> + the+        saved password (<b>Adom never sees it</b>) and submits. Real session → no captcha, no anti-bot slider.</p>+      </div>+    </div>++    <div class="card">+      <img class="shot" src="https://wiki.adom.inc/blob/app/adom-browser-extension/screenshots/show-snapmagic-login.png" alt="SnapMagic login with [email protected] + password autofilled and the Adom debug bar visible">+      <div class="body">+        <p class="tag ok">✓ login automated · invisible reCAPTCHA</p>+        <h3>SnapMagic (SnapEDA) — credential-aware login</h3>+        <p><code>nbrowser_credentials</code> knew <b>snapeda.com</b>, so Chrome pre-filled+        <b>[email protected]</b> + password. SnapMagic's login is gated by an <b>invisible reCAPTCHA</b> bound+        to the button — the real, trusted session <b>clears it silently</b> on submit.</p>+      </div>+    </div>++    <div class="card">+      <img class="shot" src="https://wiki.adom.inc/blob/app/adom-browser-extension/screenshots/show-snapmagic-in.png" alt="SnapMagic signed in — VL53L5CX search returns 9 parts with one-click KiCad/STEP download icons">+      <div class="body">+        <p class="tag feat">▸ past the guest wall</p>+        <h3>SnapMagic — signed in, downloads unlocked</h3>+        <p>Signed in, the <b>VL53L5CX</b> search returns <b>9 parts</b> with one-click KiCad symbol ++        footprint and STEP downloads — the guest "log in to download" wall is gone.</p>+      </div>+    </div>++    <div class="card">+      <img class="shot" src="https://wiki.adom.inc/blob/app/adom-browser-extension/screenshots/demo-fetch.png" alt="ComponentSearchEngine VL53L5CX page, the Adom cursor on Download Model, signed in as John Lauer">+      <div class="body">+        <p class="tag feat">▸ chip CAD fetch</p>+        <h3>ComponentSearchEngine — fetch past the wall</h3>+        <p>Signed in, the cursor clicks <b>Download Model</b> on the ST VL53L5CX (8×8 ToF) — pulling the+        <b>KiCad</b> symbol + footprint, <b>STEP</b> 3D model, and the datasheet in one go.</p>+      </div>+    </div>++    <div class="card">+      <img class="shot" src="https://wiki.adom.inc/blob/app/adom-browser-extension/screenshots/show-digikey.png" alt="DigiKey homepage driven live in the native browser">+      <div class="body">+        <p class="tag feat">▸ driven live</p>+        <h3>DigiKey — driven in your real profile</h3>+        <p>The native browser renders and drives DigiKey inside your actual Chrome — full page, real+        cookies, your cart. DigiKey is already in your saved-login vault.</p>+        <span class="vault">nbrowser_credentials → auth.digikey.com ✓</span>+      </div>+    </div>++    <div class="card">+      <img class="shot" src="https://wiki.adom.inc/blob/app/adom-browser-extension/screenshots/show-ti.png" alt="TI.com homepage driven live in the native browser">+      <div class="body">+        <p class="tag feat">▸ driven live</p>+        <h3>TI.com — driven, SSO-ready</h3>+        <p>TI.com driven live in your real session. Your <b>TI SSO</b> login is in the vault, so signing in+        for a reference-design or sample download is one autofill away.</p>+        <span class="vault">nbrowser_credentials → login.ti.com ✓</span>+      </div>+    </div>++  </div>++  <!-- CAPTCHA -->+  <div class="rail"><h2>"I'm not a robot?" — handled</h2><span class="ln"></span><span class="pill">human-trust</span></div>++  <div class="captcha">+    <div class="inner">+      <img src="https://wiki.adom.inc/blob/app/adom-browser-extension/screenshots/show-captcha.png" alt="The reCAPTCHA 'I'm not a robot' checkbox in the real browser">+      <div class="copy">+        <h3>The gate that stops headless bots</h3>+        <p>UltraLibrarian, ComponentSearchEngine and SnapEDA/SnapMagic throw <b>reCAPTCHA</b> at+        anonymous, headless automation. The native browser runs in your <b>real, trusted session</b>, so+        the human-trust signals are already there:</p>+        <div class="chk"><span class="b">✓</span><span><b>Invisible reCAPTCHA</b> (like SnapMagic's login) passes <b>silently</b> on submit — verified above, the sign-in just went through.</span></div>+        <div class="chk"><span class="b">✓</span><span>When the visible <b>"I'm not a robot"</b> checkbox appears, the Adom cursor clicks it — and because the session is trusted, it clears with <b>no "select all the traffic lights"</b> image grid.</span></div>+        <div class="chk"><span class="b">✓</span><span>During a real human-gate (2FA / a hard challenge), the taskbar turns <b>yellow</b> and flashes <b>"come look"</b> — it hands control back instead of guessing.</span></div>+      </div>+    </div>+  </div>++  <p class="foot">Drive it yourself: <b>"load my native browser and log into Mouser"</b> &nbsp;·&nbsp;+  <code>adompkg install adom-browser-extension</code> &nbsp;·&nbsp; full docs in the README below.</p>++</div>++<script>+  // Auto-resize: tell the parent our content height so the sandboxed iframe fits+  // without scrollbars. Parent (static/app.js) listens for {type:"readme-height",height}+  // and clamps to [120,4000]. Identity is checked by source there, so origin="null" is fine.+  (function(){+    "use strict";+    var last=0;+    function post(){+      var h=Math.ceil(document.documentElement.scrollHeight);+      if(h && Math.abs(h-last)>2){ last=h; try{ parent.postMessage({type:"readme-height",height:h},"*"); }catch(e){} }+    }+    window.addEventListener("load",post);+    window.addEventListener("resize",post);+    // images/video change height as they load+    document.querySelectorAll("img").forEach(function(im){ im.addEventListener("load",post); im.addEventListener("error",post); });+    var v=document.querySelector("video"); if(v){ v.addEventListener("loadedmetadata",post); }+    if(window.ResizeObserver){ new ResizeObserver(post).observe(document.body); }+    // a few early ticks while fonts/layout settle+    var n=0,iv=setInterval(function(){ post(); if(++n>12) clearInterval(iv); },250);+    post();+  })();+</script>+</body>+</html>