feat(*): implement connection between content script and devTools pane

HintCtrl.js

@@ -6,6 +6,18 @@ angular.module('ngHintUI')
       $scope.module, $scope.type, $scope.isEmpty = '';
 
       //message data will be an array sent from hint log to batarang to here
+
+      // connect to background page
+      var port = chrome.extension.connect();
+      port.onMessage.addListener(function(msg) {
+        $scope.$apply(function () {
+          $scope.messageData.Directives['Error-Messages'].push(msg + ' ' + Math.random());
+        });
+      });
+      port.onDisconnect.addListener(function (a) {
+        console.log(a);
+      });
+
       $scope.messageData = {
         'Modules': {
           'Error-Messages': ['qwer$scope is a message', 'So issdfs $scope', 'Dont forget asdfsbout me too'],

background.js

@@ -0,0 +1,8 @@
+
+chrome.runtime.onConnect.addListener(function(port) {
+
+  // context script –> background
+  chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
+    port.postMessage(msg);
+  });
+});

gulpfile.js

@@ -0,0 +1,16 @@
+var gulp = require('gulp');
+var source = require('vinyl-source-stream');
+var browserify = require('browserify');
+
+var main = require('./package.json').main;
+
+gulp.task('watch', function(){
+  gulp.watch(['hint.js', '!./dist/*.js'], ['browserify']);
+});
+
+gulp.task('browserify', function() {
+  var bundleStream = browserify('./' + main).bundle().pipe(source(main));
+  return bundleStream.pipe(gulp.dest('./dist'));
+});
+
+gulp.task('default', ['browserify']);

hint.html

@@ -7,8 +7,6 @@
 
     <script src="HintCtrl.js"></script>
 
-    <!--<script src="hint.js"></script>-->
-
     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="app.css">
 

hint.js

@@ -1,23 +1,12 @@
 
 require('./bower_components/angular-loader/angular-loader.js');
 require('angular-hint');
+var eventProxyElement = document.getElementById('__ngDebugElement');
 
-// afterThisGetsDefined(window, 'angular', function () {
-//   afterThisGetsDefined(angular, 'module', function () {
-//     require('angular-hint');
-//   });
-// });
+var customEvent = document.createEvent('Event');
+customEvent.initEvent('myCustomEvent', true, true);
 
-// function afterThisGetsDefined(obj, prop, fn) {
-//   Object.defineProperty(obj, prop, {
-//     set: function (val) {
-//       Object.defineProperty(obj, prop, {
-//         configurable: true,
-//         writable: true
-//       });
-//       obj[prop] = val;
-//       fn();
-//     },
-//     configurable: true
-//   });
-// }
+angular.hint.onMessage = function (data) {
+  eventProxyElement.innerText = data;
+  eventProxyElement.dispatchEvent(customEvent);
+};

inject.js

@@ -1,10 +1,20 @@
+var html = document.getElementsByTagName('html')[0];
+
+var eventProxyElement = document.createElement('div');
+eventProxyElement.id = '__ngDebugElement';
+eventProxyElement.style.display = 'none';
+html.appendChild(eventProxyElement);
 
 // inject into the application context from the content script context
 
 var script = window.document.createElement('script');
 script.src = chrome.extension.getURL('hint.bundle.js');
 
-var html = document.getElementsByTagName('html')[0];
+eventProxyElement.addEventListener('myCustomEvent', function () {
+  var eventData = eventProxyElement.innerText;
+  chrome.extension.sendMessage(eventData);
+});
+
 html.setAttribute('ng-hint', '');
 
 html.appendChild(script);

js/devtoolsBackground.js

@@ -5,3 +5,4 @@ var angularPanel = panels.create(
   "img/angular.png",
   "hint.html"
 );
+

manifest.json

@@ -8,15 +8,20 @@
     "tabs",
     "<all_urls>"
   ],
-  // "content_scripts": [
-  //   {
-  //     "matches": ["<all_urls>"],
-  //     "js": ["inject.js"],
-  //     "run_at": "document_start"
-  //   }
-  // ],
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["inject.js"],
+      "run_at": "document_start"
+    }
+  ],
+  "background": {
+    "scripts": [
+      "background.js"
+    ]
+  },
   "web_accessible_resources": [
-   // "hint.bundle.js"
+   "hint.bundle.js"
   ],
   "minimum_chrome_version": "21.0.1180.57"
 }

package.json

@@ -2,10 +2,11 @@
   "name": "angularjs-batarang",
   "version": "0.5.0",
   "description": "chrome extension for inspecting angular apps",
-  "main": "index.js",
+  "main": "hint.js",
   "dependencies": {
-    "angular-hint": "^0.0.0",
-    "browserify": "^5.9.1"
+    "browserify": "^5.9.1",
+    "gulp": "^3.8.7",
+    "vinyl-source-stream": "^0.1.1"
   },
   "devDependencies": {},
   "scripts": {