父页面（你的工具）
  └─ iframe（http://localhost:3000，别人的 dev server）
        └─ 用户在里面的页面上点了一个按钮
             我们怎么知道？点的是哪个元素？它对应哪行源码？

const iframe = document.querySelector('iframe')

iframe.contentDocument              // null
iframe.contentWindow.document       // 抛 SecurityError
iframe.contentWindow.document.body  // 更不可能

① 父页面 ──「开启选取模式」控制指令──▶ 探测脚本
② 探测脚本 ──「用户点了这个元素，信息如下」数据──▶ 父页面
③ 父页面 ──拿到信息，做它该做的事（查源码位置、填输入框…）

// 宿主侧：抓到目标页的 HTML 后
let html = await (await fetch(targetUrl)).text()

// 1. 修相对路径：让资源请求回到真实 dev server
html = html.replace(/<head([^>]*)>/i, `<head$1><base href="${targetOrigin}/">`)

// 2. 记住真实地址，供脚本上报
html = html.replace(/<head([^>]*)>/i,
  `<head$1><meta name="probe-real-url" content="${targetUrl}">`)

// 3. 注入探测脚本
html = html.replace(/<\/body>/i, `<script src="/probe.js"></script></body>`)

interface Envelope<T = unknown> {
  ns: 'probe'      // 命名空间，避免和页面自身的 postMessage 撞车
  v: 1             // 协议版本
  type: string     // 消息类型
  payload?: T
}

let ready = false
const timer = setInterval(() => {
  if (ready) return clearInterval(timer)
  post({ type: 'ping' })
}, 300)

const NS = 'probe'
const iframe = document.querySelector('#preview')

let childOrigin = null   // 学到子页面的源之前，只能发 '*'（仅限握手）
let ready = false

// ---------- 发消息 ----------
function post(msg) {
  const target = childOrigin ?? '*'
  iframe.contentWindow.postMessage({ ns: NS, v: 1, ...msg }, target)
}

// ---------- 收消息 ----------
window.addEventListener('message', (event) => {
  const msg = event.data

  // 1. 信封校验
  if (!msg || typeof msg !== 'object' || msg.ns !== NS || msg.v !== 1) return

  // 2. 来源校验：必须来自这个 iframe 的窗口对象
  if (event.source !== iframe.contentWindow) return

  // 3. 源校验：当前只接受 loopback 源（按需收紧/放宽）
  if (!isAllowedOrigin(event.origin)) return

  switch (msg.type) {
    case 'ready':
      childOrigin = event.origin    // 从此只往这个源发
      ready = true
      setPicking(true)
      break

    case 'pick':
      onPick(msg.payload)
      setPicking(false)             // 单次选取后退出
      break

    case 'pick-cancelled':
      setPicking(false)
      break
  }
})

function isAllowedOrigin(origin) {
  if (origin === 'null') return false             // 见第七节：不透明源
  try {
    const { hostname } = new URL(origin)
    return hostname === 'localhost'
      || hostname === '127.0.0.1'
      || hostname === '[::1]'
  } catch { return false }
}

function setPicking(on) {
  post({ type: 'pick-mode', payload: { on } })
}

;(function () {
  // 不在 iframe 里就什么都不做，方便同一份脚本在独立标签页里也不出错
  if (window.parent === window) return

  const NS = 'probe'
  const V = 1

  // 握手阶段还不知道父页面的源，只能用 '*'；收到第一条合法消息后锁定
  let parentOrigin = '*'
  const send = (type, payload) =>
    window.parent.postMessage({ ns: NS, v: V, type, payload }, parentOrigin)

  let picking = false
  let target = null      // 当前高亮的元素
  let raf = 0

  // ---------- 高亮层：两个 pointer-events:none 的浮层 ----------
  const box = document.createElement('div')
  const tip = document.createElement('div')
  Object.assign(box.style, {
    position: 'fixed', pointerEvents: 'none', zIndex: 2147483646, display: 'none',
    border: '1px solid #4f7cff', background: 'rgba(79,124,255,.12)', borderRadius: '2px',
  })
  Object.assign(tip.style, {
    position: 'fixed', pointerEvents: 'none', zIndex: 2147483647, display: 'none',
    font: '11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace', color: '#fff',
    background: 'rgba(17,17,17,.92)', padding: '2px 6px', borderRadius: '4px',
    maxWidth: '70vw', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
  })
  document.documentElement.append(box, tip)

  function paint(el) {
    const r = el.getBoundingClientRect()
    box.style.display = 'block'
    box.style.left = r.left + 'px'
    box.style.top = r.top + 'px'
    box.style.width = r.width + 'px'
    box.style.height = r.height + 'px'

    const info = describe(el)
    tip.style.display = 'block'
    tip.style.left = Math.max(4, r.left) + 'px'
    tip.style.top = (r.top > 24 ? r.top - 22 : r.bottom + 4) + 'px'
    tip.textContent = info.source
      ? `${info.source.file}:${info.source.line}:${info.source.column}`
      : `<${info.tag}> ${info.component ?? ''}`.trim()
  }

  function show(el) {
    target = el
    cancelAnimationFrame(raf)
    raf = requestAnimationFrame(() => paint(el))
  }

  function hide() {
    target = null
    box.style.display = 'none'
    tip.style.display = 'none'
  }

  // ---------- 元素信息采集 ----------
  function describe(el) {
    const found = findSource(el)
    const r = el.getBoundingClientRect()
    return {
      tag: el.tagName.toLowerCase(),
      id: el.id || undefined,
      className: typeof el.className === 'string' ? el.className.slice(0, 160) : undefined,
      text: (el.textContent || '').trim().replace(/\s+/g, ' ').slice(0, 80),
      rect: { x: Math.round(r.left), y: Math.round(r.top), w: Math.round(r.width), h: Math.round(r.height) },
      component: found?.component,
      source: found?.location,
    }
  }

  // 分层探测：见第九节
  function findSource(el) { /* … */ }

  // ---------- 事件 ----------
  function onMove(e) {
    if (!picking) return
    const el = e.target
    if (el instanceof Element && el !== target) show(el)
  }

  // 选取状态下吃掉页面自身的交互：不 preventDefault 的话，
  // 点一个链接会把 iframe 导航走，前面全白干
  function onMouseDown(e) {
    if (!picking) return
    e.preventDefault()
    e.stopImmediatePropagation()
  }

  function onClick(e) {
    if (!picking) return
    e.preventDefault()
    e.stopImmediatePropagation()
    const el = e.target
    if (!(el instanceof Element)) return
    send('pick', describe(el))
    setPicking(false)
  }

  function onKeyDown(e) {
    if (!picking) return
    if (e.key === 'Escape') {
      e.preventDefault()
      e.stopImmediatePropagation()
      send('pick-cancelled')
      setPicking(false)
    }
  }

  // 滚动发生在内层容器时不会冒泡到 window，所以要 capture
  function onScroll() {
    if (picking && target) paint(target)
  }

  function setPicking(on) {
    if (on === picking) return
    picking = on
    if (on) {
      document.addEventListener('mousemove', onMove, true)
      document.addEventListener('mousedown', onMouseDown, true)
      document.addEventListener('click', onClick, true)
      document.addEventListener('keydown', onKeyDown, true)
      window.addEventListener('scroll', onScroll, { capture: true, passive: true })
      document.documentElement.style.cursor = 'crosshair'
    } else {
      document.removeEventListener('mousemove', onMove, true)
      document.removeEventListener('mousedown', onMouseDown, true)
      document.removeEventListener('click', onClick, true)
      document.removeEventListener('keydown', onKeyDown, true)
      window.removeEventListener('scroll', onScroll, true)
      document.documentElement.style.cursor = ''
      hide()
    }
  }

  // ---------- 接收父页面指令 ----------
  window.addEventListener('message', (event) => {
    if (event.source !== window.parent) return
    const msg = event.data
    if (!msg || typeof msg !== 'object' || msg.ns !== NS || msg.v !== V) return

    // 学到父页面的源之后锁死，不再接受其他源的指令
    if (parentOrigin === '*') parentOrigin = event.origin || '*'

    if (msg.type === 'ping') send('ready', { url: location.href, origin: location.origin })
    if (msg.type === 'pick-mode') setPicking(!!msg.payload?.on)
  })

  // ---------- 就绪上报 ----------
  const announce = () => send('ready', { url: location.href, origin: location.origin })
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', announce, { once: true })
  } else {
    announce()
  }
})()

if (event.source !== iframe.contentWindow) return   // 挡住同页面的其他 iframe
if (!isAllowedOrigin(event.origin)) return          // 挡住别的站点

iframe.contentDocument.addEventListener('click', handler)

function findSource(el) {
  // L0：构建期注入的标记（精确，且和框架无关）
  const marked = el.closest('[data-source-file][data-source-line]')
  if (marked) {
    return {
      location: {
        file: marked.dataset.sourceFile,
        line: Number(marked.dataset.sourceLine),
        column: Number(marked.dataset.sourceColumn ?? 1),
      },
    }
  }

  // L1：React dev 构建的 fiber 调试信息
  const key = Object.keys(el).find((k) => k.startsWith('__reactFiber$'))
  if (key) {
    let fiber = el[key]
    let owner = null
    while (fiber) {
      if (!owner && fiber._debugOwner) owner = fiber._debugOwner
      const s = fiber._debugSource
      if (s && s.fileName) {
        return {
          location: { file: s.fileName, line: s.lineNumber, column: s.columnNumber },
          component: nameOf(owner),
        }
      }
      fiber = fiber._debugOwner ?? fiber.return
    }
  }

  // L1'：Vue（文件精确，行号需要另外匹配模板文本）
  const vnode = el.__vueParentComponent
  if (vnode?.type?.__file) {
    return { location: { file: vnode.type.__file, line: 1, column: 1 },
             component: vnode.type.__name ?? vnode.type.name }
  }

  // L4：都失败就如实返回 null，交给父页面用文本/结构特征兜底
  return null
}

function nameOf(fiber) {
  let f = fiber
  while (f) {
    const t = f.type
    if (typeof t === 'function' && (t.displayName || t.name)) return t.displayName || t.name
    if (t && typeof t === 'object' && (t.displayName || t.render?.name)) return t.displayName || t.render.name
    f = f._debugOwner ?? f.return
  }
  return undefined
}