Chrome-extension undefined response from background to popup

Question

I'm currently trying to write a Chrome extension that notifies me about DOM changes on the target page. The content script uses a a long lived connection to send a message to the background page if the element changes. Console.log displays the content of the message and everything seems to be fine. But if I send the same message from background page to popup console.log displays undefined. I used chrome.runtime.sendMessage and chrome.extension.sendRequest but the result is the same. Using chrome.runtime.connect to connect background to popup throws a Attempting to use a disconnected port object although it worked for sending messages from content script to background page.

I want to send the notification from content_script to background to popup. Though I'm not sure if I even need to send it to the background in the first place or if it's better to send it straight to the popup.

I'm still new to Chrome extensions and trying to figure out how the examples from Google's site work.

my code :

Manifest.json

{
    "name": "Chrome Extension \\o.o/",
    "description": "doing stuff",
    "version": "1.0",
    "manifest_version": 2,
    "permissions":
        [
        "tabs",
        "http://*/*",
        "background"
        ],
    "background":
        {
            "scripts": ["background.js"]
        },
    "content_scripts": 
        [{
            "matches": [" /* my website */ "],
            "js": ["content_script.js"]
        }],
    "browser_action":
        {
            "default_popup": "popup.html"
        }
}

content_script.js

var audio = document.getElementById("audioSource");

// Open up a long-lived connection to background page
var port = chrome.runtime.connect({name:"stuffChanged"});

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log("stuff happened, audio source changed to " + audio.src);
        // notify background page
        port.postMessage({notification: audio.src});
    })
});

observer.observe(document.getElementById("audioSource"), {attributes: true});

background.js

var toPopup = chrome.runtime.connect({name:"update"});

chrome.runtime.onConnect.addListener(function(port){
    if(port.name == "stuffChanged"){
        port.onMessage.addListener(function(msg){
                var notif = msg.notification;
                // message from content_script, works
                console.log(notif);

                // send to pop up
                // returns undefined
                chrome.runtime.sendMessage({update: notif});
                // disconnected port object
                toPopup.postMessage({notification: notif});
        });
    }
});

popup.js

// returns undefined
chrome.extension.onMessage.addListener(function(msg){
    console.log(msg.udpate);
});

// doesn't work at all
chrome.runtime.onConnect.addListener(function(toPopup){
    toPopup.onMessage.addListener(function(msg){
        console.log(toPopup.notification);
    });
});

Can anyone help ?