Allow manually configuring the hostname

Without any obvious ability for the extension to determine the machine's
hostname automatically, the best available option seems to be to allow
users to configure it manually. A field is added to the extension popup
to configure the hostname.

The field is blank by default, and the updates were designed to ensure
that the behaviour if the hostname is not set will be unchanged (so
people using workflows that expect browser data in the "unknown" host
bucket won't see anything break; they can set the hostname once they're
prepared to do so).

Fixes #132

src/client.js

@@ -37,25 +37,33 @@ var client = {
   awc: null,
   lastSyncSuccess: true,
   browserName: null,
+  hostname: "",
 
   setup: function() {
-    console.log("Setting up client");
-    client.browserName = getBrowserName();
-    // Check if in dev mode
-    chrome.management.getSelf(function(info) {
-      client.testing = info.installType === "development";
-      console.log("testing: " + client.testing);
-
-      client.awc = new AWClient("aw-client-web", {testing: client.testing});
-      client.createBucket();
-
-      // Needed in order to show testing information in popup
-      chrome.storage.local.set({"testing": client.testing, "baseURL": client.awc.baseURL});
+    chrome.storage.local.get(["hostname"], (obj) => {
+      console.log("Setting up client");
+      client.browserName = getBrowserName();
+      // TODO: We might want to get the hostname automatically somehow, maybe like this:
+      // https://stackoverflow.com/questions/28223087/how-can-i-allow-firefox-or-chrome-to-read-a-pcs-hostname-or-other-assignable
+      client.hostname = obj.hostname || "";
+      // Check if in dev mode
+      chrome.management.getSelf(function(info) {
+        client.testing = info.installType === "development";
+        console.log("testing: " + client.testing);
+
+        client.awc = new AWClient("aw-client-web", {testing: client.testing});
+        client.createBucket();
+
+        // Needed in order to show testing information in popup
+        chrome.storage.local.set({"testing": client.testing, "baseURL": client.awc.baseURL});
+      });
     });
   },
 
   getBucketId: function () {
-    return "aw-watcher-web-" + client.browserName.toLowerCase();
+    if (client.hostname != "")
+      return `aw-watcher-web-${client.browserName.toLowerCase()}_${client.hostname}`;
+    return `aw-watcher-web-${client.browserName.toLowerCase()}`;
   },
 
   updateSyncStatus: function(){
@@ -68,11 +76,11 @@ var client = {
   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";
+    var hostname = client.hostname || "";
+    if (hostname == "")
+      hostname = "unknown";
 
     function attempt() {
       return client.awc.ensureBucket(bucket_id, eventtype, hostname)

static/popup.html

@@ -51,12 +51,22 @@
       </td>
     </tr>
 
-    <tr align="right">
-      <th>Last sync:</th>
+    <tr>
+      <th align="right">Last sync:</th>
       <td id="status-last-sync">
         <!-- Filled by JS -->
       </td>
     </tr>
+
+    <tr>
+      <th align="right">Hostname:</th>
+      <td>
+        <input id="hostname-textbox">
+          <!-- Filled by JS -->
+        </input>
+        <button id="hostname-save-button">Save</button>
+      </td>
+    </tr>
   </table>
 
   <hr>

static/popup.js

@@ -1,7 +1,7 @@
 "use strict";
 
 function renderStatus() {
-  chrome.storage.local.get(["lastSync", "lastSyncSuccess", "testing", "baseURL", "enabled"], function(obj) {
+  chrome.storage.local.get(["lastSync", "lastSyncSuccess", "testing", "baseURL", "enabled", "hostname"], function(obj) {
     // Enabled checkbox
     let enabledCheckbox = document.getElementById('status-enabled-checkbox');
     enabledCheckbox.checked = obj.enabled;
@@ -37,6 +37,10 @@ function renderStatus() {
     let lastSyncString = obj.lastSync ? new Date(obj.lastSync).toLocaleString() : "never";
     document.getElementById('status-last-sync').innerHTML = lastSyncString;
 
+    // Hostname
+    let hostnameTextbox = document.getElementById('hostname-textbox');
+    hostnameTextbox.value = obj.hostname || "";
+
     // Set webUI button link
     document.getElementById('webui-link').href = obj.baseURL;
   });
@@ -53,6 +57,17 @@ function domListeners() {
     const url = chrome.runtime.getURL("../static/consent.html");
     chrome.windows.create({ url, type: "popup", height: 550, width: 416, });
   });
+  let hostnameTextbox = document.getElementById('hostname-textbox');
+  let hostnameSaveButton = document.getElementById('hostname-save-button');
+  hostnameSaveButton.addEventListener("click", () => {
+    chrome.storage.local.set({ hostname: hostnameTextbox.value });
+    // Need to restart the extension to update the bucket name
+    let enabled = enabled_checkbox.checked;
+    if (enabled) {
+      chrome.runtime.sendMessage({enabled: false});
+      chrome.runtime.sendMessage({enabled: true});
+    }
+  });
 }
 
 document.addEventListener('DOMContentLoaded', function() {