有没有办法为我的 Chrome 扩展程序唯一标识内容脚本运行的 iframe? [英] Is there a way to uniquely identify an iframe that the content script runs in for my Chrome extension?

问题描述

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

In my Chrome extension I am injecting the content script into all IFRAMEs inside a page. Here's a part of the manifest.json file:

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

因此，具有多个 IFRAME 的单个网页最终将运行我注入的 content.js 的许多副本.

So a single web page having multiple IFRAMEs will end up running that many copies of my injected content.js.

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

The logic inside content.js collects data from each IFRAME it's injected into, or from the main/top page, and sends it back to the background script (using chrome.runtime.sendMessage.) The background script in turn needs to store the data in the global variable, that is later used in the extension itself.

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

The issue I'm facing is that the app needs to distinguish between the "data" received from multiple IFRAMEs, since my data collection method can be called repeatedly upon user's interaction with the page, and thus I cannot simply "dump" the data received by the background script into an array. Instead I need to use a dictionary-type data storage.

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

I can tell if the data is coming from an IFRAME or from the top page by running the following:

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

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

and my thinking was that if I collect page URLs of each IFRAME then I should be able to use it as a unique key to store the data under in my dictionary-type global variable:

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

好吧，这是行不通的，因为两个或多个 IFRAME 可以具有相同的 URL.

Well, that is not going to work, because two or more IFRAMEs can have the same URLs.

所以我最初的问题是——如何区分页面上的 IFRAMEs ?是否有 Chrome 分配给他们的唯一 ID 或其他内容?

So thus my original question -- how to tell IFRAMEs on the page apart? Is there some unique ID or somethign that Chrome assigns to them?

推荐答案

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

You can identify the relative place of the document in the hierarchy of iframes. Depending on the structure of the page, this can solve your problem.

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

Your extension is able to access window.parent and its frames. This should work, or at least works for me in a test case:

// 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，但原理应该可行.

我很想自己做，所以给你:

I was itching to do it myself, so here you go:

// 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);
   }
}

这篇关于有没有办法为我的 Chrome 扩展程序唯一标识内容脚本运行的 iframe?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！