从Chrome扩展程序中的popup.js发送消息到background.js

时间:2013-09-09 08:45:58

标签: google-chrome google-chrome-extension

从Chrome扩展程序中的popup.js向background.js发送消息(并获得响应)的正确方法是什么?我尝试的每种方法最终都会出现以下错误:

“端口:无法建立连接。接收端不存在。”

我更喜欢使用chrome.extension.sendMessage()而不是chrome.extension.connect()和port.postMessage(),但这两种方法似乎都没有用。

我想要做的是连接popup.html中的一个按钮,调用popup.js中的一些javascript,调用back.js以获取有关topMost的currentTab()的信息(即:获取要在popup.html中显示的当前URL字符串

现在在 popup.js (连接到按钮的操作)我有:

function getURL()
{
   chrome.extension.sendMessage({greeting: "GetURL"}, 
          function(response) { tabURL = response.navURL });

   $("#tabURL").text(tabURL);
}

background.js 中,我有:

chrome.extension.onMessage.addListener( function(request,sender,sendResponse)
{
    if( request.greeting == "GetURL" )
    {
        var tabURL = "Not set yet";
        chrome.tabs.getCurrent(function(tab){
            tabURL = tab.url;
        });

        sendResponse( {navURL:tabURL} );
    }
}

有什么想法吗?

1 个答案:

答案 0 :(得分:23)

为了澄清一下,我们讨论了browserAction和后台脚本之间的弹出页面之间的通信?

无论如何,你的代码中有很多错误。

首先你完全忽略了chrome api中的所有回调都是异步的事实。

在后台页面

    var tabURL = "Not set yet";
    chrome.tabs.getCurrent(function(tab){
        tabURL = tab.url;
    }); //this will be invoked somewhere in the future

    sendResponse( {navURL:tabURL} ); 
    //navUrl will be always Not set yet because callback of getCurrent hasn't been called yet

popup.js中的相同

chrome.runtime.sendMessage({greeting: "GetURL"}, 
          function(response) { tabURL = response.navURL });//callback will be invoked somewhere in the future

$("#tabURL").text(tabURL)//tabURL will display something totally different from what you have been expected

第二次错误是chrome.tabs.getCurrent未向您提供用户在主窗口中选择的当前标签。 docs说:

  

获取此脚本调用的选项卡。也许   如果从非选项卡上下文调用(例如:背景),则为undefined   页面或弹出视图)。

因此,您将在所有请求中获得未定义,因为您在后台页面中调用它。您需要做的是使用方法chrome.tabs.query来获取当前活动的标签。

因此在解决所有问题之后,新代码看起来应该是这样的:

background.js

chrome.runtime.onMessage.addListener( function(request,sender,sendResponse)
{
    if( request.greeting === "GetURL" )
    {
        var tabURL = "Not set yet";
        chrome.tabs.query({active:true},function(tabs){
            if(tabs.length === 0) {
                sendResponse({});
                return;
            }
            tabURL = tabs[0].url;
            sendResponse( {navURL:tabURL} );
        });        
    }
}

popup.js

function getURL() {
    chrome.runtime.sendMessage({greeting: "GetURL"},
        function (response) {
            tabURL = response.navURL;
            $("#tabURL").text(tabURL);
        });
}