バックグラウンドページのiframeを読み込むことができません（ステータス=キャンセル）

Question

バックグラウンドページ内にiframeを動的に挿入して読み込みたいと思います。しかし、毎回リクエストがキャンセルされます。一週間前に働いていた

http://i.imgur.com/Puto33c.png

。私はどこが間違っているのか分からない。この問題を再現するために

、私は小さな拡張機能を作成しました：

manifest.js：

{ 
    "name": "iframe background", 
    "version": "1.0.0", 
    "manifest_version": 2, 

    "browser_action": { 
     "default_title": "iframe" 
    }, 

    "background": { 
     "persistent": false, 
     "scripts": ["background.js"] 
    } 
} 

background.js：

chrome.browserAction.onClicked.addListener(function() { 
    var iframe = document.createElement('iframe'); 
    iframe.src = 'http://localhost:3000/'; 
    iframe.onload = function() { 
     console.log(iframe.contentDocument); // return null 
    }; 
    document.body.appendChild(iframe); 
}); 

ページをロードすることですX-Frame-Options SAMEORIGINによってブロックされません。

私は運がないHTMLの背景ページの中に直接iframeを置こうとしました。

私もcontent_security_policyを追加しようとしました：

"content_security_policy": "script-src 'self'; object-src 'self'; frame-src 'self' http://localhost:3000/"

しかし、iframeのは、まだロードされません。

誰かがこの問題の回避策または解決策を持っていますか？

ありがとうございます！

Answer 1

Chrome 58.0.3014.0 enables Site Isolation for extensions by default別のchrome.exe OSプロセスによって処理される別のレンダラープロセスでiframeの読み込みが行われます。

「キャンセル」というメッセージは、拡張機能のchrome.exeプロセスが要求をキャンセルし、別の非表示のchrome.exeプロセスによって処理されたことを意味します。

正しい方法は、iframe URLで自動的に実行され、バックグラウンドページと通信するコンテンツスクリプトを宣言することです。注意：JSONに妥当なデータのみが渡されます。つまり、innerHTMLは渡すことはできますが、DOM要素は渡すことはできません。これはDOMParserを介して処理するのは簡単です。

manifest.jsonを付加：

"content_scripts": [{ 
    "matches": ["http://localhost:3000/*"], 
    "js": ["iframe.js"], 
    "run_at": "document_end", 
    "all_frames": true 
}], 

iframe.js：

var port = chrome.runtime.connect(); 
// send something immediately 
port.postMessage({html: document.documentElement.innerHTML}); 

// process any further messages from the background page 
port.onMessage.addListener(msg => { 
    .............. 
    // reply 
    port.postMessage(anyJSONfiableObject); // not DOM elements! 
}); 

background.js：

var iframePort; 

chrome.browserAction.onClicked.addListener(() => { 
    document.body.insertAdjacentHTML('beforeend', 
     '<iframe src="http://localhost:3000/"></iframe>'); 
}); 

chrome.runtime.onConnect.addListener(port => { 
    // save in a global variable to access it later from other functions 
    iframePort = port; 

    port.onMessage.addListener(msg => { 
     if (msg.html) { 
      const doc = new DOMParser().parseFromString(msg.html, 'text/html'); 
      console.log(doc); 
      alert('Received HTML from the iframe, see the console'); 
     } 
    }); 
}); 

も同様のQAを参照してください。content.js in iframe from chrome-extension popup