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

IT技术 javascript google-chrome iframe google-chrome-extension
2021-03-10 21:20:58

在我的 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-type 数据存储。

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

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

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

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

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

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

3个回答

您可以确定文档在 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);
   }
}
抱歉，我和你在不同的时区。我很欣赏你的工作！不过我不得不改变你的递归方法。
2021-04-26 21:20:58
@c00000fd 嗯，我自己做的。带有一些“递归”。
2021-05-02 21:20:58
仅从快速测试来看，它确实适用于我“挣扎”的页面。谢谢！不过，我会尝试为嵌套的 iframe 修改它。我认为你的方法需要一些“递归”。
2021-05-08 21:20:58
@c00000fd 太棒了！如果您确实改进了代码，请分享作为另一个答案。
2021-05-16 21:20:58

只是为了扩展@Xan 的回答，这是我获取 anIFRAME索引的方法，考虑到它可能嵌套在 other 中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 + "?";
}

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

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

然后使用此 ID 将所有与数据相关的消息发送到后台。

谢谢。但每个 IFRAME 的此类 ID 必须保持不变。
2021-04-19 21:20:58
如果包含 iframe 的页面刷新了怎么办？您还需要通过这些刷新来保持 id 的持久性吗？
2021-04-21 21:20:58
因此，让我直截了当地说明：您有两个 iframe（x和y），具有相同的 URL，每个都应该向后台写入数据VAR_X并VAR_Y在后台写入数据。当您刷新每个 iframe 时，它​​们都位于相同的 URL（这意味着它们加载相同的数据？）但您仍然需要将它们绑定到旧变量？
2021-04-30 21:20:58
是的。如果页面重新加载，它们应该保持不变。由于后台脚本在页面重新加载后不会改变，如果我开始像你展示的那样制作 IFRAME id，当我将它们的数据存储在我的字典中时，它会在每次页面重新加载时创建重复的记录。
2021-05-11 21:20:58
什么是你“保持”不变？即使在 iframe 刷新之后？
2021-05-14 21:20:58
其它你可能感兴趣的问题
上一篇“somevar >> 0”是什么意思？ 下一篇executeScript 未定义或不是 ManifestV3 扩展中的函数