在弹出窗口中从 iframe 向后台脚本发送消息

Question

我有一个 google chrome 扩展程序，它具有包含 iframe 的弹出窗口。 iframe 指向域 abc.com。有什么方法可以单击 iframe 并向我的 chrome 扩展的后台脚本发送消息。我尝试将以下 javascript 代码添加到我在 abc.com 上的 index.php 页面中。

<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>

在 background.js 中

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

但它不起作用，也许我错过了一些东西。请帮忙。

Answer 1

在iframe 中，您不再处于扩展页面上下文中。因此，扩展 API 不会暴露给在 abc.com 上运行的脚本。

但是，由于它是一个扩展和一个你都控制的域，你可以在它们之间建立External Messaging。

第一步：Acquire a permanent ID for your extension.

第 2 步：在扩展程序的清单中声明您希望 abc.com 能够与您交谈：

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

第 3 步：在 abc.com 上，如果安装了扩展程序，您将暴露 chrome.runtime.sendMessage。

// 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 */
}

第 4 步：使用第一步中的 ID 发送消息：

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

第五步：在后台页面，接收消息：

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

---

附：请注意chrome.extension.sendMessage 和朋友已弃用chrome.runtime.sendMessage。