JavaScriptのコールバック関数が呼ばれない

Question

Chrome extensionでpopuup.jsからbackground.jsにsendMessage()関数を呼び出して、更にbackground.jsにてcontent scriptからDOMの要素を取得して、その値を使ってAjaxを行ったあとに、popup.jsのコールバック関数を呼びましたが、Ajaxでデータを取ってくるところまではできますが、その後にpopup.jsのコールバック関数を呼び出しても、データが渡りません。なぜでしょうか。下記にpopup.jsと、background.jsを示します。

popup.js

    $(document).ready(function(){
      $('#submit').click(function(){
        console.log("cliecked");
        chrome.runtime.sendMessage({
          command: "get_text"
        },
        function(response){
          ここで表示されるはずだが表示されない
          console.log(response);
        });
      });
    });

background.js

    chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
      chrome.tabs.query({active: true, windowId: chrome.windows.WINDOW_ID_CURRENT}, function(result){
        chrome.tabs.sendMessage(result.shift().id, {
          command: "get_dom"
        },
        function(msg) {
          console.log("result message:", msg);
          $.ajax({
            type:"POST",
            url:"http://localhost:3000",
            data: JSON.stringify({
              text: msg
            }),
            dataType: "json",
            contentType:"application/json; charset=UTF-8",
            crossDomain: true,
            success: function(data){
              console.log(data);
              //コールバック関数呼び出し
              sendResponse(data);
            }
          })
        });
    
      });
    });

Answer 1

This function becomes invalid when the event listener returns, unless you return true from the event listener to indicate you wish to send a response asynchronously (this will keep the message channel open to the other end until sendResponse is called).

chrome.runtime - Google Chrome
ということみたいです。イベントリスナが値を返した時点で、sendResponseが無効になってしまっているのでは。

Comments

[Zousan]

回答ありがとうございます。イベントリスナが値を返している場所がどこかわかりません。その場所を教えて頂けますか。
イベントリスナが値を返す場所が `sendResponse` ではないのでしょうか

[Lhankor_Mhy]

> 値を返している場所がどこかわかりません
returnで明示的に返してないので、undefinedが返っています。

> イベントリスナが値を返す場所が `sendResponse` ではないのでしょうか
そうではないです。イベントリスナの処理が終わったあとに非同期でAjaxが処理されますので、コールバック関数が動作するのはイベントリスナが値を返し終わった後です。

[Lhankor_Mhy]

たとえば、これは↓

`function hoge(){
` $.get('hoge.html',function(){
` alert('callback');
` });
`}
`alert(hoge());

undefined 'callback' の順番でアラートが表示されます。