Google chrome sendResponse not work in chrome.tabs.query callback

Question

I am new to Chrome extension, I just found a very weird thing, can anyone explain please, thanks in advance.

background.js

 chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.type == "tab_start"){
            //this works fine since
            sendResponse({tab_id: sender.tab.id}); 

            //this does not work, it seams the response never gets sent out
            //I know this is kind of silly, we can get sender tab ID like above         
           //in the beginning, I did noticed I can do it the right way above
           //but anyway, I found this does not work in the query callback by accident
           //can you explain for me?

            chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
                sendResponse({tab_id:tabs[0].id});
                consloe.log(tabs[0].id);
            });

        } else {
            sendResponse();
        }

        chrome.pageAction.show(sender.tab.id);

    });

injected contact JS:

var interval = 10;
var myTabId = 0; 
//the callback never gets called, since the message never gets sent
//but why???
chrome.runtime.sendMessage({type: "tab_start"}, function(response) {
    console.log(response);
    myTabId = response.tab_id;
    var readyStateCheckInterval = setInterval(function() {
        if (document.readyState === "complete") {
            clearInterval(readyStateCheckInterval);
            // ----------------------------------------------------------
            // This part of the script triggers when page is done loading
            // ----------------------------------------------------------
        }
    }, interval);
});

Thanks again.