feat: add automatic & manual hostname configuration (#158)

* Add generic settings button in popup

.. and remove the browser edit button

* Automatically detect and use hostname

.. so that the bucket has the right host name.

Resolves: #132

* Add manual hostname configuration

* Display the settings below each other

* Display hostname in the popup status

* Handle undefined hostname

* Lint

* Enhance hostname detection with detailed logging and error handling

---------

Co-authored-by: Christian Weiske <[email protected]>

Author: BelKed

src/background/client.ts

@@ -3,18 +3,22 @@ import config from '../config'
 import { AWClient, IEvent } from 'aw-client'
 import retry from 'p-retry'
 import { emitNotification, getBrowser, logHttpError } from './helpers'
-import { getSyncStatus, setSyncStatus } from '../storage'
+import { getHostname, getSyncStatus, setSyncStatus } from '../storage'
 
 export const getClient = () =>
   new AWClient('aw-client-web', { testing: config.isDevelopment })
 
 // 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
-export function ensureBucket(client: AWClient, bucketId: string) {
+export function ensureBucket(
+  client: AWClient,
+  bucketId: string,
+  hostname: string,
+) {
   return retry(
     () =>
       client
-        .ensureBucket(bucketId, 'web.tab.current', 'unknown')
+        .ensureBucket(bucketId, 'web.tab.current', hostname)
         .catch((err) => {
           console.error('Failed to create bucket, retrying...')
           logHttpError(err)
@@ -24,13 +28,41 @@ export function ensureBucket(client: AWClient, bucketId: string) {
   )
 }
 
+export async function detectHostname(client: AWClient) {
+  console.debug('Attempting to detect hostname from server...')
+  return retry(
+    () => {
+      console.debug('Making request to server for hostname...')
+      return client.getInfo()
+    },
+    {
+      retries: 3,
+      onFailedAttempt: (error) => {
+        console.warn(
+          `Failed to detect hostname (attempt ${error.attemptNumber}/${error.retriesLeft + error.attemptNumber}):`,
+          error.message,
+        )
+      },
+    },
+  )
+    .then((info) => {
+      console.info('Successfully detected hostname:', info.hostname)
+      return info.hostname
+    })
+    .catch((err) => {
+      console.error('All attempts to detect hostname failed:', err)
+      return undefined
+    })
+}
+
 export async function sendHeartbeat(
   client: AWClient,
   bucketId: string,
   timestamp: Date,
   data: IEvent['data'],
   pulsetime: number,
 ) {
+  const hostname = (await getHostname()) ?? 'unknown'
   const syncStatus = await getSyncStatus()
   return retry(
     () =>
@@ -41,7 +73,8 @@ export async function sendHeartbeat(
       }),
     {
       retries: 3,
-      onFailedAttempt: () => ensureBucket(client, bucketId).then(() => {}),
+      onFailedAttempt: () =>
+        ensureBucket(client, bucketId, hostname).then(() => {}),
     },
   )
     .then(() => {
@@ -67,5 +100,10 @@ export async function sendHeartbeat(
 
 export const getBucketId = async (): Promise<string> => {
   const browser = await getBrowser()
-  return `aw-watcher-web-${browser}`
+  const hostname = await getHostname()
+  if (hostname !== undefined) {
+    return `aw-watcher-web-${browser}_${hostname}`
+  } else {
+    return `aw-watcher-web-${browser}`
+  }
 }

src/background/main.ts

@@ -5,12 +5,14 @@ import {
   sendInitialHeartbeat,
   tabActivatedListener,
 } from './heartbeat'
-import { getClient } from './client'
+import { getClient, detectHostname } from './client'
 import {
   getConsentStatus,
+  getHostname,
   setBaseUrl,
   setConsentStatus,
   setEnabled,
+  setHostname,
   waitForEnabled,
 } from '../storage'
 
@@ -22,6 +24,22 @@ async function getIsConsentRequired() {
     .catch(() => true)
 }
 
+async function autodetectHostname() {
+  const hostname = await getHostname()
+  if (hostname === undefined) {
+    const detectedHostname = await detectHostname(client)
+    if (detectedHostname !== undefined) {
+      setHostname(detectedHostname)
+    }
+  }
+}
+
+/** Init */
+console.info('Starting...')
+
+console.debug('Creating client')
+const client = getClient()
+
 browser.runtime.onInstalled.addListener(async () => {
   const { consent } = await getConsentStatus()
   const isConsentRequired = await getIsConsentRequired()
@@ -38,13 +56,9 @@ browser.runtime.onInstalled.addListener(async () => {
       url: browser.runtime.getURL('src/consent/index.html'),
     })
   }
-})
-
-/** Init */
-console.info('Starting...')
 
-console.debug('Creating client')
-const client = getClient()
+  await autodetectHostname()
+})
 
 console.debug('Creating alarms and tab listeners')
 browser.alarms.create(config.heartbeat.alarmName, {

src/popup/index.html

@@ -28,6 +28,11 @@
           <b>Visit forum</b>
         </span>
       </a>
+      <a id="settings-btn" href="#" title="Settings">
+        <span class="button">
+          <b>⚙</b>
+        </span>
+      </a>
     </div>
 
     <table>
@@ -63,7 +68,15 @@
           <code id="status-browser">
             <!-- Filled by JS -->
           </code>
-          <button id="edit-btn">✎</button>
+        </td>
+      </tr>
+
+      <tr>
+        <th align="right">Hostname:</th>
+        <td>
+          <code id="status-hostname">
+            <!-- Filled by JS -->
+          </code>
         </td>
       </tr>
     </table>

src/popup/main.ts

@@ -9,6 +9,7 @@ import {
   watchSyncDate,
   watchSyncSuccess,
   getBrowserName,
+  getHostname,
 } from '../storage'
 
 function setConnected(connected: boolean | undefined) {
@@ -33,6 +34,7 @@ async function renderStatus() {
   const syncStatus = await getSyncStatus()
   const consentStatus = await getConsentStatus()
   const browserName = await getBrowserName()
+  const hostname = await getHostname()
 
   // Enabled checkbox
   const enabledCheckbox = document.getElementById('status-enabled-checkbox')
@@ -75,10 +77,17 @@ async function renderStatus() {
     throw Error('Web UI link is not an anchor')
   webuiLink.href = baseUrl ?? '#'
 
+  // Browser name
   const browserNameElement = document.getElementById('status-browser')
   if (!(browserNameElement instanceof HTMLElement))
     throw Error('Browser name element is not defined')
   browserNameElement.innerText = browserName
+
+  // Hostname
+  const hostnameElement = document.getElementById('status-hostname')
+  if (!(hostnameElement instanceof HTMLElement))
+    throw Error('Hostname element is not defined')
+  hostnameElement.innerText = hostname
 }
 
 function domListeners() {
@@ -98,10 +107,10 @@ function domListeners() {
     })
   })
 
-  const browserButton = document.getElementById('edit-btn')
-  if (!(browserButton instanceof HTMLButtonElement))
-    throw Error('Edit button is not a button')
-  browserButton.addEventListener('click', () => {
+  const settingsButton = document.getElementById('settings-btn')
+  if (!(settingsButton instanceof HTMLAnchorElement))
+    throw Error('Settings button is not a link')
+  settingsButton.addEventListener('click', () => {
     browser.runtime.openOptionsPage()
   })
 }

src/settings/index.html

@@ -8,33 +8,51 @@
 
   <body>
     <form>
-      <label for="browser">
-        <strong>Browser:</strong>
-      </label>
+      <div>
+        <label for="browser">
+          <strong>Browser:</strong>
+        </label>
 
-      <select id="browser" name="browser">
-        <option value="chrome">Chrome</option>
-        <option value="firefox">Firefox</option>
-        <option value="opera">Opera</option>
-        <option value="brave">Brave</option>
-        <option value="edge">Edge</option>
-        <option value="arc">Arc</option>
-        <option value="vivaldi">Vivaldi</option>
-        <option value="orion">Orion</option>
-        <option value="yandex">Yandex</option>
-        <option value="zen">Zen</option>
-        <option value="other">Other...</option>
-      </select>
+        <select id="browser" name="browser">
+          <option value="chrome">Chrome</option>
+          <option value="firefox">Firefox</option>
+          <option value="opera">Opera</option>
+          <option value="brave">Brave</option>
+          <option value="edge">Edge</option>
+          <option value="arc">Arc</option>
+          <option value="vivaldi">Vivaldi</option>
+          <option value="orion">Orion</option>
+          <option value="yandex">Yandex</option>
+          <option value="zen">Zen</option>
+          <option value="other">Other...</option>
+        </select>
 
-      <input
-        type="text"
-        id="customBrowser"
-        name="customBrowser"
-        pattern="[a-z]*"
-        placeholder="Custom browser name"
-      />
+        <input
+          type="text"
+          id="customBrowser"
+          name="customBrowser"
+          pattern="[a-z]*"
+          placeholder="Custom browser name"
+        />
+      </div>
 
-      <button type="submit" class="accept">Save</button>
+      <div>
+        <label for="hostname">
+          <strong>Hostname:</strong>
+        </label>
+
+        <input
+          type="text"
+          id="hostname"
+          name="hostname"
+          pattern="[a-zA-Z0-9_.\-]*"
+          required
+        />
+      </div>
+
+      <div>
+        <button type="submit">Save</button>
+      </div>
     </form>
 
     <script type="module" src="./main.ts"></script>

src/settings/main.ts

@@ -1,5 +1,10 @@
 import browser from 'webextension-polyfill'
-import { getBrowserName, setBrowserName } from '../storage'
+import {
+  getBrowserName,
+  setBrowserName,
+  getHostname,
+  setHostname,
+} from '../storage'
 
 interface HTMLElementEvent<T extends HTMLElement> extends Event {
   target: T
@@ -22,6 +27,9 @@ async function saveOptions(e: SubmitEvent): Promise<void> {
     selectedBrowser = customBrowserInput.value.toLowerCase()
   }
 
+  const hostnameInput = document.querySelector<HTMLInputElement>('#hostname')
+  let hostname = hostnameInput.value
+
   const form = e.target as HTMLFormElement
   const button = form.querySelector<HTMLButtonElement>('button')
   if (!button) return
@@ -31,6 +39,7 @@ async function saveOptions(e: SubmitEvent): Promise<void> {
 
   try {
     await setBrowserName(selectedBrowser)
+    await setHostname(hostname)
     await reloadExtension()
     button.textContent = 'Save'
     button.classList.add('accept')
@@ -74,6 +83,12 @@ async function restoreOptions(): Promise<void> {
       customInput.style.display = 'none'
       customInput.required = false
     }
+
+    const hostname = await getHostname()
+    const hostnameInput = document.querySelector<HTMLInputElement>('#hostname')
+    if (hostname !== undefined) {
+      hostnameInput.value = hostname
+    }
   } catch (error) {
     console.error('Failed to restore options:', error)
   }

src/settings/style.css

@@ -2,13 +2,17 @@ body {
   font-family: 'Segoe UI', 'Lucida Grande', Tahoma, sans-serif;
 }
 
-form {
+form div {
   display: flex;
   gap: 10px;
   align-items: center;
   margin: 0.5em;
 }
 
+input:invalid {
+  border-color: red;
+}
+
 #customBrowser {
   display: none;
 }

src/storage.ts

@@ -90,3 +90,9 @@ export const getBrowserName = (): Promise<BrowserName | undefined> =>
   browser.storage.local.get('browserName').then((_) => _.browserName)
 export const setBrowserName = (browserName: BrowserName) =>
   browser.storage.local.set({ browserName })
+
+type Hostname = string
+export const getHostname = (): Promise<Hostname | undefined> =>
+  browser.storage.local.get('hostname').then((_) => _.hostname)
+export const setHostname = (hostname: Hostname) =>
+  browser.storage.local.set({ hostname })