Google Chrome扩展程序 - 消息+在弹出页面和内容脚本之间调用函数

时间:2012-07-23 17:23:35

标签: google-chrome-extension

在Google Chrome扩展程序中,我想在内容脚本和弹出页面之间传递消息。我还想要在弹出页面向内容脚本发送执行此操作的信号时触发内容脚本中的函数。

Google Chrome扩展程序开发者文档中有关消息的部分,指出消息可以“从您的内容脚本传递到扩展页面,反之亦然”(引自http://code.google.com/chrome/extensions/messaging.html

这是否意味着我可以在内容脚本和弹出页面之间发送/接收消息?因为我看到的用法是用于后台页面和内容脚本之间的通信。

或者我必须设置3路消息传递路由 - 即。 内容脚本< - >背景页< - >弹出页面。如果是这种情况,如何在后台页面< - >之间设置消息传递?弹出页面?

在从弹出页面向内容脚本发送信号后,如何在内容脚本中触发函数?这是否还需要后台脚本?

1 个答案:

答案 0 :(得分:9)

内容脚本只能向后台页面发送消息。如果要将消息从内容脚本发送到弹出窗口,则必须:

  1. 将消息从内容脚本发送到后台页面。

    chrome.runtime.sendMessage( ...message... , function() { /*response*/ });
    
  2. 在后台接收消息。

    chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) { ... });
    
  3. 将消息传递给弹出窗口。要获取对弹出窗口的全局window对象的引用,请使用chrome.extension.getViews。注意:与大多数其他chrome API不同,此方法是同步的:

    var popupWindows = chrome.extension.getViews({type:'popup'});
    if (popupWindows.length) { // A popup has been found
        // details is the object from the onMessage event (see 2)
        popupWindows[0].whatever(message, sendResponse);
    }
    
  4. 在弹出窗口中,定义whatever方法。

    function whatever(message, sendResponse) {
        // Do something, for example, sending the message back
        sendResponse(message);
    }
    
  5. 调用sendResponse(4)时,调用details.sendResponse(参见3)。反过来,这会从1调用function() { /*response*/ }
  6. 注意:仅在Chrome 26+中支持chrome.runtime.sendMessage / onMessage。如果您还想支持旧浏览器,请使用chrome.extension.sendMessage