title: Port error: Could not establish connection. Error in event handler for 'undefined'. (chrome extension)
body: <p>I'm basically trying to execute the code found in Chrome's Extension documentation. And that's where I'm stuck.</p>
  
  <p>I'm trying to pass values from Content script >> background page (for XHR).</p>
  
  <p>And the error im getting in the console is : </p>
  
  <blockquote>
    <p>Port error: Could not establish connection. Receiving end does not exist. miscellaneous_bindings:236
    <br><br>Error in event handler for 'undefined': Cannot read property 'farewell' of undefined TypeError: Cannot read property 'farewell' of undefined
        <br>at chrome-extension://bccajmddlghglocgmkpkpbiankmhlfkc/js/content_script.js:23:23
        <br>at miscellaneous_bindings:281:11
        <br>at chrome.Event.dispatchToListener (event_bindings:387:21)
        <br>at chrome.Event.dispatch_ (event_bindings:373:27)
        <br>at chrome.Event.dispatch (event_bindings:393:17)
        <br>at Object.chromeHidden.Port.dispatchOnDisconnect (miscellaneous_bindings:239:27)</p>
  </blockquote>
  
  <p><strong>content_script.js</strong> looks like this : </p>
  
  <pre><code>function func1(){
  
  $(function() {
  
      $('.genericStreamStory').each(function(){
         var link = $(this).find('.uiStreamSource a').attr('href');
  
         $(this).find('.uiStreamFooter').find('.a1').remove();
         $(this).find('.uiStreamFooter').append("&lt;span class='a1' style='color:red !important;'&gt; · Sample&lt;/span&gt;");
  
  
         $(this).find('.a1').click(function(){
             alert('hi');
              chrome.extension.sendMessage({greeting: "hello"}, function(response) {
                console.log(response.farewell);
          });
  
          console.log('testing');
  
         }); //end of click handler
      });     //end of 'each' function
  });
  
  }
  func1();
  window.setInterval("func1()", 1000);
  </code></pre>
  
  <p>The send message statement <code>chrome.extension.sendMessage({greeting: "hello"}, function(response) {
                    console.log(response.farewell);
              });</code></p>
  
  <p>is taken from the <a href="https://developer.chrome.com/extensions/messaging.html" rel="nofollow">Chrome Extension Documentation</a>.</p>
  
  <p><strong>background.js</strong> : </p>
  
  <pre><code>$(function() {
  
      chrome.extension.onMessage.addListener(
          function(request, sender, sendResponse) {
            console.log("background");
            console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension");
            if (request.greeting == "hello")
            sendResponse({farewell: "goodbye"});
   });// end of onMessage listener
  
  });
  </code></pre>
  
  <p>The code for onMessage Listener is taken from the Chrome documentation.</p>
  
  <p>and finally, <strong>manifest.json</strong> :</p>
  
  <pre><code>{
  "name": "Facebook123",
  "version": "0.1", 
  "description": "Sample",
  
  "content_scripts": [
      {
          "matches": ["https://*.facebook.com/*"],
          "js": [
                  "/js/external/jquery.js", 
                  "/js/content_script.js"
              ]
      }
  ],
  
  "background": {
      "scripts": ["/js/background.js"]
  },
  
  "manifest_version": 2
  }
  </code></pre>
  
  <p>Looks like the listener doesn't seem to be 'available' for handling the message sent by conrent_script.js.<br><br>
  The Click Handler in content_script.js is working. The 'hi' alert box pops up and the message 'testing' gets printed in the console when I click on the span 'a1'. </p>
  
  <p>What could be the error? </p>