Question

我在原始网页（youtube.com）上注入<iframe>。我想要的是：

向网站A发送HTTP请求。
网站A返回json回复。
更新原始网页上的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
});

请注意，敌对页面也可以向嵌入方式发送消息，除using pre-shared key crypto之外无法区分它。但这不太可能存在风险。

最后请注意，您提到以下内容：

我需要一个iframe，因此我在template.html中的图片可以正确显示

您可能需要查看web_accessible_resources，也许您不需要这种复杂功能！

从内容脚本更新注入的iframe

1 个答案: