Experiment: auto reload settings

manifest/base.json

@@ -16,7 +16,7 @@
     }
   ],
   "options_ui": {
-    "page": "./options/index.html",
+    "page": "./popup/index.html?view=settings",
     "browser_style": false
   },
   "content_security_policy": {

src/background/connectionState.ts

@@ -1,6 +1,6 @@
 import { action, notifications, runtime, tabs } from "webextension-polyfill";
 
-import { loadSettings } from "#/settings";
+import { getEndpoint, loadSettings } from "#/settings";
 
 type ConnectionState = "connected" | "disconnected" | "unknown";
 
@@ -15,6 +15,22 @@ let hasShownNotification = false;
 
 const NOTIFICATION_ID = "ethui-connection-status";
 
+export function resetConnectionState() {
+  globalConnectionState = "unknown";
+  hasShownNotification = false;
+  updateBadge();
+
+  // Notify popup to re-check connection
+  runtime
+    .sendMessage({
+      type: "connection-state",
+      state: "unknown",
+    })
+    .catch(() => {
+      // Popup may not be open, ignore error
+    });
+}
+
 export function setConnectionState(state: ConnectionState) {
   const previousState = globalConnectionState;
   globalConnectionState = state;
@@ -72,7 +88,7 @@ function showDisconnectedNotification() {
 
 async function checkConnection(): Promise<ConnectionState> {
   const settings = await loadSettings();
-  const endpoint = settings.endpoint;
+  const endpoint = getEndpoint(settings);
 
   return new Promise((resolve) => {
     let resolved = false;
@@ -108,7 +124,7 @@ async function checkConnection(): Promise<ConnectionState> {
 
 async function fetchWalletInfo(): Promise<WalletInfo | null> {
   const settings = await loadSettings();
-  const endpoint = settings.endpoint;
+  const endpoint = getEndpoint(settings);
 
   return new Promise((resolve) => {
     const ws = new WebSocket(endpoint);

src/background/index.ts

@@ -1,28 +1,38 @@
 import log from "loglevel";
-import { type Runtime, runtime } from "webextension-polyfill";
-import { ArrayQueue, ConstantBackoff, WebsocketBuilder } from "websocket-ts";
-
-import { defaultSettings, loadSettings, type Settings } from "#/settings";
+import { type Runtime, runtime, storage } from "webextension-polyfill";
+import { ArrayQueue, WebsocketBuilder } from "websocket-ts";
+import {
+  defaultSettings,
+  getEndpoint,
+  loadSettings,
+  type Settings,
+} from "#/settings";
 import {
+  resetConnectionState,
   setConnectionState,
   setupConnectionStateListener,
 } from "./connectionState";
 import { startHeartbeat } from "./heartbeat";
+import { updateIcon } from "./utils";
 
 // init on load
 (async () => init())();
 
 let settings: Settings = defaultSettings;
 
+const activeConnections: Map<number, { close: () => void }> = new Map();
+
 /**
  * Loads the current settings, and listens for incoming connections (from the injected contentscript)
  */
 async function init() {
   startHeartbeat();
   settings = await loadSettings();
   log.setLevel(settings.logLevel);
+  updateIcon(settings.devMode);
 
   setupConnectionStateListener();
+  setupSettingsChangeListener();
 
   // handle each incoming content script connection
   runtime.onConnect.addListener((port: Runtime.Port) => {
@@ -38,6 +48,43 @@ async function init() {
   });
 }
 
+/**
+ * Listen for settings changes and reconnect all active connections when endpoint changes
+ */
+function setupSettingsChangeListener() {
+  storage.onChanged.addListener((changes, areaName) => {
+    if (areaName !== "sync") return;
+
+    if (changes.logLevel?.newValue) {
+      settings.logLevel = changes.logLevel.newValue as Settings["logLevel"];
+      log.setLevel(settings.logLevel);
+      log.debug("Log level changed to", settings.logLevel);
+    }
+
+    if (changes.devMode?.newValue !== undefined) {
+      settings.devMode = changes.devMode.newValue as boolean;
+      log.debug(
+        "Dev mode changed to",
+        settings.devMode,
+        "- endpoint:",
+        getEndpoint(settings),
+      );
+
+      // Update icon color
+      updateIcon(settings.devMode);
+
+      // Reset connection state to trigger fresh check
+      resetConnectionState();
+
+      // Close all active connections - they will reconnect with new endpoint on next message
+      for (const [tabId, conn] of activeConnections) {
+        log.debug(`Closing connection for tab ${tabId}`);
+        conn.close();
+      }
+    }
+  });
+}
+
 /**
  * Sends a message to the devtools in every page.
  * Each message will include a timestamp.
@@ -88,6 +135,19 @@ function setupProviderConnection(port: Runtime.Port) {
   let queue: string[] = [];
   let ws: ReturnType<typeof WebsocketBuilder.prototype.build> | undefined;
   let isConnecting = false;
+  let intentionalClose = false;
+
+  const closeWebSocket = () => {
+    if (ws) {
+      intentionalClose = true;
+      ws.close();
+      ws = undefined;
+    }
+    isConnecting = false;
+  };
+
+  // Register this connection for settings change handling
+  activeConnections.set(tabId, { close: closeWebSocket });
 
   const initWebSocket = () => {
     if (ws || isConnecting) return;
@@ -111,19 +171,30 @@ function setupProviderConnection(port: Runtime.Port) {
         log.debug(`WS connection closed (${url})`);
         ws = undefined;
         isConnecting = false;
+
+        if (intentionalClose) {
+          // Settings change - don't reconnect, don't set disconnected state
+          intentionalClose = false;
+          return;
+        }
+
         setConnectionState("disconnected");
-      })
-      .onReconnect(() => {
-        log.debug("WS connection reconnected");
-        setConnectionState("connected");
+        // Auto-retry after 1 second with current endpoint
+        setTimeout(() => {
+          if (!ws && !isConnecting) {
+            log.debug("Attempting to reconnect...");
+            initWebSocket();
+          }
+        }, 1000);
       })
       .onError((e) => {
         log.error("[WS] error:", e);
         isConnecting = false;
-        setConnectionState("disconnected");
+        if (!intentionalClose) {
+          setConnectionState("disconnected");
+        }
       })
       .withBuffer(new ArrayQueue())
-      .withBackoff(new ConstantBackoff(1000))
       .onMessage((_ins, event) => {
         if (event.data === "ping") {
           log.debug("[ws] ping");
@@ -172,19 +243,17 @@ function setupProviderConnection(port: Runtime.Port) {
 
   port.onDisconnect.addListener(() => {
     log.debug("port disconnected");
-    if (ws) {
-      ws.close();
-      ws = undefined;
-    }
+    closeWebSocket();
+    activeConnections.delete(tabId);
     queue = [];
   });
 }
 
 /**
- * The URL of the ethui server if given from the settings, with connection metadata being appended as URL params
+ * The URL of the ethui server based on current settings, with connection metadata being appended as URL params
  */
 function endpoint(port: Runtime.Port) {
-  return `${settings.endpoint}?${connParams(port)}`;
+  return `${getEndpoint(settings)}?${connParams(port)}`;
 }
 
 /**

src/background/utils.ts

@@ -0,0 +1,13 @@
+import { action } from "webextension-polyfill";
+
+export function updateIcon(devMode: boolean) {
+  const color = devMode ? "purple" : "black";
+  action.setIcon({
+    path: {
+      16: `/icons/ethui-${color}-16.png`,
+      48: `/icons/ethui-${color}-48.png`,
+      96: `/icons/ethui-${color}-96.png`,
+      128: `/icons/ethui-${color}-128.png`,
+    },
+  });
+}

src/options/index.html

@@ -24,8 +24,13 @@
     </div>
 
     <div class="form-section">
-      <label class="label">Endpoint</label>
-      <input type="text" id="endpoint" />
+      <label>
+        <input type="checkbox" id="dev-mode" />
+        Developer Mode
+      </label>
+      <p style="font-size: 12px; color: #666;">
+        Connects to port ethui's debug build instead of release. Meant for developers and contributors only.
+      </p>
     </div>
 
     <div class="form-section">

src/options/index.ts

@@ -3,7 +3,7 @@ import { storage } from "webextension-polyfill";
 import { defaultSettings, type Settings } from "#/settings";
 
 const $logLevel = document.getElementById("log-level") as HTMLInputElement;
-const $endpoint = document.getElementById("endpoint") as HTMLInputElement;
+const $devMode = document.getElementById("dev-mode") as HTMLInputElement;
 const $status = document.getElementById("status") as HTMLDivElement;
 const $save = document.getElementById("save") as HTMLButtonElement;
 
@@ -12,12 +12,12 @@ const saveOptions = () => {
   const options: Settings = {
     logLevel:
       ($logLevel.value as Settings["logLevel"]) || defaultSettings.logLevel,
-    endpoint: $endpoint.value || defaultSettings.endpoint,
+    devMode: $devMode.checked,
   };
 
-  storage.sync.set(options).then(() => {
+  storage.sync.set(options as Record<string, unknown>).then(() => {
     // Update status to let user know options were saved.
-    $status.textContent = "Options saved. Restart browser to take effect";
+    $status.textContent = "Options saved";
     setTimeout(() => {
       $status.textContent = "";
     }, 750);
@@ -27,9 +27,9 @@ const saveOptions = () => {
 // Restores select box and checkbox state using the preferences
 // stored in chrome.storage.
 const restoreOptions = () => {
-  storage.sync.get(defaultSettings).then((items) => {
+  storage.sync.get(defaultSettings as Record<string, unknown>).then((items) => {
     $logLevel.value = items.logLevel as string;
-    $endpoint.value = items.endpoint as string;
+    $devMode.checked = items.devMode as boolean;
   });
 };
 

src/popup/components/ConnectedView.tsx

@@ -6,7 +6,17 @@ import { useWalletInfo } from "../hooks/useWalletInfo";
 import { formatBalance, getChainName, truncateAddress } from "../utils";
 import { Header } from "./Header";
 
-export function ConnectedView() {
+interface ConnectedViewProps {
+  onExpand?: () => void;
+  onSettings: () => void;
+  devMode?: boolean;
+}
+
+export function ConnectedView({
+  onExpand,
+  onSettings,
+  devMode,
+}: ConnectedViewProps) {
   const { walletInfo, loading } = useWalletInfo();
   const [copied, setCopied] = useState(false);
 
@@ -33,6 +43,9 @@ export function ConnectedView() {
             </span>
           )
         }
+        devMode={devMode}
+        onExpand={onExpand}
+        onSettings={onSettings}
       />
 
       {loading ? (

src/popup/components/DisconnectedView.tsx

@@ -7,15 +7,28 @@ import { Header } from "./Header";
 
 interface DisconnectedViewProps {
   connectionState: ConnectionState;
+  onExpand?: () => void;
+  onSettings: () => void;
+  devMode?: boolean;
 }
 
-export function DisconnectedView({ connectionState }: DisconnectedViewProps) {
+export function DisconnectedView({
+  connectionState,
+  onExpand,
+  onSettings,
+  devMode,
+}: DisconnectedViewProps) {
   const title =
     connectionState === "disconnected" ? "Not Connected" : "Checking...";
 
   return (
     <div className="p-4">
-      <Header title={title} />
+      <Header
+        title={title}
+        devMode={devMode}
+        onExpand={onExpand}
+        onSettings={onSettings}
+      />
       {connectionState === "disconnected" && (
         <div className="space-y-3">
           <Alert variant="destructive">