google-chrome - 从 Chrome 扩展中的 popup.js 向 background.js 发送消息

Question

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

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

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

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

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

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

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

在 背景.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} );
    }
}

有任何想法吗？

Answer 1

澄清一下，我们讨论的是 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说:

Gets the tab that this script call is being made from. May be undefined if called from a non-tab context (for example: a background page or popup view).

因此，您的所有请求都会未定义，因为您在后台页面中调用它。你需要做的是使用方法 chrome.tabs.query获取当前事件的选项卡。

因此，在解决所有问题后，新代码应如下所示:

背景.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);
        });
}