訪問DOM元素數據文檔-> Iframe-> Iframe-> method chrome擴展名

Question

我正在嘗試從開發人員控制台訪問嵌套在iframe中的iframe中的一些數據：

Object.keys(document.getElementById("contentBody").
  contentDocument.getElementById('rawContent').
  contentDocument.defaultView.window.messages)

["29c736c0ed25463c8436f4990ab6c6ec.zip", 
 "235819a8cf11488e83f0336603b71711.zip", 
 "66c9260590834d9698568c8a676ef406.zip", 
 "fae95e31cb424cd6ad21302217ef2cdc.zip", 
 "f554f712141047aa9aa24f765073e305.zip", 
 "e5c41819578240e0868f43ab6301aeb3.zip"]

這就是我期望的結果，但是我嘗試從正在開發的google chrome擴展中獲取相同的信息，由於某種原因，我無法訪問郵件數組，這就是清單文件和contentscript.js（我已經嘗試了所有我想到的方法，並搜索了幾個小時而沒有成功：/）：

content.js

var iframeContentBody = document.getElementById('contentBody');
var innerDocContentBody = iframeContentBody.contentDocument;
var iframeRawContent = innerDocContentBody.getElementById('rawContent');
var innerDocRawContent = iframeRawContent.contentDocument; // iframeRawContent is undefined here
console.log(iframeRawContent.messages);  // this prints undefined

表現：

{                                                                                                                                                                                                                  
  "manifest_version": 2,                                                                                                                                                                                           

  "name": "Read Comments",
  "description": "Read all comments from the current forum",
  "version": "1.0",
  "content_scripts": [{
    "matches": ["*://*.forum.net/*"],
    "js": ["content.js"]
  }],
 "browser_action": {
   "default_title": "Read Comments"
 },
 "permissions": ["activeTab", "tabs"]
} 

要點設置一切：

HTML示例

將這3個文件下載並放置在同一文件夾中后，運行以下命令：

python -m SimpleHTTPServer 80 # You may need to run it with sudo 

然后轉到localhost / test.html，就一切就緒，如果您測試我在控制台中發布的行，您應該會看到[1,2,3]

擴展示例

這是擴展代碼

開發者控制台：

具有“ all_frames”的Chrome擴展程序：true

Hacky解決方案： 部分解決方案在這個要點中，有一種方法可以做到，很難檢測到何時已加載iframe，也很難檢測到何時已加載另一個iframe中的iframe，因此setTimeout給了足夠的時間做到這一點，然后向dom中添加腳本元素似乎會繞過chrome擴展程序可能具有的所有安全措施，並且確實可以獲取屬性的內容，而沒有任何其他問題，但這似乎還是很棘手，這不是我要嘗試的確實，我正在尋找一種干凈的解決方案或一種干凈的方法來訪問嵌套iframe的dom，如示例代碼所示...

謝謝，歡迎提出任何建議。

Answer 1

畢竟，這是我的解決方案，介於我們談論評論和研究文檔以及其他線程之間：

內容腳本：

(function () {
  document.addEventListener("DOMContentLoaded", function () {
    contentBody = document.getElementById("contentBody");
    contentBody.addEventListener("load", function () {
      rawContent = contentBody.contentDocument.getElementById("rawContent");
      if (rawContent) {
        var s = document.createElement("script");
        s.src = chrome.extension.getURL('injected.js');
        s.onload = function() {
          this.parentNode.removeChild(this);
        };

        (document.head||document.documentElement).appendChild(s);
      }
    });
  });
})();

注入文件：

keys = Object.keys(document.getElementById("contentBody").contentDocument.getElementById("rawContent").contentDocument.defaultView.window.messages);

console.log(keys);

表現：

{
  "manifest_version": 2,

  "name": "Read Comments",
  "description": "Read all comments from the current forum",
  "version": "0.0.1",

  "content_scripts": [{
    "matches": ["*://localhost/*"],
    "run_at": "document_start",
    "js": ["content.js"]
  }],

  "browser_action": {
    "default_title": "Read Comments"
  },

  "permissions": [
  ],

  "web_accessible_resources": ["content.js", "injected.js"]
}

作為一個簡單的解釋，主要問題是iframe的異步加載以及擴展代碼運行的時刻，因此在聽了很多事件並丟棄了dom中沒有必需元素的事件后，一切正常。 。

Answer 2

為了完整"all_frames":true ，這是帶有"all_frames":true的版本。 有兩個問題需要解決：（1）將messages從內部框架傳遞到頂部，以及（2）將messages從網頁的隔離世界發送到內容腳本的隔離世界（我假設您要這樣做不僅僅是將messages寫入控制台）。 這可以通過使用postMessage一次解決。

if ( window.top !== window.parent ) {
    var s = document.createElement("script");
    s.textContent = "postMessage(messages,'*');";
    s.onload = function() {
        this.parentNode.removeChild(this);
    };
    document.head.appendChild(s);
} else if ( window.top === window ) {
    addEventListener('message',function(e) {
        console.log(e.data);
    });
}

我必須承認我還沒有實際測試過。 您可能需要嘗試使注入的腳本從網頁發送消息 。