Chrome 扩展程序将消息从 iFrame 发送到事件页面,然后发送到内容脚本

2024-03-29

我已经从内容脚本插入了一个 iframe。效果很好。但是如果我想在 iframe 上显示父级的 html 内容,我必须使用消息传递在 iframe 和内容脚本之间进行通信,但它不起作用。然后我尝试将消息从 iframe 发送到“事件页面”,然后发送到“内容脚本”。一旦内容脚本收到消息,它将查询 html 内容并回复。它也不起作用。我怎样才能让它发挥作用?

内容脚本:

var iframe = document.createElement('iframe');
iframe.id = "popup";
iframe.src = chrome.runtime.getURL('frame.html');
document.body.appendChild(iframe);

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
  if (msg.from === 'event' && msg.method == 'ping') {
    sendResponse({ data: 'pong' });
  }
});

活动页面:

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
  if (msg.from === 'popup' && msg.method === 'ping') {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
       chrome.tabs.sendMessage(tabs[0].id, {
        from: 'event',
        method:'ping'}, function(response) {
          sendResponse(response.data);
      });
    });
  }
});

frame.js

// This callback function is never called, so no response is returned. 
// But I can see message's sent successfully to event page from logs.
chrome.runtime.sendMessage({from: 'popup', method:'ping'},
  function(response) {
  $timeout(function(){
    $scope.welcomeMsg = response;
  }, 0);
});

我找到了一个相关的问题。https://stackoverflow.com/a/20077854/772481 https://stackoverflow.com/a/20077854/772481

来自 chrome.runtime.onMessage.addListener 的文档:

当事件监听器返回时,此函数将变得无效,除非您从事件监听器返回 true 来指示您希望异步发送响应(这将使消息通道保持对另一端开放,直到调用 sendResponse 为止)。

所以我必须返回 true 来指示 sendResponse 是异步的。

活动页面:

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
  if (msg.from === 'popup' && msg.method === 'ping') {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
       chrome.tabs.sendMessage(tabs[0].id, {
        from: 'event',
        method:'ping'}, function(response) {
          sendResponse(response.data);
      });
    });
    return true; // <-- Indicate that sendResponse will be async
  }
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Chrome 扩展程序将消息从 iFrame 发送到事件页面,然后发送到内容脚本 的相关文章

随机推荐