initial commit

.gitignore

@@ -0,0 +1,2 @@
+bower_components/
+web-ext-artifacts/

README.md

@@ -1,2 +1,8 @@
 # ezpaarse-logger-extension
-Companion extension for ezPAARSE logger
+Companion extension for [ezPAARSE logger](https://github.com/ezpaarse-project/ezpaarse-logger).
+
+Installation
+===
+
+- Google Chrome: get it from the [WebStore](https://chrome.google.com/webstore/detail/ezpaarse-logger-extension/cpjllnfdfhkmbkplldfndmfdbabcbidc)
+- Firefox: coming very soon!

src/.web-extension-id

@@ -0,0 +1,3 @@
+# This file was created by https://github.com/mozilla/web-ext
+# Your auto-generated extension ID for addons.mozilla.org is:
+{9378b220-059c-434c-ad26-03043ecd7a09}

src/background.js

@@ -0,0 +1,86 @@
+const ports = new Set();
+const tabs  = new Set();
+
+const icons = {
+  enabled: {
+    16: 'img/ezlogger-16.png',
+    48: 'img/ezlogger-48.png',
+    128: 'img/ezlogger-128.png'
+  },
+  disabled: {
+    16: 'img/ezlogger-disabled-16.png',
+    48: 'img/ezlogger-disabled-48.png',
+    128: 'img/ezlogger-disabled-128.png'
+  }
+};
+
+// long-lived connection
+chrome.runtime.onConnect.addListener(port => {
+  if (port.name !== 'ezpaarse-logger') { return; }
+
+  const tabId = port.sender && port.sender.tab && port.sender.tab.id;
+
+  ports.add(port);
+  if (tabId) { tabs.add(tabId); }
+
+  port.onDisconnect.addListener(() => {
+    ports.delete(port);
+    if (tabId) { tabs.delete(tabId); }
+  });
+});
+
+chrome.storage.local.get('activated', item => {
+  const activated = item && item.activated;
+  setActivated(activated === undefined ? true : activated);
+});
+
+chrome.runtime.onMessage.addListener(request => {
+  if (request.getState) {
+    sendState();
+  } else if (request.setState) {
+    setActivated(request.setState.activated);
+  }
+});
+
+/**
+ * Enable or disable the extension by adding/removing the network listener
+ * @param {Boolean} activated
+ */
+function setActivated(activated) {
+  activated = !!activated;
+
+  chrome.browserAction.setIcon({ path: activated ? icons.enabled : icons.disabled });
+
+  if (!activated) {
+    chrome.webRequest.onCompleted.removeListener(networkListener);
+  } else if (!isActivated()) {
+    chrome.webRequest.onCompleted.addListener(networkListener, { urls: ['*://*/*'] }, ['responseHeaders']);
+  }
+
+  chrome.storage.local.set({ activated: activated });
+  sendState();
+}
+
+/**
+ * Notify the popup about the current state
+ */
+function sendState() {
+  chrome.runtime.sendMessage({ stateChange: { activated: isActivated() } });
+}
+
+/**
+ * Check whether the network is being listened or not
+ * @return {Boolean}
+ */
+function isActivated() {
+  return chrome.webRequest.onCompleted.hasListener(networkListener);
+}
+
+/**
+ * Network listener, send request details to the web app
+ * @param  {Object} details  request details
+ */
+function networkListener(details) {
+  if (tabs.has(details.tabId)) { return; }
+  ports.forEach(port => port.postMessage(JSON.stringify(details)));
+}

src/content_script.js

@@ -0,0 +1,5 @@
+const port = chrome.runtime.connect({ name: 'ezpaarse-logger' });
+
+port.onMessage.addListener(info => {
+  document.dispatchEvent(new CustomEvent('ezlogger-request', { detail: info }));
+});

src/manifest.json

@@ -0,0 +1,34 @@
+{
+  "name": "ezPAARSE Logger (Extension)",
+  "version": "2.2.1",
+  "description": "Capture the web traffic and send it to the logger application",
+  "manifest_version": 2,
+  "background": {
+    "scripts": ["background.js"],
+    "persistent": true
+  },
+  "browser_action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "img/ezlogger-16.png",
+      "48": "img/ezlogger-48.png",
+      "128": "img/ezlogger-128.png"
+    }
+  },
+  "permissions": [
+    "<all_urls>",
+    "webRequest",
+    "storage"
+  ],
+  "content_scripts": [
+    {
+      "matches": ["*://analogist.couperin.org/ezlogger/*", "*://localhost/*"],
+      "js": ["content_script.js"]
+    }
+  ],
+  "icons": {
+    "16": "img/ezlogger-16.png",
+    "48": "img/ezlogger-48.png",
+    "128": "img/ezlogger-128.png"
+  }
+}

src/popup.css

@@ -0,0 +1,44 @@
+body {
+  font-family: "Segoe UI", Arial, sans-serif;
+  min-width: 250px;
+  margin: 0px;
+  font-size: 14px;
+  color: #545454;
+  background-color: #f8f6f2;
+}
+p {
+  padding: 5px;
+  text-align: justify;
+}
+.flex {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+.button:hover {
+  box-shadow: 0px 1px 4px 0px #929292;
+}
+.button {
+  color: #FFFFFF;
+  background: #333030;
+  margin: 5px;
+  padding: 8px 12px;
+  cursor: pointer;
+  text-align: center;
+  white-space: nowrap;
+  text-transform: capitalize;
+  text-decoration: none;
+  font-size: inherit;
+  border: 0 none;
+  border-radius: 4px;
+  transition: box-shadow 200ms;
+}
+.button.toggled-off {
+  color: #8e8e8e;
+  background-color: #d0d0d0;
+}
+#wrapper .toggled-on, #wrapper .toggled-off { display: none; }
+#wrapper.disabled .toggled-on { display: none; }
+#wrapper.disabled .toggled-off { display: block; }
+#wrapper.enabled .toggled-on { display: block; }
+#wrapper.enabled .toggled-off { display: none; }

src/popup.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" type="text/css" href="popup.css">
+</head>
+<body>
+  <div id="wrapper">
+    <div class="flex">
+      <button class="button toggled-on" id="toggler-off" role="button">&#10003; Enabled</button>
+      <button class="button toggled-off" id="toggler-on" role="button">&#10007; Disabled</button>
+      <a class="button" href="http://analogist.couperin.org/ezlogger/" target="_blank">Open app</a>
+    </div>
+
+    <p class="toggled-off">The extension is disabled.</p>
+    <p class="toggled-on">Your web traffic is being captured, open the webapp to analyze it.</p>
+  </div>
+
+  <script src="popup.js"></script>
+</body>
+</html>

src/popup.js

@@ -0,0 +1,23 @@
+
+const wrapper = document.getElementById('wrapper');
+
+document.getElementById('toggler-on').addEventListener('click', () => setActivated(true));
+document.getElementById('toggler-off').addEventListener('click', () => setActivated(false));
+
+chrome.runtime.sendMessage({ getState: true });
+
+chrome.runtime.onMessage.addListener(request => {
+  if (!request.stateChange) { return; }
+
+  if (request.stateChange.activated) {
+    wrapper.classList.remove('disabled');
+    wrapper.classList.add('enabled');
+  } else {
+    wrapper.classList.remove('enabled');
+    wrapper.classList.add('disabled');
+  }
+});
+
+function setActivated(bool) {
+  chrome.runtime.sendMessage({ setState: { activated: bool } });
+}