separate message processing into separate function and add lots of console.logs to help debugging

localjo · localjo · commit 8e46142e4067 · 2014-06-23T16:45:32.000-04:00
diff --git a/background.js b/background.js
@@ -1,5 +1,4 @@
-// Chrome automatically creates a background.html page for this to execute.
-// This can access the inspected page via executeScript
+// Chrome automatically creates a background.html page as the context for this
 //
 // Can use:
 // chrome.tabs.*
@@ -14,11 +13,8 @@ chrome.runtime.onConnect.addListener(function (port) {
         if (i !== -1) ports.splice(i, 1);
     });
     port.onMessage.addListener(function (msg) {
-        if (msg.tabId) {
-          getJsonResource(msg.tabId);
-        } else {
-          console.log(msg);
-        }
+        console.log("Background.js Recieved Message", msg);
+        processBackgroundIncomingMessage(msg);
     });
 });
 
@@ -28,8 +24,18 @@ chrome.tabs.onUpdated.addListener(function (tabId, changes, tabObject) {
   }
 });
 
+function processBackgroundIncomingMessage(msg) {
+  console.log("Processing Message in Background", msg)
+  if (msg.tabId) {
+    getJsonResource(msg.tabId);
+  } else {
+    console.log(msg);
+  }
+}
+
 // Function to send a message to main.js
 function notifyDevtools(msg) {
+    console.log("Background.js Sending Message", msg);
     ports.forEach(function (port) {
         port.postMessage(msg);
     });
@@ -42,9 +48,12 @@ function getJsonResource(tabID) {
     var xhr = new XMLHttpRequest();
     xhr.open("GET", jsonResourceURL, true);
     xhr.onreadystatechange = function() {
-      if (xhr.readyState == 4) {
-        var resp = JSON.parse(xhr.responseText);
-        notifyDevtools(xhr.responseText);
+      if (xhr.readyState === 4){
+        if(xhr.status === 200){
+          notifyDevtools(xhr.responseText);
+        } else { //This isn't quite right, because it fires when it shouldnt
+          notifyDevtools("Bad Response");
+        }
       }
     }
     xhr.send();
diff --git a/main.js b/main.js
@@ -1,3 +1,4 @@
+// Runs in the context of DevTools including devpanel.js
 // Can use
 // chrome.devtools.*
 // chrome.extension.*
@@ -10,10 +11,12 @@ function(panel){
     var port = chrome.runtime.connect({name: 'devtools'});
 
     port.onMessage.addListener(function(msg) {
+
+      console.log("Main.js Recieved Message", msg);
       // Send message to devpanel, if it exists.
       // If there is no panel yet, queue messages for later.
       if (_window) {
-        _window.sendJsonToInspector(msg);
+        _window.processMainIncomingMessage(msg);
       } else {
         data.push(msg);
       }
@@ -24,9 +27,11 @@ function(panel){
       _window = panelWindow;
 
       var msg;
-      while (msg = data.shift())
-      _window.sendJsonToInspector(msg);
+      while (msg = data.shift()) {
+        _window.processMainIncomingMessage(msg);
+      }
       _window.respond = function(msg) {
+        console.log("Main.js Sending Message", msg);
         port.postMessage(msg);
       };
 
diff --git a/views/devpanel.html b/views/devpanel.html
@@ -8,5 +8,6 @@
 <body>
   <h2>Page Context</h2>
   <div id="pagecontext"></div>
+  <div id="messageholder"></div>
 </body>
 </html>
diff --git a/views/devpanel.js b/views/devpanel.js
@@ -1,11 +1,28 @@
-// This runs in the context of the panel in the Dev Tools
+// Runs in the context of the DevTools panel
 //
 // Can use
 // chrome.devtools.*
 // chrome.extension.*
 
-//I think the inspector var needs to be global and just updated here
-function sendJsonToInspector(msg) {
+function processMainIncomingMessage(msg) {
+  console.log("Devpanel Processing Message", msg);
+  var msgJson = 0;
+  try {
+    msgJson = JSON.parse(msg); //This doesn't work if it's not a JSON string
+  } catch  (e) {
+    console.log("Ooops, the message wasnt a JSON string");
+  }
+ if (msgJson.hasOwnProperty('page')) {
+    console.log("Message contains page object!");
+    updateInspectorJSON(msg);
+  } else if (msg === "Bad Response") {
+    displayMessage("This isnt what we need");
+  } else {
+    console.log("Ooops!", msg.page);
+  }
+}
+
+function updateInspectorJSON(msg) {
     if(!inspector) {
         var inspector = new InspectorJSON({
           element: 'pagecontext',
@@ -14,3 +31,8 @@ function sendJsonToInspector(msg) {
     }
     inspector.view(msg);
 }
+
+function displayMessage(msg) {
+  document.querySelector('#messageholder').innerHTML = msg;
+  console.log("Updated Panel With Message", msg);
+}
