title: Chrome extension sending message from iFrame to event page then to content script
body: <p>I have inserted an iframe from content script. It works fine. But if I want to display parent's html content on iframe, I have to use messaging to communicate between iframe and content script, but it doesn't work. Then I tries to send message from iframe to "event page" then to "content script". Once content script receives the message, it will query the html content and reply. It doesn't work either. How can I make it work?</p>
  
  <p><strong>content script:</strong></p>
  
  <pre><code>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' &amp;&amp; msg.method == 'ping') {
      sendResponse({ data: 'pong' });
    }
  });
  </code></pre>
  
  <p><strong>event page:</strong></p>
  
  <pre><code>chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg.from === 'popup' &amp;&amp; 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);
        });
      });
    }
  });
  </code></pre>
  
  <p><strong>frame.js</strong></p>
  
  <pre><code>// 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);
  });
  </code></pre>