Add Toast Notification on warnings or errors.

chromelogger-options.js

@@ -5,6 +5,9 @@
     var defaults = {
         show_upgrade_messages: true,
         show_line_numbers: false,
+        toast_warnings: false,
+        toast_errors: false,
+        max_toast_count: 4,
         color1: "#888",
         color2: "#0563ad"
     };
@@ -29,10 +32,10 @@
 
         getInputs().forEach(function(input) {
             if (input.type == 'text') {
-                localStorage[input.name] = _getColorFromValue(input.value);
-                return;
+                localStorage[input.name] = input.id !== 'max_toast_count' ? _getColorFromValue(input.value) : input.value;
+            } else {
+                localStorage[input.name] = input.checked;
             }
-            localStorage[input.name] = input.checked;
         });
 
         showMessage('your settings have been saved');
@@ -52,9 +55,11 @@
     }
 
     function _setInputValue(input, value) {
-        input.value = value.indexOf('#') === 0 ? value.substring(1) : value;
-
-        input.parentNode.querySelector('.swatch').style.background = _getColorFromValue(value);
+        input.value = (typeof value === 'string' && value.indexOf('#') === 0) ? value.substring(1) : value;
+        var swatch = input.parentNode.querySelector('.swatch');
+        if (swatch) {
+            swatch.style.background = _getColorFromValue(value);
+        }
     }
 
     function restoreDefaults(e) {

chromelogger.js

@@ -130,13 +130,24 @@
         }, {urls: ["<all_urls>"]}, ["responseHeaders"]);
 
         chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
-            if (request === "localStorage") {
+            if (request.type === "localStorage") {
                 return sendResponse(localStorage);
             }
 
-            if (request === "isActive") {
+            if (request.type === "isActive") {
                 return sendResponse(active);
             }
+            if (request.type == 'toast') {
+                var notification = webkitNotifications.createNotification(
+                    'icon48.png',  // icon url - can be relative
+                    request.toastType,  // notification title
+                    request.message
+                );
+
+                // Then show the notification.
+                notification.show();
+            }
+
         });
     }
 

log.js

@@ -18,6 +18,7 @@
     var local_storage = null;
     var color1 = '#888';
     var color2 = '#0563ad';
+    var toastCount = 0;
 
     var ALLOWED_TYPES = {
         'group': 1,
@@ -49,10 +50,38 @@
         return local_storage.show_line_numbers === "true";
     }
 
+
+    function _toastWarnings()
+    {
+        return local_storage.toast_warnings === "true";
+    }
+
+    function _toastErrors()
+    {
+        return local_storage.toast_errors === "true";
+    }
+
+    function _maxToastCount()
+    {
+        return parseInt(local_storage.max_toast_count);
+    }
+
+    function _toast(type, logs) {
+
+        if (toastCount++ < _maxToastCount()) {
+            var message = logs[logs.length - 1].message;
+            if (message.length > 100) {
+                message = message.substr(0,100) + '...';
+            }
+            chrome.extension.sendMessage({type: 'toast', toastType: type, message: message});
+        }
+    }
+
     /**
      * logs nicely formatted data in new format
      *
-     * @param Object
+     * @param data Object
+     * @param callback function
      * @return void
      */
     function _logData(data, callback)
@@ -61,12 +90,14 @@
         var column_name;
 
         for (var key in data.columns) {
-            column_name = data.columns[key];
-            column_map[column_name] = key;
+            if (data.columns.hasOwnProperty(key)) {
+                column_name = data.columns[key];
+                column_map[column_name] = key;
+            }
         }
 
         var rows = data.rows,
-            i = 0,
+            i,
             length = rows.length;
 
         for (i = 0; i < length; i++) {
@@ -80,6 +111,8 @@
                 console.log('%c' + backtrace, 'color: ' + color1 + '; font-weight: bold;');
             }
 
+
+
             // new version without label
             var new_version = false;
             if (data.columns.indexOf('label') === -1) {
@@ -107,6 +140,7 @@
                 current_log = log[j];
                 last_log = logs[logs.length - 1];
 
+
                 if (current_log && typeof current_log === 'object' && current_log['___class_name']) {
                     new_string = '%c' + current_log['___class_name'];
 
@@ -117,7 +151,6 @@
                         logs[logs.length - 1] = last_log + ' ' + new_string;
                     }
                     else {
-
                         // otherwise just push the new string to the end of the list
                         logs.push(new_string);
                     }
@@ -134,13 +167,19 @@
             }
 
             console[type].apply(console, logs);
+            if (type == 'warn' && _toastWarnings()) {
+                _toast('Warning', logs)
+            } else if (type == 'error' && _toastErrors()) {
+                _toast('Error', logs)
+            }
         }
 
         if (typeof callback === 'function') {
             callback();
         }
     }
 
+
     function _processQueue(callback)
     {
         for (var i = 0; i < queue.length; ++i) {
@@ -154,7 +193,7 @@
     /**
      * converts a string to json
      *
-     * @param string cookie
+     * @param json_string string
      * @return Object
      */
     function _jsonDecode(json_string)
@@ -218,7 +257,7 @@
     }
 
     function _initStorage() {
-        chrome.extension.sendMessage("localStorage", function(response) {
+        chrome.extension.sendMessage({type: "localStorage"}, function(response) {
             local_storage = response;
             color1 = 'color1' in local_storage ? local_storage['color1'] : color1;
             color2 = 'color2' in local_storage ? local_storage['color2'] : color2;
@@ -228,7 +267,7 @@
 
     function _init() {
         _listenForLogMessages();
-        chrome.extension.sendMessage("isActive", function(response) {
+        chrome.extension.sendMessage({type: "isActive"}, function(response) {
             if (response === false) {
                 return _stopListening();
             }

manifest.json

@@ -27,8 +27,12 @@
     "permissions":
     [
         "webRequest",
+        "notifications",
         "tabs",
         "http://*/*",
         "https://*/*"
+    ],
+    "web_accessible_resources": [
+        "icon48.png"
     ]
 }

options.html

@@ -105,6 +105,21 @@ <h1>Chrome Logger Options</h1>
             </label>
             <p class="info">show upgrade messages when your server side library is out of date</p>
 
+
+            <label>
+                warnings:
+                <input type="checkbox" id="toast_warnings" name="toast_warnings">
+                errors:
+                <input type="checkbox" id="toast_errors" name="toast_errors">
+            </label>
+            <p class="info">show alerts for </p>
+
+            <label>
+                max alerts:
+                <input type="text" id="max_toast_count" name="max_toast_count">
+            </label>
+            <p class="info">max alerts per page </p>
+
             <label>
                 color 1:
                 <input type="text" name="color1" value=""> <span class="swatch"></span>