Add daemon host extension option

ext/src/_locales/en/messages.json

@@ -202,10 +202,10 @@
     }
 
   , "optionsBridgeBackupEnabled": {
-        "message": "Enable backup daemon connection on port $numberInput$"
-      , "description": "Backup daemon checkbox label. An HTML number input is inserted inline at the numberInput substitution."
+        "message": "Enable backup daemon connection on $hostPort$"
+      , "description": "Backup daemon checkbox label. Host/port inputs are inserted inline at the hostPort substitution."
       , "placeholders": {
-            "numberInput": {
+            "hostPort": {
                 "content": "$1"
             }
         }

ext/src/defaultOptions.ts

@@ -7,6 +7,7 @@ import { Options } from "./lib/options";
 export default {
     bridgeApplicationName: APPLICATION_NAME
   , bridgeBackupEnabled: false
+  , bridgeBackupHost: "localhost"
   , bridgeBackupPort: 9556
   , mediaEnabled: true
   , mediaOverlayEnabled: false

ext/src/lib/nativeMessaging.ts

@@ -4,8 +4,6 @@ import logger from "./logger";
 import options from "./options";
 
 
-const WEBSOCKET_DAEMON_URL_PREFIX = "ws://localhost:";
-
 
 type DisconnectListener = (port: browser.runtime.Port) => void;
 type MessageListener = (message: any) => void;
@@ -99,7 +97,11 @@ function connectNative (application: string) {
 
 
     port.onDisconnect.addListener(async () => {
-        if (!(await options.get("bridgeBackupEnabled"))) {
+        const { bridgeBackupEnabled
+              , bridgeBackupHost
+              , bridgeBackupPort } = await options.getAll();
+
+        if (!bridgeBackupEnabled) {
             portObject.error = {
                 message: ""
             };
@@ -114,8 +116,8 @@ function connectNative (application: string) {
         if (port.error && !isNativeHostStatusKnown) {
             isNativeHostStatusKnown = true;
 
-            const port = await options.get("bridgeBackupPort");
-            socket = new WebSocket(`${WEBSOCKET_DAEMON_URL_PREFIX}${port}`);
+            socket = new WebSocket(
+                    `ws://${bridgeBackupHost}:${bridgeBackupPort}`);
 
             socket.addEventListener("open", () => {
                 // Send all messages in queue
@@ -168,14 +170,19 @@ async function sendNativeMessage (
     try {
         return await browser.runtime.sendNativeMessage(application, message);
     } catch {
-        if (!(await options.get("bridgeBackupEnabled"))) {
+        const { bridgeBackupEnabled
+              , bridgeBackupHost
+              , bridgeBackupPort } = await options.getAll();
+
+        if (!bridgeBackupEnabled) {
             throw logger.error("Bridge connection failed and backup not enabled.");
         }
 
         const port = await options.get("bridgeBackupPort");
 
         return await new Promise((resolve, reject) => {
-            const ws = new WebSocket(`${WEBSOCKET_DAEMON_URL_PREFIX}${port}`);
+            const ws = new WebSocket(
+                    `ws://${bridgeBackupHost}:${bridgeBackupPort}`);
 
             ws.addEventListener("open", () => {
                 ws.send(JSON.stringify(message));

ext/src/lib/options.ts

@@ -16,6 +16,7 @@ const storageArea = new TypedStorageArea<{
 export interface Options {
     bridgeApplicationName: string;
     bridgeBackupEnabled: boolean;
+    bridgeBackupHost: string;
     bridgeBackupPort: number;
     mediaEnabled: boolean;
     mediaOverlayEnabled: boolean;

ext/src/ui/options/Bridge.tsx

@@ -118,6 +118,13 @@ export default class Bridge extends Component<BridgeProps, BridgeState> {
                             </div>
                             <div className="option__label">
                                 { backupMessageStart }
+                                <input className="bridge__backup-host"
+                                       name="bridgeBackupHost"
+                                       type="text"
+                                       required
+                                       value={ this.props.options.bridgeBackupHost }
+                                       onChange={ this.props.onChange } />
+                                :
                                 <input className="bridge__backup-port"
                                        name="bridgeBackupPort"
                                        type="number"

ext/src/ui/options/styles/index.css

@@ -195,12 +195,20 @@
     margin-left: 10px;
 }
 
+.bridge__backup-host,
 .bridge__backup-port {
-    width: 75px;
     margin-left: 0.5em;
     margin-right: 0.5em;
 }
 
+.bridge__backup-host {
+    width: 125px;
+}
+
+.bridge__backup-port {
+    width: 75px;
+}
+
 
 .category {
     border: initial;