First attempt at browserify and aw-client-js

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "media"]
 	path = media
 	url = https://github.com/ActivityWatch/media.git
+[submodule "aw-client-js"]
+	path = aw-client-js
+	url = git@github.com:ActivityWatch/aw-client-js.git

Makefile

@@ -1,5 +1,13 @@
-.PHONY: build
+.PHONY: build install
+
+install:
+	npm install
+	(cd aw-client-js; npm install; npm run compile)
+
+update:
+	npm run build
 
 # This is what Google and Mozilla wants us to upload when we release a new version to the Addon "store"
-build:
-	zip -r -FS ./aw-watcher-web.zip manifest.json app/ media/
+build: install
+	npm run build
+	zip -r -FS ./aw-watcher-web.zip manifest.json static/ out/ media/

manifest.json

@@ -11,7 +11,7 @@
 
   "browser_action": {
     "default_icon": "media/logo/logo.png",
-    "default_popup": "app/popup.html"
+    "default_popup": "static/popup.html"
   },
 
   "applications": {
@@ -22,8 +22,7 @@
 
   "background": {
     "scripts": [
-        "app/client.js",
-        "app/eventPage.js"
+        "out/app.js"
     ],
     "persistent": false
   },

package.json

@@ -0,0 +1,8 @@
+{
+    "dependencies": {
+        "browserify": "^16.2.2"
+    },
+    "scripts": {
+        "build": "browserify src/*.js > out/app.js"
+    }
+}

src/client.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var AWClient = require("../aw-client-js/out/aw-client.js").AWClient;
+
+
+var client = {
+  testing: null,
+  awc: null,
+  lastSyncSuccess: true,
+
+  setup: function() {
+    console.log("Setting up client");
+    // Check if in dev mode
+    chrome.management.getSelf(function(info) {
+      console.log(info);
+      client.testing = info.installType === "development";
+      console.log("testing: " + client.testing);
+
+      client.awc = new AWClient("aw-client-web", client.testing);
+      client.createBucket();
+
+      // Needed in order to show testing information in popup
+      chrome.storage.local.set({"testing": client.testing});
+    });
+  },
+
+  getBucketId: function() {
+    // TODO: This works for Chrome and Firefox, but is a bit hacky and wont work in the general case
+    var browserName = /(Chrome|Firefox)\/([0-9.]+)/.exec(navigator.userAgent)[1];
+    return "aw-watcher-web-" + browserName.toLowerCase();
+  },
+
+  createBucket: function(){
+    if (this.testing === null)
+      return;
+    // TODO: We might want to get the hostname somehow, maybe like this:
+    // https://stackoverflow.com/questions/28223087/how-can-i-allow-firefox-or-chrome-to-read-a-pcs-hostname-or-other-assignable
+    var bucket_id = this.getBucketId();
+    var eventtype = "web.tab.current";
+    var hostname = "unknown";
+
+    client.awc.createBucket(bucket_id, eventtype, hostname)
+      .catch( (err) => {
+        console.error("Failed to create bucket ("+err.response.status+"): "+err.response.data.message);
+      }
+    );
+  },
+
+  sendHeartbeat: function(timestamp, data, pulsetime) {
+    if (this.testing === null)
+      return;
+
+    var payload = {"data": data, "timestamp": timestamp.toISOString()};
+    this.awc.heartbeat(this.getBucketId(), pulsetime, payload).then(
+      (res) => {
+        client.lastSyncSuccess = true;
+        chrome.storage.local.set({"lastSync": new Date().toISOString()});
+      }, (err) => {
+        if(client.lastSyncSuccess) {
+          chrome.notifications.create({
+            "type": "basic",
+            "iconUrl": chrome.extension.getURL("media/logo/logo.png"),
+            "title": "Unable to send event to server",
+            "message": "Please ensure that ActivityWatch is running",
+          });
+          client.lastSyncSuccess = false;
+        }
+        console.error("Status code: " + err.response.status + ", response: " + err.response.data.message);
+      }
+    );
+  }
+};
+
+module.exports = client;

app/eventPage.js → src/eventPage.js

@@ -3,6 +3,7 @@
  * https://developer.chrome.com/extensions/event_pages
  */
 
+var client = require("./client.js")
 
 "use strict";
 

app/popup_files/popup.js → src/popup.js

@@ -1,5 +1,7 @@
 "use strict";
 
+const client = require("./client.js");
+
 function getCurrentTabs(callback) {
   // Query filter to be passed to chrome.tabs.query - see
   // https://developer.chrome.com/extensions/tabs#method-query
@@ -37,7 +39,7 @@ function renderStatus() {
     "</tr>";
     msg += "</table>";
     document.getElementById('status').innerHTML = msg;
-    document.getElementById('webui-link').href = client._getHost();
+    document.getElementById('webui-link').href = client.awc.baseURL;
   });
 }
 

app/popup.html → static/popup.html

@@ -4,10 +4,9 @@
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>ActivityWatch Popup</title>
 
-  <link href="./popup_files/style.css" rel="stylesheet" type="text/css">
+  <link href="./style.css" rel="stylesheet" type="text/css">
 
-  <script src="./client.js"></script>
-  <script src="./popup_files/popup.js"></script>
+  <script src="/out/app.js"></script>
 </head>
 
 <body>