title: Chrome-extension undefined response from background to popup
body: <p>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. <code>Console.log</code> displays the content of the message and everything seems to be fine.
  But if I send the same message from background page to popup <code>console.log</code> displays <code>undefined</code>. I used <code>chrome.runtime.sendMessage</code> and <code>chrome.extension.sendRequest</code> but the result is the same. Using <code>chrome.runtime.connect</code> to connect background to popup throws a <code>Attempting to use a disconnected port object</code> although it worked for sending messages from content script to background page.</p>
  
  <p>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.</p>
  
  <p>I'm still new to Chrome extensions and trying to figure out how the examples from <a href="https://developer.chrome.com/extensions/messaging" rel="nofollow">Google's site</a> work.</p>
  
  <p>my code :</p>
  
  <p><strong>Manifest.json</strong></p>
  
  <pre><code>{
      "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"
          }
  }
  </code></pre>
  
  <p><strong>content_script.js</strong></p>
  
  <pre><code>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});
  </code></pre>
  
  <p><strong>background.js</strong></p>
  
  <pre><code>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});
          });
      }
  });
  </code></pre>
  
  <p><strong>popup.js</strong></p>
  
  <pre><code>// 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);
      });
  });
  </code></pre>
  
  <p>Can anyone help ?</p>