内容脚本的三个世界：为什么 DevTools 里能跑，扩展里就是拿不到 React fiber

Object.getOwnPropertyNames(node).find(k => k.startsWith('__reactFiber$'))
// 主世界：'__reactFiber$xxxxxxxx'
// 隔离世界：undefined —— 不是「找不到这个节点」，是「这个节点上没有这个属性」

// 日志是「过程的旁证」，产物才是「结果本身」
(await __extTools.invoke('collectContext', {})).data.turns.length

// src/bridge/main-world.ts —— 注入进页面主世界
(() => {
  // 幂等守卫：同一份脚本可能被注入多次（SPA 路由、frame 重挂、手动 re-inject）
  if ((window as any).__pageBridgeInstalled) return;
  (window as any).__pageBridgeInstalled = true;

  type Handler = (payload: any) => unknown;

  const handlers: Record<string, Handler> = {
    /** 用例 1：读挂在 DOM 节点上的 React fiber —— 隔离世界看不见这些属性 */
    readFiberProp({ selector, propPath }) {
      const node = document.querySelector(selector);
      if (!node) return null;
      const key = Object.getOwnPropertyNames(node).find(
        (k) => k.startsWith('__reactFiber$') || k.startsWith('__reactInternalInstance$'),
      );
      if (!key) return null;

      // fiber 往上爬，找第一个 memoizedProps 里带目标字段的节点
      let cur: any = (node as any)[key];
      for (let depth = 0; cur && depth < 80; depth++, cur = cur.return) {
        const v = propPath
          .split('.')
          .reduce((o: any, k: string) => (o == null ? o : o[k]), cur.memoizedProps);
        if (v != null) return v;
      }
      return null;
    },

    /** 用例 2：调页面自己的全局对象（编辑器实例、SDK、埋点……） */
    callPageGlobal({ path, args }) {
      const fn = path
        .split('.')
        .reduce((o: any, k: string) => (o == null ? o : o[k]), window as any);
      if (typeof fn !== 'function') return { ok: false, reason: 'not-a-function' };
      return { ok: true, value: fn(...(args ?? [])) };
    },
  };

  window.addEventListener('page-bridge:req', (ev) => {
    const { id, method, payload } = (ev as CustomEvent).detail ?? {};
    if (!id) return;

    let res: { id: string; ok: boolean; data?: unknown; error?: string };
    try {
      const fn = handlers[method];
      if (!fn) throw new Error(`unknown method: ${method}`);
      res = { id, ok: true, data: fn(payload) };
    } catch (e) {
      // ★ 错误必须回传。不回传的话，调用方只能等到超时，
      //   然后把「这个字段不存在」误判成「桥没装上」。
      res = { id, ok: false, error: String((e as Error)?.message ?? e) };
    }
    window.dispatchEvent(new CustomEvent('page-bridge:res', { detail: res }));
  });
})();

// src/bridge/client.ts —— 跑在隔离世界
/** 桥是同步执行的，正常一帧内就回。超时只兜底「全场无人应答」 */
const TIMEOUT_SYNC = 500;

export function callPage<T>(
  method: string,
  payload?: unknown,
  timeoutMs = TIMEOUT_SYNC,
): Promise<T | null> {
  return new Promise((resolve) => {
    const id = `${method}_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
    const wins = collectSameOriginWindows();
    let done = false;

    const onRes = (ev: Event) => {
      const d = (ev as CustomEvent).detail;
      if (!d || d.id !== id) return;   // ★ 必须按 id 配对，否则并发请求会串答案
      finish(d.ok ? (d.data as T) : null);
    };

    const finish = (v: T | null) => {
      if (done) return;                // ★ 广播取首个应答，后到的丢弃
      done = true;
      for (const w of wins) {
        try { w.removeEventListener('page-bridge:res', onRes); } catch { /* 跨域 */ }
      }
      resolve(v);
    };

    for (const w of wins) {
      try { w.addEventListener('page-bridge:res', onRes); } catch { /* 跨域 */ }
    }
    for (const w of wins) {
      try {
        w.dispatchEvent(new CustomEvent('page-bridge:req', { detail: { id, method, payload } }));
      } catch { /* 跨域 frame，忽略 */ }
    }

    setTimeout(() => finish(null), timeoutMs);
  });
}

/** 本 frame + top + 所有同源子 frame —— 目标节点可能渲在任意一个里 */
function collectSameOriginWindows(): Window[] {
  const out: Window[] = [];
  const seen = new Set<Window>();
  const push = (w?: Window | null) => {
    if (w && !seen.has(w)) { seen.add(w); out.push(w); }
  };

  push(window);
  try { push(window.top); } catch { /* top 跨域，读不到 */ }
  try {
    const walk = (w: Window) => {
      push(w);
      for (let i = 0; i < w.frames.length; i++) {
        try { walk(w.frames[i]); } catch { /* 跨域子 frame，跳过 */ }
      }
    };
    if (window.top) walk(window.top);
  } catch { /* ignore */ }

  return out;
}

const customerId = await callPage<string>('readFiberProp', {
  selector: 'form',
  propPath: 'record.customerId',
});

const TIMEOUT_SYNC  = 500;      // 桥内同步执行
const TIMEOUT_ASYNC = 150_000;  // 桥后面挂了异步链路（LLM / 网络）

window.addEventListener('message', (ev) => {
  const d = ev.data;
  if (!d || d.__extBridgeRes !== true || ev.source !== window) return;  // ★
  // ...
});

// ⚠ 本条故意不走统一日志层（全项目唯一的例外）：
//   这里是主世界，没有 chrome.storage —— 日志层读不到开关会退回默认的「关」，
//   而这条恰恰是告诉人「调试接口已就绪」的提示，默认不显示就失去意义。
console.log('[ext][bridge] 主世界调试接口已就绪');

侧栏（扩展页面）
   → chrome.runtime 消息
       → 内容脚本（隔离世界）
           → DOM 事件
               → 桥（主世界）→ 读 fiber