CX message passing Example

//POPUP
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('trigger').addEventListener("click", function() {
        //message to background
        chrome.extension.sendMessage({
            key: "KEY_1",
            data1: "abc"
        }, function(response){
            if (response.key_back1 == "BACK_1")
                alert('response:' + response.key_back1);
        });
    });
});


//BACKGROUND
function process_data_from_popup(data_from_popup) {
    chrome.tabs.query({active: true, highlighted: true}, function(tabs) {
        //message to content
            chrome.tabs.sendMessage(tabs[0].id, {
            key: "KEY_2",
            data2: data_from_popup
        }, function(response){
            if (response.key_back2 == "BACK_2")
                alert('response:' + response.key_back2);
        });
        });
}
function process_data_from_page(data_from_content) {
    alert('Data sent from popup:""' + data_from_content + '""');
}
chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {
    switch (msg.key) {
        case "KEY_1":
            sendResponse({key_back1: "BACK_1"});
            process_data_from_popup(msg.data1);
            break;
        case "KEY_3":
            sendResponse({key_back3: "BACK_3"});
            process_data_from_page(msg.data3);
            break;
    }
});


//CONTENT
function modify(data_from_background) {
    //message to background
    chrome.runtime.sendMessage({
        key: "KEY_3",
        data3: data_from_background
    }, function(response){
        if (response.key_back3 == "BACK_3")
            alert('response:' + response.key_back3);
    });
}
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    switch (msg.key) {
        case "KEY_2":
            sendResponse({key_back2: "BACK_2"});
            modify(msg.data2);
            break;
    }
    return true;
});