don't retain port in content scripts

apps/extension/public/manifest.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://json.schemastore.org/chrome-manifest",
   "manifest_version": 3,
   "name": "Prax wallet",
   "version": "15.1.0",
@@ -17,8 +18,9 @@
   "content_scripts": [
     {
       "matches": ["https://*/*", "http://localhost/*"],
-      "js": ["injected-connection-port.js", "injected-request-listener.js"],
-      "run_at": "document_start"
+      "js": ["injected-listeners.js"],
+      "run_at": "document_start",
+      "world": "ISOLATED"
     },
     {
       "matches": ["https://*/*", "http://localhost/*"],

apps/extension/src/content-scripts/injected-listeners.ts

@@ -0,0 +1,102 @@
+import { PenumbraRequestFailure } from '@penumbra-zone/client/error';
+import { CRSessionClient } from '@penumbra-zone/transport-chrome/session-client';
+import { PraxConnection } from '../message/prax';
+import { PraxMessage, isPraxMessageEvent, unwrapPraxMessageEvent } from './message-event';
+
+const endMessage = { [PRAX]: PraxConnection.End } satisfies PraxMessage<PraxConnection.End>;
+const portMessage = (port: MessagePort) => ({ [PRAX]: port }) satisfies PraxMessage<MessagePort>;
+const requestFailureMessage = (failure?: unknown): PraxMessage<PenumbraRequestFailure> =>
+  typeof failure === 'string' && failure in PenumbraRequestFailure
+    ? { [PRAX]: failure }
+    : { [PRAX]: PenumbraRequestFailure.BadResponse };
+
+const praxRequest = async (req: PraxConnection.Connect | PraxConnection.Disconnect) => {
+  console.debug('praxRequest req', req);
+  const res = await chrome.runtime
+    .sendMessage<
+      PraxConnection.Connect | PraxConnection.Disconnect,
+      null | PenumbraRequestFailure
+    >(req)
+    .catch(e => {
+      console.debug('praxRequest error', e);
+      return PenumbraRequestFailure.NotHandled;
+    });
+  console.debug('praxRequest res', res);
+  return res;
+};
+
+const praxDocumentListener = (ev: MessageEvent<unknown>) => {
+  if (ev.origin === window.origin && isPraxMessageEvent(ev)) {
+    const req = unwrapPraxMessageEvent(ev);
+    if (typeof req === 'string' && req in PraxConnection) {
+      console.debug('window event', req);
+
+      void (async () => {
+        let response: unknown;
+
+        switch (req as PraxConnection) {
+          case PraxConnection.Connect:
+            console.debug('using window event', PraxConnection.Connect);
+            response = await praxRequest(PraxConnection.Connect);
+            break;
+          case PraxConnection.Disconnect:
+            console.debug('using window event', PraxConnection.Disconnect);
+            response = await praxRequest(PraxConnection.Disconnect);
+            break;
+          default: // message is not for this handler
+            return;
+        }
+
+        // response should be null, or content for a failure message
+        if (response != null) {
+          // failure, send failure message
+          console.debug('window event failure', response);
+          window.postMessage(requestFailureMessage(response), '/');
+        } else {
+          // success, no response
+          console.debug('window event success');
+        }
+      })();
+    }
+  }
+};
+
+const praxExtensionListener = (
+  req: unknown,
+  sender: chrome.runtime.MessageSender,
+  ok: (no?: never) => void,
+) => {
+  if (sender.id === PRAX && typeof req === 'string' && req in PraxConnection) {
+    console.debug('extension event', req);
+
+    switch (req as PraxConnection) {
+      case PraxConnection.Init: {
+        console.debug('using extension event', req);
+        const port = CRSessionClient.init(PRAX);
+        window.postMessage(portMessage(port), '/', [port]);
+        break;
+      }
+      case PraxConnection.End: {
+        console.debug('using extension event', req);
+        window.postMessage(endMessage, '/');
+        break;
+      }
+      default: // message is not for this handler
+        return false;
+    }
+
+    // success, send empty response
+    ok();
+    return true;
+  } else {
+    // message is not for this handler
+    return false;
+  }
+};
+
+// attach
+window.addEventListener('message', praxDocumentListener);
+chrome.runtime.onMessage.addListener(praxExtensionListener);
+
+// announce
+void chrome.runtime.sendMessage(PraxConnection.Init);

apps/extension/src/content-scripts/injected-penumbra-global.ts

@@ -19,7 +19,8 @@
 
 import '@penumbra-zone/client/global';
 
-import { createPenumbraStateEvent, type PenumbraProvider } from '@penumbra-zone/client';
+import { createPenumbraStateEvent } from '@penumbra-zone/client/event';
+import type { PenumbraProvider } from '@penumbra-zone/client/provider';
 import { PenumbraState } from '@penumbra-zone/client/state';
 import { PenumbraSymbol } from '@penumbra-zone/client/symbol';
 
@@ -51,7 +52,6 @@ class PraxInjection {
     return new PraxInjection().injection;
   }
 
-  private port?: MessagePort;
   private presentState: PenumbraState = PenumbraState.Disconnected;
   private manifestUrl = `${PRAX_ORIGIN}/manifest.json`;
   private stateEvents = new EventTarget();
@@ -63,13 +63,11 @@ class PraxInjection {
      * @todo Remove when bundled frontends are updated beyond `a31d54a`
      * @issue https://github.com/prax-wallet/web/issues/175
      */
-    request: async () => {
-      await Promise.resolve(this.port ?? this.postConnectRequest());
-    },
+    request: () => this.postConnectRequest(),
 
-    connect: () => Promise.resolve(this.port ?? this.postConnectRequest()),
+    connect: () => this.postConnectRequest(),
     disconnect: () => this.postDisconnectRequest(),
-    isConnected: () => Boolean(this.port && this.presentState === PenumbraState.Connected),
+    isConnected: () => this.presentState === PenumbraState.Connected,
     state: () => this.presentState,
     manifest: String(this.manifestUrl),
     addEventListener: this.stateEvents.addEventListener.bind(this.stateEvents),
@@ -84,20 +82,17 @@ class PraxInjection {
     window.postMessage(initMessage, '/');
   }
 
-  private setConnected(port: MessagePort) {
-    this.port = port;
+  private setConnected() {
     this.presentState = PenumbraState.Connected;
     this.stateEvents.dispatchEvent(createPenumbraStateEvent(PRAX_ORIGIN, this.presentState));
   }
 
   private setDisconnected() {
-    this.port = undefined;
     this.presentState = PenumbraState.Disconnected;
     this.stateEvents.dispatchEvent(createPenumbraStateEvent(PRAX_ORIGIN, this.presentState));
   }
 
   private setPending() {
-    this.port = undefined;
     this.presentState = PenumbraState.Pending;
     this.stateEvents.dispatchEvent(createPenumbraStateEvent(PRAX_ORIGIN, this.presentState));
   }
@@ -108,10 +103,19 @@ class PraxInjection {
     return attempt;
   }
 
+  private postDisconnectRequest() {
+    const attempt = this.listenEndMessage();
+    window.postMessage(disconnectMessage, '/', []);
+    return attempt;
+  }
+
   private listenPortMessage() {
-    this.setPending();
+    if (this.presentState !== PenumbraState.Connected) {
+      this.setPending();
+    }
 
     const connection = Promise.withResolvers<MessagePort>();
+
     const listener = (msg: MessageEvent<unknown>) => {
       if (msg.origin === window.origin) {
         if (isPraxPortMessageEvent(msg)) {
@@ -125,16 +129,20 @@ class PraxInjection {
     };
 
     void connection.promise
-      .then(port => this.setConnected(port))
+      .then(() => this.setConnected())
       .catch(() => this.setDisconnected())
       .finally(() => window.removeEventListener('message', listener));
+
     window.addEventListener('message', listener);
 
     return connection.promise;
   }
 
-  private postDisconnectRequest() {
+  private listenEndMessage() {
+    this.setDisconnected();
+
     const disconnection = Promise.withResolvers<void>();
+
     const listener = (msg: MessageEvent<unknown>) => {
       if (msg.origin === window.origin) {
         if (isPraxEndMessageEvent(msg)) {
@@ -147,11 +155,9 @@ class PraxInjection {
       }
     };
 
-    this.setDisconnected();
     void disconnection.promise.finally(() => window.removeEventListener('message', listener));
-    window.addEventListener('message', listener);
 
-    window.postMessage(disconnectMessage, '/');
+    window.addEventListener('message', listener);
 
     return disconnection.promise;
   }

apps/extension/webpack.config.ts

@@ -112,9 +112,8 @@ export default ({
 
   return {
     entry: {
-      'injected-connection-port': path.join(injectDir, 'injected-connection-port.ts'),
+      'injected-listeners': path.join(injectDir, 'injected-listeners.ts'),
       'injected-penumbra-global': path.join(injectDir, 'injected-penumbra-global.ts'),
-      'injected-request-listener': path.join(injectDir, 'injected-request-listener.ts'),
       'offscreen-handler': path.join(entryDir, 'offscreen-handler.ts'),
       'page-root': path.join(entryDir, 'page-root.tsx'),
       'popup-root': path.join(entryDir, 'popup-root.tsx'),
@@ -129,9 +128,8 @@ export default ({
       splitChunks: {
         chunks: chunk => {
           const filesNotToChunk = [
-            'injected-connection-port',
+            'injected-listeners',
             'injected-penumbra-global',
-            'injected-request-listner',
             'service-worker',
             'wasm-build-action',
           ];