fix(inject.js): Appropriately process+filter msgs received via postMessage

The Batarang uses postMessage to send data from the webpage context to the devtools panel, but
the current implementation does not appropriately filter messages that originate from the
webpage itself rather than scripts we inject into the webpage context. As a result, the Batarang
attempts to forward every message the webpage sends via postMessage to the Batarang. I have added
a __fromBatarang property to posted messages, and modified the handler to check for the property
before forwarding it to the devtools panel.

There is also a benign typo in the handler code that references the global event object rather
than the local evt argument. Since these alias, it's not a problem in practice, but fixing it
leads to clearer code.

In addition, the Batarang uses chrome.extension.connect / chrome.extension.sendMessage, when these
methods are supposed to only exist on chrome.runtime according to the Chrome API docs. In
practice, they exist on chrome.extension too, but since this is not a documented API call using
the proper interface is likely to be more future-proof.

Author: John Vilk

hint.js

@@ -8,6 +8,7 @@ require('angular-hint');
 
 angular.hint.onAny(function (data, severity) {
   window.postMessage({
+    __fromBatarang: true,
     module: this.event.split(':')[0],
     event: this.event,
     data: data,

inject.js

@@ -3,7 +3,7 @@ if (document.cookie.indexOf('__ngDebug=true') != -1) {
 }
 
 function bootstrapHint () {
-  chrome.extension.sendMessage('refresh');
+  chrome.runtime.sendMessage('refresh');
 
   var html = document.getElementsByTagName('html')[0];
 
@@ -12,11 +12,20 @@ function bootstrapHint () {
   script.src = chrome.extension.getURL('dist/hint.js');
 
   window.addEventListener('message', function (evt) {
-    // We only accept messages from ourselves
-    if (event.source !== window) {
-      return;
+    // There's no good way to verify the provenance of the message.
+    // evt.source === window is true for all messages sent from
+    // the main frame. evt.origin is going to be the webpage's origin,
+    // even if the message originated from a chrome:// script you injected.
+
+    // The only thing we can do is see if the message *looks* like something
+    // we would send, cross our fingers, and send it on.
+    // Thus, we check for one of the properties known to be on *all* of our
+    // messages (__fromBatarang === true).
+    var eventData = evt.data;
+    // NOTE: Check for null before checking for the property, since typeof null === 'object'.
+    if (typeof eventData === 'object' && eventData !== null && eventData.hasOwnProperty('__fromBatarang') && eventData.__fromBatarang) {
+      chrome.runtime.sendMessage(eventData);
     }
-    chrome.extension.sendMessage(evt.data);
   });
 
   html.setAttribute('ng-hint', '');

panel/components/inspected-app/inspected-app.js

@@ -56,7 +56,7 @@ function inspectedAppService($rootScope, $q) {
     chrome.devtools.inspectedWindow.eval('angular.hint.' + method + '(' + args + ')');
   }
 
-  var port = chrome.extension.connect();
+  var port = chrome.runtime.connect();
   port.postMessage(chrome.devtools.inspectedWindow.tabId);
   port.onMessage.addListener(function(msg) {
     $rootScope.$applyAsync(function () {

panel/components/inspected-app/inspected-app.spec.js

@@ -170,7 +170,7 @@ describe('inspectedApp', function() {
 
   function createMockChrome() {
     return {
-      extension: {
+      runtime: {
         connect: function () {
           return port = createMockSocket();
         }