fix: handle undefined values for browser name and hostname in UI (#162)

* fix: handle undefined values for browser name and hostname in UI

* Lint

Author: BelKed

src/popup/main.ts

@@ -81,13 +81,13 @@ async function renderStatus() {
   const browserNameElement = document.getElementById('status-browser')
   if (!(browserNameElement instanceof HTMLElement))
     throw Error('Browser name element is not defined')
-  browserNameElement.innerText = browserName
+  browserNameElement.innerText = browserName ?? 'unknown'
 
   // Hostname
   const hostnameElement = document.getElementById('status-hostname')
   if (!(hostnameElement instanceof HTMLElement))
     throw Error('Hostname element is not defined')
-  hostnameElement.innerText = hostname
+  hostnameElement.innerText = hostname ?? 'unknown'
 }
 
 function domListeners() {

src/settings/main.ts

@@ -6,10 +6,6 @@ import {
   setHostname,
 } from '../storage'
 
-interface HTMLElementEvent<T extends HTMLElement> extends Event {
-  target: T
-}
-
 async function reloadExtension(): Promise<void> {
   browser.runtime.reload()
 }
@@ -28,7 +24,9 @@ async function saveOptions(e: SubmitEvent): Promise<void> {
   }
 
   const hostnameInput = document.querySelector<HTMLInputElement>('#hostname')
-  let hostname = hostnameInput.value
+  if (!hostnameInput) return
+
+  const hostname = hostnameInput.value
 
   const form = e.target as HTMLFormElement
   const button = form.querySelector<HTMLButtonElement>('button')
@@ -86,6 +84,8 @@ async function restoreOptions(): Promise<void> {
 
     const hostname = await getHostname()
     const hostnameInput = document.querySelector<HTMLInputElement>('#hostname')
+    if (!hostnameInput) return
+
     if (hostname !== undefined) {
       hostnameInput.value = hostname
     }
@@ -104,5 +104,8 @@ document
   ?.addEventListener('change', toggleCustomBrowserInput)
 const form = document.querySelector('form')
 if (form) {
-  form.addEventListener('submit', saveOptions as EventListener)
+  form.addEventListener('submit', (e: Event) => {
+    e.preventDefault()
+    saveOptions(e as SubmitEvent)
+  })
 }

src/storage.ts

@@ -86,13 +86,18 @@ export const setHeartbeatData = (heartbeatData: HeartbeatData) =>
   browser.storage.local.set({ heartbeatData })
 
 type BrowserName = string
+type StorageData = { [key: string]: any }
 export const getBrowserName = (): Promise<BrowserName | undefined> =>
-  browser.storage.local.get('browserName').then((_) => _.browserName)
+  browser.storage.local
+    .get('browserName')
+    .then((data: StorageData) => data.browserName as string | undefined)
 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)
+  browser.storage.local
+    .get('hostname')
+    .then((data: StorageData) => data.hostname as string | undefined)
 export const setHostname = (hostname: Hostname) =>
   browser.storage.local.set({ hostname })