refactor: one shared extension-API module, and drive the dApp flows on Firefox (closes #153)

Every call site that touched `browser.*` or `chrome.*` now goes through
`src/shared/browserApi.js`, the only file in the tree that names either.
It exposes lazily-resolved namespace handles for events and synchronous
methods, and promise-returning wrappers for everything that is
callback-shaped on Chrome. Callers await; `runtime.lastError` is gone,
folded into the rejection the wrapper produces on the Chrome path.

`storageGet()` and `storageSet()` reject where `storage.local` is
absent. They carry the wallet: resolving `{}` would make an existing
wallet read back as no wallet, and a no-op write would discard the
user's state with nothing logged. The one caller that genuinely
degrades, `src/shared/phishingDomains.js`, takes `storageLocal()`
directly and keeps its own null check.

The Firefox suite gains the four dApp round trips the issue's definition
of done asks for — `eth_requestAccounts`, `personal_sign`,
`eth_sendTransaction`, and a closed approval window rejecting with
EIP-1193 4001 — driven through the real content script, background page
and approval windows. `--network none` was thought to rule that out
because it leaves no `http://` origin to inject into; loopback survives
it, so the page and a JSON-RPC node are served from 127.0.0.1 inside the
container and the run still reaches nothing but itself.

That harness refutes the premise it was built to verify. On Firefox
153.0.3, `browser.*` honours a trailing Chrome-style callback and does
populate `runtime.lastError`, both measured directly, and all four flows
pass against the unconverted code. So this is a uniformity and coverage
change, not a repair of a broken target; the PR records the measurement
in full, and the comments in `browserApi.js` and the Firefox suite say
that rather than the refuted claim.

An unhandled promise rejection fails a run on both harnesses, measured
by throwing past the first await of the unawaited `approval.show()`:
Firefox reports it from the console-service drain and Chrome as a
`pageerror`. README.md records the demonstration.

One real defect is fixed on the way past: the window id written back
into a pending approval after `windows.create()` was unguarded, so an
approval settled during the open — an address switch will do it —
dereferenced a deleted entry.

src/popup/index.js

@@ -161,6 +161,12 @@ async function init() {
     const params = new URLSearchParams(window.location.search);
     const approvalId = params.get("approval");
     if (approvalId) {
+        // Deliberately not awaited, and deliberately not .catch()ed. show()
+        // is async, so a throw past its first await surfaces as an unhandled
+        // rejection rather than an uncaught error — measured as still failing
+        // the run on both harnesses (Playwright `pageerror`, and the Firefox
+        // driver's console-service drain), so nothing is lost by leaving it
+        // on that path.
         approval.show(approvalId);
         showView("approve-site");
         return;

src/popup/views/approval.js

@@ -27,8 +27,7 @@ const { walletDefect } = require("../../shared/walletDefects");
 const { describeSigningFailure } = require("../../shared/approvalVerify");
 const txStatus = require("./txStatus");
 const uniswap = require("../../shared/uniswap");
-const runtime =
-    typeof browser !== "undefined" ? browser.runtime : chrome.runtime;
+const { notify, runtimeApi, sendMessage } = require("../../shared/browserApi");
 
 const erc20Iface = new Interface(ERC20_ABI);
 
@@ -439,34 +438,41 @@ function showSignApproval(details) {
     );
 }
 
-function show(id) {
+// Awaited by nobody: the popup entry point calls this and moves on. It
+// therefore has to absorb its own failure, and a background that cannot
+// describe the approval is the same outcome as an approval that is gone.
+async function show(id) {
     approvalId = id;
-    runtime.connect({ name: "approval:" + id });
-    runtime.sendMessage({ type: "AUTISTMASK_GET_APPROVAL", id }, (details) => {
-        if (!details) {
-            window.close();
-            return;
-        }
-        if (details.type === "tx") {
-            showTxApproval(details);
-            return;
-        }
-        if (details.type === "sign") {
-            showSignApproval(details);
-            return;
-        }
-        // Site connection approval
-        showPhishingWarning(
-            "approve-site-phishing-warning",
-            details.isPhishingDomain,
-        );
-        $("approve-hostname").textContent = details.hostname;
-        $("approve-address").innerHTML = approvalAddressHtml(
-            state.activeAddress,
-        );
-        attachCopyHandlers("view-approve-site");
-        $("approve-remember").checked = state.rememberSiteChoice;
-    });
+    runtimeApi().connect({ name: "approval:" + id });
+
+    let details = null;
+    try {
+        details = await sendMessage({ type: "AUTISTMASK_GET_APPROVAL", id });
+    } catch {
+        details = null;
+    }
+
+    if (!details) {
+        window.close();
+        return;
+    }
+    if (details.type === "tx") {
+        showTxApproval(details);
+        return;
+    }
+    if (details.type === "sign") {
+        showSignApproval(details);
+        return;
+    }
+    // Site connection approval
+    showPhishingWarning(
+        "approve-site-phishing-warning",
+        details.isPhishingDomain,
+    );
+    $("approve-hostname").textContent = details.hostname;
+    $("approve-address").innerHTML = approvalAddressHtml(state.activeAddress);
+    attachCopyHandlers("view-approve-site");
+    $("approve-remember").checked = state.rememberSiteChoice;
 }
 
 let approvalId = null;
@@ -548,7 +554,7 @@ function init(ctx) {
 
     $("btn-approve").addEventListener("click", () => {
         const remember = $("approve-remember").checked;
-        runtime.sendMessage({
+        notify({
             type: "AUTISTMASK_APPROVAL_RESPONSE",
             id: approvalId,
             approved: true,
@@ -559,7 +565,7 @@ function init(ctx) {
 
     $("btn-reject").addEventListener("click", () => {
         const remember = $("approve-remember").checked;
-        runtime.sendMessage({
+        notify({
             type: "AUTISTMASK_APPROVAL_RESPONSE",
             id: approvalId,
             approved: false,
@@ -648,29 +654,37 @@ function init(ctx) {
             decryptedSecret = null;
         }
 
-        runtime.sendMessage(payload, (response) => {
-            if (response && response.txHash) {
-                txStatus.showWait(pendingTxDetails, response.txHash);
-                return;
-            }
-            // A retryable failure leaves the approval pending in the
-            // background, so stay on this screen with a live button rather
-            // than sending the user to a dead end.
-            const outcome = describeSigningFailure(
-                response,
-                "The transaction could not be sent.",
-            );
-            if (outcome.retryable) {
-                showError("approve-tx-error", outcome.message);
-                setTxButtonBusy(false);
-            } else {
-                txStatus.showError(pendingTxDetails, null, outcome.message);
-            }
-        });
+        // A send that never reaches the background is reported to the user
+        // the same way a background that refused it is: describeSigningFailure
+        // turns a null response into the generic message below.
+        let response = null;
+        try {
+            response = await sendMessage(payload);
+        } catch {
+            response = null;
+        }
+
+        if (response && response.txHash) {
+            txStatus.showWait(pendingTxDetails, response.txHash);
+            return;
+        }
+        // A retryable failure leaves the approval pending in the
+        // background, so stay on this screen with a live button rather
+        // than sending the user to a dead end.
+        const outcome = describeSigningFailure(
+            response,
+            "The transaction could not be sent.",
+        );
+        if (outcome.retryable) {
+            showError("approve-tx-error", outcome.message);
+            setTxButtonBusy(false);
+        } else {
+            txStatus.showError(pendingTxDetails, null, outcome.message);
+        }
     });
 
     $("btn-reject-tx").addEventListener("click", () => {
-        runtime.sendMessage({
+        notify({
             type: "AUTISTMASK_TX_RESPONSE",
             id: approvalId,
             approved: false,
@@ -764,26 +778,31 @@ function init(ctx) {
             decryptedSecret = null;
         }
 
-        runtime.sendMessage(payload, (response) => {
-            if (response && response.signature) {
-                window.close();
-                return;
-            }
-            // The button comes back only when the approval is still pending in
-            // the background; otherwise it stays disabled and the message says
-            // why, because a control that cannot succeed must not look like it
-            // can.
-            const outcome = describeSigningFailure(
-                response,
-                "The message could not be signed.",
-            );
-            showError("approve-sign-error", outcome.message);
-            if (outcome.retryable) setSignButtonBusy(false);
-        });
+        let response = null;
+        try {
+            response = await sendMessage(payload);
+        } catch {
+            response = null;
+        }
+
+        if (response && response.signature) {
+            window.close();
+            return;
+        }
+        // The button comes back only when the approval is still pending in
+        // the background; otherwise it stays disabled and the message says
+        // why, because a control that cannot succeed must not look like it
+        // can.
+        const outcome = describeSigningFailure(
+            response,
+            "The message could not be signed.",
+        );
+        showError("approve-sign-error", outcome.message);
+        if (outcome.retryable) setSignButtonBusy(false);
     });
 
     $("btn-reject-sign").addEventListener("click", () => {
-        runtime.sendMessage({
+        notify({
             type: "AUTISTMASK_SIGN_RESPONSE",
             id: approvalId,
             approved: false,

src/popup/views/home.js

@@ -15,6 +15,7 @@ const {
     pushCurrentView,
 } = require("./helpers");
 const { state, saveState, currentAddress } = require("../../shared/state");
+const { notify } = require("../../shared/browserApi");
 const {
     updateSendBalance,
     renderSendTokenSelect,
@@ -292,11 +293,7 @@ function render(ctx) {
                 state.activeAddress = addr;
                 await saveState();
                 render(ctx);
-                const runtime =
-                    typeof browser !== "undefined"
-                        ? browser.runtime
-                        : chrome.runtime;
-                runtime.sendMessage({ type: "AUTISTMASK_ACTIVE_CHANGED" });
+                notify({ type: "AUTISTMASK_ACTIVE_CHANGED" });
             }
         });
     });

src/popup/views/settings.js

@@ -29,8 +29,7 @@ const {
     GITEA_COMMIT_URL,
 } = require("../../shared/buildInfo");
 
-const runtime =
-    typeof browser !== "undefined" ? browser.runtime : chrome.runtime;
+const { notify } = require("../../shared/browserApi");
 
 let versionClickCount = 0;
 let versionClickTimer = null;
@@ -61,7 +60,7 @@ function renderSiteList(containerId, siteMap, stateKey) {
                 }
             }
             await saveState();
-            runtime.sendMessage({ type: "AUTISTMASK_REMOVE_SITE" });
+            notify({ type: "AUTISTMASK_REMOVE_SITE" });
             renderSiteList(containerId, state[key], key);
         });
     });