opendevbrowser 0.0.11 → 0.0.12

package/extension/dist/background.js

@@ -1,5 +1,126 @@
 import { ConnectionManager } from "./services/ConnectionManager.js";
+import { DEFAULT_AUTO_CONNECT, DEFAULT_AUTO_PAIR, DEFAULT_DISCOVERY_PORT, DEFAULT_PAIRING_ENABLED, DEFAULT_RELAY_PORT } from "./relay-settings.js";
 const connection = new ConnectionManager();
+let autoConnectInFlight = false;
+const updateBadge = (status) => {
+    const isConnected = status === "connected";
+    chrome.action.setBadgeText({ text: isConnected ? "ON" : "OFF" });
+    chrome.action.setBadgeBackgroundColor({
+        color: isConnected ? "#20d5c6" : "#5b667a"
+    });
+};
+const parsePort = (value) => {
+    if (typeof value === "number" && Number.isInteger(value) && value > 0 && value <= 65535) {
+        return value;
+    }
+    if (typeof value === "string" && value.trim()) {
+        const parsed = Number(value);
+        if (Number.isInteger(parsed) && parsed > 0 && parsed <= 65535) {
+            return parsed;
+        }
+    }
+    return null;
+};
+const fetchRelayConfig = async (port) => {
+    try {
+        const response = await fetch(`http://127.0.0.1:${port}/config`, {
+            method: "GET",
+            headers: { "Accept": "application/json" }
+        });
+        if (!response.ok) {
+            return null;
+        }
+        const data = await response.json();
+        const relayPort = parsePort(data.relayPort);
+        if (!relayPort) {
+            return null;
+        }
+        const pairingRequired = typeof data.pairingRequired === "boolean" ? data.pairingRequired : true;
+        return { relayPort, pairingRequired };
+    }
+    catch {
+        return null;
+    }
+};
+const fetchTokenFromPlugin = async (port) => {
+    try {
+        const response = await fetch(`http://127.0.0.1:${port}/pair`, {
+            method: "GET",
+            headers: { "Accept": "application/json" }
+        });
+        if (!response.ok) {
+            return null;
+        }
+        const data = await response.json();
+        return typeof data.token === "string" ? data.token : null;
+    }
+    catch {
+        return null;
+    }
+};
+const attemptAutoConnect = async () => {
+    const data = await new Promise((resolve) => {
+        chrome.storage.local.get(["autoConnect", "autoPair", "pairingEnabled", "pairingToken", "relayPort"], (items) => {
+            resolve(items);
+        });
+    });
+    const autoConnect = typeof data.autoConnect === "boolean" ? data.autoConnect : DEFAULT_AUTO_CONNECT;
+    if (!autoConnect || connection.getStatus() === "connected") {
+        return;
+    }
+    const autoPair = typeof data.autoPair === "boolean" ? data.autoPair : DEFAULT_AUTO_PAIR;
+    const pairingEnabled = typeof data.pairingEnabled === "boolean" ? data.pairingEnabled : DEFAULT_PAIRING_ENABLED;
+    if (autoPair && pairingEnabled) {
+        const config = await fetchRelayConfig(DEFAULT_DISCOVERY_PORT);
+        const relayPort = config?.relayPort ?? parsePort(data.relayPort) ?? DEFAULT_RELAY_PORT;
+        if (config?.relayPort) {
+            chrome.storage.local.set({ relayPort: config.relayPort });
+        }
+        const pairingRequired = config?.pairingRequired ?? true;
+        if (pairingRequired) {
+            const fetchedToken = await fetchTokenFromPlugin(relayPort);
+            if (fetchedToken) {
+                chrome.storage.local.set({ pairingToken: fetchedToken });
+            }
+            else {
+                return;
+            }
+        }
+    }
+    await connection.connect();
+};
+const autoConnect = async () => {
+    if (autoConnectInFlight) {
+        return;
+    }
+    autoConnectInFlight = true;
+    try {
+        await attemptAutoConnect();
+    }
+    catch {
+        connection.disconnect();
+    }
+    finally {
+        autoConnectInFlight = false;
+    }
+};
+connection.onStatus(updateBadge);
+updateBadge(connection.getStatus());
+chrome.runtime.onStartup.addListener(() => {
+    autoConnect().catch(() => { });
+});
+chrome.runtime.onInstalled.addListener(() => {
+    autoConnect().catch(() => { });
+});
+autoConnect().catch(() => { });
+chrome.storage.onChanged.addListener((changes, area) => {
+    if (area !== "local") {
+        return;
+    }
+    if (changes.autoConnect?.newValue === true) {
+        autoConnect().catch(() => { });
+    }
+});
 chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
     const respond = (status) => {
         sendResponse(status);

package/extension/dist/popup.js

@@ -1,23 +1,32 @@
-import { DEFAULT_AUTO_PAIR, DEFAULT_DISCOVERY_PORT, DEFAULT_PAIRING_ENABLED, DEFAULT_PAIRING_TOKEN, DEFAULT_RELAY_PORT } from "./relay-settings.js";
+import { DEFAULT_AUTO_CONNECT, DEFAULT_AUTO_PAIR, DEFAULT_DISCOVERY_PORT, DEFAULT_PAIRING_ENABLED, DEFAULT_PAIRING_TOKEN, DEFAULT_RELAY_PORT } from "./relay-settings.js";
 const statusEl = document.getElementById("status");
 const statusIndicator = document.getElementById("statusIndicator");
+const statusPill = document.getElementById("statusPill");
+const statusNote = document.getElementById("statusNote");
 const toggleButton = document.getElementById("toggle");
 const relayPortInput = document.getElementById("relayPort");
 const pairingTokenInput = document.getElementById("pairingToken");
 const pairingEnabledInput = document.getElementById("pairingEnabled");
 const autoPairInput = document.getElementById("autoPair");
-if (!statusEl || !statusIndicator || !toggleButton || !relayPortInput || !pairingTokenInput || !pairingEnabledInput || !autoPairInput) {
+const autoConnectInput = document.getElementById("autoConnect");
+if (!statusEl || !statusIndicator || !statusPill || !statusNote || !toggleButton || !relayPortInput || !pairingTokenInput || !pairingEnabledInput || !autoPairInput || !autoConnectInput) {
     throw new Error("Popup DOM missing required elements");
 }
+const defaultNote = "Local relay only. Tokens stay on-device.";
+const setNote = (message = defaultNote) => {
+    statusNote.textContent = message;
+};
 const setStatus = (status) => {
     const isConnected = status === "connected";
     statusEl.textContent = isConnected ? "Connected" : "Disconnected";
     toggleButton.textContent = isConnected ? "Disconnect" : "Connect";
     if (isConnected) {
         statusIndicator.classList.add("connected");
+        statusPill.classList.add("connected");
     }
     else {
         statusIndicator.classList.remove("connected");
+        statusPill.classList.remove("connected");
     }
 };
 const sendMessage = (message) => {
@@ -30,6 +39,7 @@ const sendMessage = (message) => {
 const refreshStatus = async () => {
     const response = await sendMessage({ type: "status" });
     setStatus(response.status);
+    setNote();
 };
 const fetchTokenFromPlugin = async (port) => {
     try {
@@ -89,23 +99,29 @@ const applyRelayPort = (port) => {
 };
 const loadSettings = async () => {
     const data = await new Promise((resolve) => {
-        chrome.storage.local.get(["pairingToken", "pairingEnabled", "relayPort", "autoPair"], (items) => {
+        chrome.storage.local.get(["pairingToken", "pairingEnabled", "relayPort", "autoPair", "autoConnect"], (items) => {
             resolve(items);
         });
     });
     const autoPair = typeof data.autoPair === "boolean" ? data.autoPair : DEFAULT_AUTO_PAIR;
+    const autoConnect = typeof data.autoConnect === "boolean" ? data.autoConnect : DEFAULT_AUTO_CONNECT;
     const pairingEnabled = typeof data.pairingEnabled === "boolean"
         ? data.pairingEnabled
         : DEFAULT_PAIRING_ENABLED;
     const rawToken = typeof data.pairingToken === "string" ? data.pairingToken.trim() : "";
     const tokenValue = pairingEnabled ? (rawToken || DEFAULT_PAIRING_TOKEN || "") : rawToken;
     const portValue = parsePort(data.relayPort) ?? DEFAULT_RELAY_PORT;
+    autoConnectInput.checked = autoConnect;
     autoPairInput.checked = autoPair;
     pairingEnabledInput.checked = pairingEnabled;
     pairingTokenInput.disabled = !pairingEnabled || autoPair;
     pairingTokenInput.value = tokenValue;
     relayPortInput.value = Number.isInteger(portValue) ? String(portValue) : String(DEFAULT_RELAY_PORT);
+    setNote();
     const updates = {};
+    if (typeof data.autoConnect !== "boolean") {
+        updates.autoConnect = autoConnect;
+    }
     if (typeof data.autoPair !== "boolean") {
         updates.autoPair = autoPair;
     }
@@ -118,6 +134,7 @@ const loadSettings = async () => {
 };
 const toggle = async () => {
     const isConnected = statusEl.textContent === "Connected";
+    setNote();
     if (!isConnected && autoPairInput.checked && pairingEnabledInput.checked) {
         const config = await fetchRelayConfig(DEFAULT_DISCOVERY_PORT);
         const relayPort = config?.relayPort ?? parsePort(relayPortInput.value) ?? DEFAULT_RELAY_PORT;
@@ -132,7 +149,8 @@ const toggle = async () => {
                 chrome.storage.local.set({ pairingToken: fetchedToken });
             }
             else {
-                statusEl.textContent = "Failed to fetch token from plugin";
+                setStatus("disconnected");
+                setNote("Auto-pair failed. Start the plugin and retry.");
                 setTimeout(() => refreshStatus(), 2000);
                 return;
             }
@@ -142,6 +160,7 @@ const toggle = async () => {
         type: isConnected ? "disconnect" : "connect"
     });
     setStatus(response.status);
+    setNote();
 };
 toggleButton.addEventListener("click", () => {
     toggle().catch(() => {
@@ -156,7 +175,17 @@ autoPairInput.addEventListener("change", () => {
         pairingTokenInput.placeholder = "Will be fetched automatically";
     }
     else {
-        pairingTokenInput.placeholder = "Enter token or enable Auto-Pair";
+        pairingTokenInput.placeholder = "Enter token or enable auto-pair";
+    }
+});
+autoConnectInput.addEventListener("change", () => {
+    const enabled = autoConnectInput.checked;
+    chrome.storage.local.set({ autoConnect: enabled });
+    if (enabled && statusEl.textContent !== "Connected") {
+        toggle().catch(() => {
+            setStatus("disconnected");
+            setNote();
+        });
     }
 });
 pairingTokenInput.addEventListener("input", () => {
@@ -187,11 +216,14 @@ relayPortInput.addEventListener("input", () => {
 });
 refreshStatus().catch(() => {
     setStatus("disconnected");
+    setNote();
 });
 loadSettings().catch(() => {
+    autoConnectInput.checked = DEFAULT_AUTO_CONNECT;
     autoPairInput.checked = DEFAULT_AUTO_PAIR;
     pairingEnabledInput.checked = DEFAULT_PAIRING_ENABLED;
     pairingTokenInput.disabled = !DEFAULT_PAIRING_ENABLED;
     pairingTokenInput.value = DEFAULT_PAIRING_TOKEN || "";
     relayPortInput.value = String(DEFAULT_RELAY_PORT);
+    setNote();
 });

package/extension/dist/relay-settings.js

@@ -2,4 +2,5 @@ export const DEFAULT_RELAY_PORT = 8787;
 export const DEFAULT_DISCOVERY_PORT = 8787;
 export const DEFAULT_PAIRING_TOKEN = null;
 export const DEFAULT_PAIRING_ENABLED = true;
-export const DEFAULT_AUTO_PAIR = false;
+export const DEFAULT_AUTO_PAIR = true;
+export const DEFAULT_AUTO_CONNECT = true;

package/extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "OpenDevBrowser Relay",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Optional bridge to reuse existing Chrome tabs with OpenDevBrowser.",
   "permissions": [
     "debugger",