Chrome App to Webpage communication

chrome_app_js.js

// be sure to update manifest to allow external connections,
// https://developer.chrome.com/extensions/messaging#external-webpage
/*
 "externally_connectable" : {
    "matches": ["*://diyability-capacita.appspot.com/*"]
  }
*/


// Listen for incoming long lasting PORT connection from Webpage or extension
chrome.runtime.onConnectExternal.addListener(function(port) {
  console.log("PORT!", port);

 // say hello every second once connection is made
  setInterval(function() {
    port.postMessage("hi from chrome app");
    console.log("trying to say hi")
  }, 1000);

  port.onMessage.addListener(function(msg) {
    // See other examples for sample onMessage handlers.
    console.log("msg received: ", msg);
    console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!");

  });
});

webpage_js.js

// put this in your webpage js

var extId = "gdbjlnnacemphcbgjhlcjjjcnijafpgi"; // chrome app id
var port = chrome.runtime.connect(extId);
port.postMessage("hi from webpage");

port.onMessage.addListener(function(msg) {
  // See other examples for sample onMessage handlers.
  console.log("web page received: ", msg);
});