javascript - 在弹出窗口内从 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他们之间。

第 1 步:Acquire a permanent ID for your extension.

第 2 步:在扩展程序 list 中声明您希望 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。