javascript - 如何从 iframe 中的内容脚本传回消息？

Question

我正在查看嵌入了 iframe 的网页。我需要从网页和所有嵌入式 iframe 上的扩展浏览器操作中收集信息。我有以下代码:

list

{
  "manifest_version": 2,
  ...
  "content_scripts": [
    {
      "all_frames": true,
      "js": [ "contentscript.js" ],
      "matches": [ "http://*/*", "https://*/*", "file:///*" ],
      "run_at": "document_start"
    }
  ],
  ...
}

浏览器操作弹出窗口

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(tabs[0].id,{command: 'collectPageDetails'},function (details) {
        console.log('got details');
    });
});

内容脚本

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    if (msg.command === 'collectPageDetails') {
        console.log('getting page details');
        sendResponse({ details: 'something' });
        return true;
    }
});

我在这里看到的行为是主页和 iframe 都接收到消息。我可以通过查看页面控制台中记录的两个获取页面详细信息实例来验证这一点。

但是，我只收到一个对浏览器操作的响应(获取详细信息仅在浏览器操作中记录一次)，该响应似乎仅来自主页，而不是嵌入式 iframe。

如何通过消息传递从页面内嵌入的 iframe 进行通信？我预计 function (details) { } 中的浏览器操作会发生两次回调。

Answer 1

来自 chrome.runtime.onMessage 的 sendRespnse() 函数最多可以使用一次来发送对消息的单个响应。这并不意味着每帧可以使用一次，而是总共一次。在描述 sendResponse 函数时，Chrome documentation说[强调我的]:

Function to call (at most once) when you have a response. The argument should be any JSON-ifiable object. If you have more than one onMessage listener in the same document, then only one may send a response.

因此，您将需要使用其他方法向后台脚本发送消息。这通常是 chrome.runtime.sendMessage() (内容脚本)与后台脚本中的 chrome.runtime.onMessage 监听器配对。您需要为消息建立某种格式，以定义后台脚本的消息内容。例如，您可以执行以下操作:

内容脚本:

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    if(msg.command === 'collectPageDetails') {
        console.log('getting page details');
        chrome.runtime.sendMessage({type:'collectPageDetailsResponse',details:'something'});
    }
});

后台脚本:

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if(msg && msg.type === 'collectPageDetailsResponse') {
        //Received a details response.
        let tabId = sender.tab.id;
        let frameId = sender.tab.frameId;
        console.log('got details:', msg.details, ' From tabId:',tabId, ' frameId:',frameId);
    }
});