title: Not receiving any data from webpage to content.js of chrome extension
body: <p>I am trying to send a message from a button click even on my website which is opened in a tab by chrome extension. </p>
  
  <p>But, I'm not able to get any message from the webpage and I get a port error. </p>
  
  <p>My content.js:</p>
  
  <pre><code>var port = chrome.extension.connect();
  
  port.onMessage.addEventListener("message", function(event) {
      // We only accept messages from ourselves
      if (event.source != window)
        return;
  
      if (event.data.type &amp;&amp; (event.data.type == "FROM_PAGE")) {
        console.log("Content script received: " + event.data.text);
        port.postMessage(event.data.text);
      }
  }, false);
  
  
  chrome.tabs.onMessage.addListener(function(tabId, changeInfo, tab) {
    alert(changeInfo);
  }); 
  </code></pre>
  
  <p>Popup.js</p>
  
  <pre><code>    $("#linkify").click(function() {
          chrome.tabs.create({
              'url': 'http://localhost:3000/signin'
          }, function(tab) {
              // Tab opened.
              chrome.tabs.executeScript(tab.id, {
                  file: "jquery.js"
              }, function() {
                  console.log('all injected');
                  chrome.tabs.executeScript(tab.id, {
                      file: "content.js"
                  }, function() {
                      console.log('all injected');
                      chrome.tabs.sendMessage(tab.id, function() {
                          console.log('all injected');
                      });
                  });
              });
          });
          //getlink();
      });
  });
  
  
  function checkUserAuth() {
      console.log(localStorage.getItem("apiKey"));
      if (localStorage.getItem("apiKey") != null) {
          document.getElementById('openBackgroundWindow').style.visibility = 'hidden';
      }
  }
  
  var port = chrome.extension.connect({
      name: "Sample Communication"
  });
  port.postMessage("Hi BackGround");
  port.onMessage.addListener(function(msg) {
      console.log("message recieved" + msg);
  });
  </code></pre>
  
  <p>My background.js</p>
  
  <pre><code>chrome.extension.onMessage.addListener(
    function(request, sender, sendResponse) {
      console.log(sender.tab ?
                  "from a content script:" + sender.tab.url :
                  "from the extension");
  
    });
  </code></pre>
  
  <p>Script that sends message from the web url:</p>
  
  <pre><code>document.getElementById("theButton").addEventListener("click", function() {
      console.log("message being sent");
      window.postMessage({ type: "FROM_PAGE", text: "Hello from the webpage!" }, "*");
  }, false);
  </code></pre>
  
  <p>Where am I going wrong here that I am not receiving any message?</p>