Question

我有一个谷歌浏览器扩展程序，其中包含包含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步：在您的扩展程序清单中声明您希望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" });

步骤5：在后台页面中，收到消息：

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

P.S。请注意，chrome.extension.sendMessage和朋友已被弃用，而不是chrome.runtime.sendMessage。

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

1 个答案: