注入されたiframeをコンテンツスクリプトから更新する

Question

をオリジンWebページ（youtube.com）に挿入します。ウェブサイトAにAはJSONレスポンスを返す

ウェブサイトをHTTPリクエストを送信し

1. ：私が欲しいもの はにあります。
2. 原産地のWebページのiframeを更新します。

iframeをコンテンツスクリプトから更新する方法が見つかりません。

私のmanifest.jsonをパート：

"content_scripts": [ 
    { 
    "matches": ["https://www.youtube.com/watch?v=*"], 
    "js": ["jquery-2.2.3.min.js", "content_script.js"], 
    "all_frames": true, 
    "run_at": "document_end" 
    } 
], 

私のコンテンツスクリプトの一部：

var iFrame = document.createElement ("iframe"); 
iFrame.src = chrome.extension.getURL("/template.html"); 
$('#watch-header').after(iFrame); 

上記のコードの結果：

<iframe src="chrome-extension://gdjehplmmeijdoijcnpbehoghnifhmib/template.html"></iframe> 

私はので、私のiframeを必要としますtemplate.html内の画像を正しく表示できます。
sendMessageは機能しません。contentDocumentも機能しません。

とにかくiframeを更新するにはどうすればよいですか？

Answer 1

私は驚いたことに、ウェブページ内の拡張ページを持つiframeがコンテンツスクリプトのコンテキストとして扱われていることを最近知っています。

したがって、chrome.runtime.sendMessageは届きません。ただし、chrome.tabs.sendMessageは、バックグラウンドページからの通信に最適です。

あなたは親ページのコンテンツスクリプトと通信したい場合は、良い方法はpostMessageを使用することです：

// Content script in parent frame 
// Assuming you have saved the reference to the frame in iFrame 
function messageEmbed(message) { 
    iFrame.contentWindow.postMessage(
    message, 
    chrome.runtime.getURL("") // Origin of embedded page 
); 
} 

// Script in embedded HTML page 
function messagePage(message) { 
    window.parent.postMessage(
    message, 
    "http://example.com/" // The expected origin of embedding page 
          // Can use "*" if not known in advance 
); 
} 

// Listener in both 
window.addEventListener("message", function(event) { 
    // Use event.data here as the message 
}); 

が同様に敵対的なページのCANメッセージを埋め込むことを警告することとする方法はありませんそれを区別するためにusing pre-shared key cryptoのために保存しなさい。しかし、リスクはそれほどありません。

---

最後の注意は、次のように言及：

私はtemplate.html内部の私のイメージが正しく

を表示することができますので、あなたはweb_accessible_resourcesを検討する必要があるかもしれないのiframeを必要とし、おそらく、あなたはこの合併症を必要としません！