A new structure and better content script organization

build/content-kuker.js

@@ -0,0 +1,81 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+'use strict';
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+/* eslint-disable no-undef, vars-on-top */
+var DEBUG = false;
+var isFirstMessage = true;
+var messages = [];
+var requestAnimationFrameRequest = null;
+
+function log(what, data) {
+  if (!DEBUG) return;
+  console.log(what, data);
+}
+function getOrigin() {
+  if (typeof location !== 'undefined' && location.protocol && location.host) {
+    return location.protocol + '//' + location.host;
+  }
+  return '';
+}
+function sendEvents(messagesToSend) {
+  var messagesCount = messagesToSend.length;
+
+  log('sendEvents ' + messagesCount, messagesToSend);
+  try {
+    chrome.runtime.sendMessage(messagesToSend, function (response) {
+      log('response=' + response);
+    });
+  } catch (error) {
+    log('Error:', error);
+  }
+}
+function enhanceEvent(message) {
+  return _extends({
+    kuker: true,
+    time: new Date().getTime(),
+    origin: getOrigin()
+  }, message);
+}
+
+// From DevTools to content script
+chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
+  log('-> DevTools', message);
+  if (message && message.type) {
+    switch (message.type) {
+      case 'console.log':
+        console.log.apply(console, message.data);
+        break;
+      case 'get-page-url':
+        sendResponse(getOrigin());
+        break;
+    }
+  }
+});
+
+// From page/content script to DevTools
+window.addEventListener('message', function (event) {
+  var message = event.data;
+
+  log('-> Page', message);
+
+  if (typeof message.kuker === 'undefined') return;
+  if (isFirstMessage) {
+    messages.push(enhanceEvent({ type: 'NEW_SESSION' }));
+    isFirstMessage = false;
+  }
+  messages.push(message);
+
+  log('-> current messages', messages.length);
+
+  cancelAnimationFrame(requestAnimationFrameRequest);
+  requestAnimationFrameRequest = window.requestAnimationFrame(function () {
+    sendEvents([].concat(_toConsumableArray(messages)));
+    messages = [];
+  });
+});
+
+},{}]},{},[1]);

lib/css/styles.css → build/css/styles.css

@@ -4,7 +4,7 @@ body, html {
 	margin: 0;
 	padding: 0;
 	font-family: 'Roboto', sans-serif;
-	font-size: 14px;
+	font-size: 14px; dd
 }
 p {
   margin-top: 0;
@@ -428,7 +428,7 @@ p {
   max-width: 200px;
   opacity: 0.4;
 }
-.noEvents p {
+.noEvents .text {
   float: left;
   padding: 1.6em 2em 0 0;
 }

lib/index.html → build/index.html

@@ -11,6 +11,6 @@
     <div id="container" style="height: 100%;"></div>
     <script src="./vendor/mousetrap.js"></script>
     <script src="./vendor/socket.io.js"></script>
-    <script src="./app.js"></script>
+    <script src="./kuker-ui.js"></script>
   </body>
 </html>