如何将chrome.webNavigation.getAllFrames返回的子帧与父DOM的iframe元素关联？

以下是几个能解决你问题的可行方案，覆盖跨域、多同URL iframe等场景：

方案1：子帧主动向后台请求自身位置（推荐，无跨域限制） #

核心思路是给所有帧注入内容脚本后，让每个子帧主动向后台获取自己的层级信息，完全通过后台中介完成，不需要父帧和子帧直接交互，避开跨域限制，也不用匹配DOM元素。

实现代码： #

• 内容脚本（注入所有帧）：

// frame-position.js
chrome.runtime.sendMessage({ action: "getFramePosition" }, (response) => {
  if (response?.position) {
    window.framePosition = response.position; // 把位置信息存在当前帧的window上
    console.log("当前帧层级信息:", response.position);
  }
});

• 后台Service Worker脚本：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "getFramePosition" && sender.tab?.id) {
    // 获取当前标签页的所有帧信息
    chrome.webNavigation.getAllFrames({ tabId: sender.tab.id }, (frames) => {
      const currentFrame = frames.find(f => f.frameId === sender.frameId);
      if (!currentFrame) {
        sendResponse({ error: "未找到当前帧数据" });
        return;
      }

      // 构建从根帧到当前帧的层级路径
      const positionPath = [];
      let tempFrame = currentFrame;
      while (tempFrame) {
        positionPath.unshift(tempFrame.frameId);
        tempFrame = frames.find(f => f.frameId === tempFrame.parentFrameId);
      }

      // 返回层级信息：深度（根帧为0）、路径链、自身和父帧ID
      sendResponse({
        position: {
          depth: positionPath.length - 1,
          path: positionPath,
          frameId: currentFrame.frameId,
          parentFrameId: currentFrame.parentFrameId
        }
      });
    });
    // 异步操作需返回true保持消息通道
    return true;
  }
});

这个方案完全不依赖跨域权限，每个帧独立获取自己的位置，精准度100%，是最稳妥的方案。

方案2：同域场景下给iframe绑定唯一标识 #

如果你的扩展只需要处理同域iframe，可以通过父帧给每个iframe加唯一标识，再关联后台的帧数据，适合需要父帧主动传递信息的场景。

实现代码： #

• 父帧内容脚本：

document.querySelectorAll('iframe').forEach((iframe, idx) => {
  const uniqueId = `frame-${Date.now()}-${idx}`;
  iframe.dataset.uniqueFrameId = uniqueId;
  // 同域下直接给子帧发消息传递标识
  iframe.contentWindow.postMessage({ action: "bindUniqueId", id: uniqueId }, '*');
});

• 子帧内容脚本：

window.addEventListener('message', (e) => {
  if (e.data.action === "bindUniqueId") {
    // 把唯一标识和自身frameId发给后台绑定
    chrome.runtime.sendMessage({
      action: "mapUniqueId",
      uniqueId: e.data.id,
      frameId: chrome.runtime.getFrameId()
    });
  }
});

• 后台脚本：

const frameIdMap = new Map(); // 存储唯一标识到frameId的映射

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // 绑定唯一标识和frameId
  if (message.action === "mapUniqueId") {
    frameIdMap.set(message.uniqueId, message.frameId);
    return;
  }

  // 父帧请求对应iframe的位置
  if (message.action === "getPositionByUniqueId" && sender.tab?.id) {
    const frameId = frameIdMap.get(message.uniqueId);
    if (!frameId) {
      sendResponse({ error: "未找到对应帧" });
      return;
    }

    chrome.webNavigation.getAllFrames({ tabId: sender.tab.id }, (frames) => {
      const targetFrame = frames.find(f => f.frameId === frameId);
      // 构建层级信息并返回
      const positionPath = [];
      let tempFrame = targetFrame;
      while (tempFrame) {
        positionPath.unshift(tempFrame.frameId);
        tempFrame = frames.find(f => f.frameId === tempFrame.parentFrameId);
      }
      sendResponse({
        position: {
          depth: positionPath.length - 1,
          path: positionPath
        }
      });
    });
    return true;
  }
});

方案3：利用帧加载顺序匹配（兼容动态插入iframe场景） #

如果需要父帧主动给子帧传递位置，且存在跨域+多同URL iframe的情况，可以通过后台记录帧的加载顺序，结合DOM中iframe的顺序来匹配，适合大部分动态插入iframe的场景。

实现代码： #

• 后台脚本：

// 存储每个标签页的帧加载记录，按加载顺序排列
const frameLoadLogs = new Map();

// 监听帧加载完成事件，记录顺序
chrome.webNavigation.onCompleted.addListener((details) => {
  if (!frameLoadLogs.has(details.tabId)) {
    frameLoadLogs.set(details.tabId, []);
  }
  frameLoadLogs.get(details.tabId).push({
    frameId: details.frameId,
    parentFrameId: details.parentFrameId,
    url: details.url,
    loadOrder: frameLoadLogs.get(details.tabId).length
  });
}, { url: [{ schemes: ['http', 'https', 'file'] }] });

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "getFrameByDomIndex" && sender.tab?.id) {
    const logs = frameLoadLogs.get(sender.tab.id);
    if (!logs) {
      sendResponse({ error: "无帧加载记录" });
      return;
    }
    // DOM中iframe的索引+1对应加载顺序（根帧是第0个加载的）
    const targetFrame = logs.find(log => log.loadOrder === message.domIndex + 1);
    if (!targetFrame) {
      sendResponse({ error: "未找到对应帧" });
      return;
    }

    // 构建层级信息
    const positionPath = [];
    let tempFrame = targetFrame;
    while (tempFrame) {
      positionPath.unshift(tempFrame.frameId);
      tempFrame = logs.find(log => log.frameId === tempFrame.parentFrameId);
    }

    sendResponse({
      position: {
        depth: positionPath.length - 1,
        path: positionPath,
        frameId: targetFrame.frameId
      }
    });
  }
  return true;
});

• 父帧内容脚本：

document.querySelectorAll('iframe').forEach(async (iframe, idx) => {
  const response = await chrome.runtime.sendMessage({
    action: "getFrameByDomIndex",
    domIndex: idx
  });
  if (response?.position) {
    // 跨域也可以用postMessage传递，子帧监听即可
    iframe.contentWindow.postMessage({
      action: "setFramePosition",
      position: response.position
    }, '*');
  }
});

• 子帧内容脚本：

window.addEventListener('message', (e) => {
  if (e.data.action === "setFramePosition") {
    window.framePosition = e.data.position;
    console.log("收到父帧传递的位置信息:", e.data.position);
  }
});

内容的提问来源于stack exchange，提问作者Bri Bri