Send a message to background script from iframe within a popup

Question

I have a google chrome extension that has popup which contains and iframe. The iframe points to a domain abc.com. Is there any way I can click in the iframe and send a message to the background script of my chrome extension. I tried adding the following javascript code to my index.php page on abc.com.

<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"   charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("#mybtn").click(function(){
            chrome.extension.sendMessage({ action: "new message" });
        });
    });
</script>

and in background.js

chrome.extension.onMessage.addListener(function(request,sender,sendResponse(){
     if(request.action=="new message"){
        alert ("Message Recieved");
     }
});

But it does not work maybe I am missing something. Please help.

score 2 · Accepted Answer · edited May 23 '17 at 11:43

Inside the iframe, you are no longer in the extension page context. As such, the extension API is not exposed to the scripts running on abc.com.

However, since it's an extension and a domain you both control, you can establish External Messaging between them.

Step 1: Acquire a permanent ID for your extension.

Step 2: Declare in your extension's manifest that you want abc.com to be able to talk to you:

"externally_connectable": {
  "matches": ["*://*.abc.com/*"]
}

Step 3: On abc.com, if the extension is installed you will have chrome.runtime.sendMessage exposed.

// on the website
if(chrome && chrome.runtime && chrome.runtime.sendMessage){
  /* At least one extension is ready to listen */
} else {
  /* Not Chrome, or extension is not installed */
}

Step 4: Send the message, using the ID from the first step:

var extensionId = "abcdefghijklmnoabcdefhijklmnoabc";
chrome.runtime.sendMessage(extensionId, { action: "new message" });

Step 5: In the background page, receive the message:

chrome.runtime.onMessageExternal.addListener(
  function(request,sender,sendResponse) {
    if(request.action=="new message"){
      alert ("Message Recieved");
    }
  }
);

P.S. Please note that chrome.extension.sendMessage and friends are deprecated in favor of chrome.runtime.sendMessage.

And I can use the same method to send message back to the iframe?? — Syed Daniyal Shah, Aug 13 '14 at 09:04
Basica lly I want to setup two way communication between iframe that is pointing to abc.com and my extension's background-script — Syed Daniyal Shah, Aug 13 '14 at 09:05
No; the page _must_ initiate a connection. If you need to send a response to a message, you can use `sendResponse`; if you need full two-way communication, the iframe should open a port with `chrome.runtime.connect`. See the messaging docs I linked. — Xan, Aug 13 '14 at 09:06
Note though that if your popup is closed, the iframe will be destroyed and the connection will be cut. If you need a long-lived connection, consider either using an iframe in the background page, or better yet - WebSockets. — Xan, Aug 13 '14 at 09:07

Send a message to background script from iframe within a popup

1 Answers1