有没有办法唯一标识内容脚本在我的 Chrome 扩展程序中运行的 iframe？

Question

在我的 Chrome 扩展程序中，我将 内容脚本 注入到页面内的所有 IFRAMEs 中。这是manifest.json 文件的一部分：

"content_scripts": [
    {
        "run_at": "document_end",
        "all_frames" : true,
        "match_about_blank": true,
        "matches": ["http://*/*", "https://*/*"],
        "js": ["content.js"]
    }
],

因此，具有多个IFRAMEs 的单个网页最终会运行我注入的content.js 的那么多副本。

content.js 内部的逻辑从注入的每个IFRAME 或从主页/首页收集数据，并将其发送回后台脚本（使用chrome.runtime.sendMessage。） 后台脚本反过来需要将数据存储在全局变量中，稍后在扩展本身中使用。

我面临的问题是应用程序需要区分从多个IFRAMEs接收的“数据”，因为我的数据收集方法可以在用户与页面交互时重复调用，因此我不能简单地“将后台脚本接收到的数据转储到一个数组中。相反，我需要使用dictionary 类型的数据存储。

我可以通过运行以下命令来判断数据是来自IFRAME 还是来自首页：

//From the `content.js`
var isIframe = window != window.top;

我的想法是，如果我收集每个 IFRAME 的页面 URL，那么我应该能够将其用作唯一键来将数据存储在我的字典类型全局变量中：

//Again from content.js
var strUniqueIFrameURL = document.URL;

好吧，那是行不通的，因为两个或多个 IFRAMEs 可以有相同的 URL。

所以我最初的问题是——如何区分页面上的IFRAMEs？ Chrome 是否为他们分配了一些唯一 ID 或某些东西？

Answer 1

您可以在每次加载内容脚本时使用时间戳和随机数的组合生成伪唯一 ID，如下所示：

var psUid = (new Date()).getTime() + '_' + Math.random();

然后用这个ID将你所有的数据相关消息发送到后台。

Answer 2

您可以识别文档在 iframe 层次结构中的相对位置。根据页面的结构，这可以解决您的问题。

您的扩展程序能够访问window.parent 及其框架。这应该可以工作，或者至少在测试用例中对我有用：

// Returns the index of the iframe in the parent document,
//  or -1 if we are the topmost document
function iframeIndex(win) {
  win = win || window; // Assume self by default
  if (win.parent != win) {
    for (var i = 0; i < win.parent.frames.length; i++) {
      if (win.parent.frames[i] == win) { return i; }
    }
    throw Error("In a frame, but could not find myself");
  } else {
    return -1;
  }
}

你可以修改它以支持嵌套 iframe，但原理应该可以。

我很想自己做，所以你去：

// Returns a unique index in iframe hierarchy, or empty string if topmost
function iframeFullIndex(win) {
   win = win || window; // Assume self by default
   if (iframeIndex(win) < 0) {
     return "";
   } else {
     return iframeFullIndex(win.parent) + "." + iframeIndex(win);
   }
}

Answer 3

只是为了扩展@Xan 的answer，这是我获取IFRAME 索引的方法，考虑到它可能嵌套在其他IFRAMEs 中。我将使用前向 iframe 表示法，这意味着将首先给出父 IFRAME 索引，然后是子索引等。此外，为了防止与浮点数混淆，我将使用 下划线 用于分隔符而不是点。

所以回答我最初的问题，一旦我在页面中有IFRAME 索引，它将在该页面中唯一标识它（加上IFRAME 的URL。）

这是获取它的代码：

function iframeIndex(wnd)
{
    //RETURN:
    //      = "" for top window
    //      = IFrame zero-based index with nesting, example: "2", or "0_4"
    //      = "?" if error
    return _iframeIndex(wnd || window);     // Assume self by default
}

function _iframeIndex(wnd)
{
    var resInd = "";

    var wndTop = window.top;

    if(wnd == wndTop)
        return resInd;

    var wndPar = wnd.parent;

    if(wndPar != wndTop)
    {
        resInd = _iframeIndex(wndPar) + "_";
    }

    var frmsPar = wndPar.frames;
    for(var i = 0; i < frmsPar.length; i++)
    {
        if(frmsPar[i] == wnd)
            return resInd + i;
        }

    return resInd + "?";
}