[EC-598] feat: add ability to return responses

apps/browser/src/background/runtime.background.ts

@@ -205,11 +205,7 @@ export default class RuntimeBackground {
         this.platformUtilsService.copyToClipboard(msg.identifier, { window: window });
         break;
       case "fido2RegisterCredentialRequest":
-        BrowserApi.tabSendMessageData(
+        sendResponse(await this.main.fido2Service.createCredential(msg.data));
-          sender.tab,
-          "fido2RegisterCredentialResponse",
-          await this.main.fido2Service.createCredential(msg.data)
-        );
         break;
       default:
         break;

apps/browser/src/content/webauthn/content-script.ts

@@ -8,19 +8,24 @@ const s = document.createElement("script");
 s.src = chrome.runtime.getURL("content/webauthn/page-script.js");
 (document.head || document.documentElement).appendChild(s);
 
-const messenger = Messenger.createInExtensionContext(window, chrome.runtime.connect());
+const messenger = Messenger.forDOMCommunication(window);
 
 messenger.addHandler(async (message) => {
   if (message.type === MessageType.CredentialCreationRequest) {
-    chrome.runtime.sendMessage({
+    return new Promise((resolve, reject) => {
-      command: "fido2RegisterCredentialRequest",
+      chrome.runtime.sendMessage(
-      data: message.data,
+        {
+          command: "fido2RegisterCredentialRequest",
+          data: message.data,
+        },
+        (response) => {
+          resolve({
+            type: MessageType.CredentialCreationResponse,
+            approved: true,
+          });
+        }
+      );
     });
-
-    return {
-      type: MessageType.CredentialCreationResponse,
-      approved: true,
-    };
   }
 
   return undefined;

apps/browser/src/content/webauthn/messaging/messenger.ts

@@ -2,7 +2,7 @@ import { concatMap, filter, firstValueFrom, Observable } from "rxjs";
 
 import { Message } from "./message";
 
-type PostMessageFunction = Window["postMessage"] | chrome.runtime.Port["postMessage"];
+type PostMessageFunction = (message: MessageWithMetadata) => void;
 
 type Channel = {
   messages$: Observable<MessageWithMetadata>;
@@ -17,22 +17,7 @@ type MessageWithMetadata = Message & { metadata: Metadata };
 // If you see this in a code review please comment on it!
 
 export class Messenger {
-  static createInPageContext(window: Window) {
+  static forDOMCommunication(window: Window) {
-    return new Messenger({
-      postMessage: window.postMessage.bind(window),
-      messages$: new Observable((subscriber) => {
-        const eventListener = (event: MessageEvent<MessageWithMetadata>) => {
-          subscriber.next(event.data);
-        };
-
-        window.addEventListener("message", eventListener);
-
-        return () => window.removeEventListener("message", eventListener);
-      }),
-    });
-  }
-
-  static createInExtensionContext(window: Window, port: chrome.runtime.Port) {
     return new Messenger({
       postMessage: window.postMessage.bind(window),
       messages$: new Observable((subscriber) => {

apps/browser/src/content/webauthn/page-script.ts

@@ -9,7 +9,7 @@ const browserCredentials = {
   get: navigator.credentials.get.bind(navigator.credentials),
 };
 
-const messenger = Messenger.createInPageContext(window);
+const messenger = Messenger.forDOMCommunication(window);
 
 navigator.credentials.create = async (options?: CredentialCreationOptions): Promise<Credential> => {
   await messenger.request({

libs/common/src/services/fido2/fido2.service.ts

@@ -7,7 +7,7 @@ export class Fido2Service implements Fido2ServiceAbstraction {
   createCredential(params: CredentialRegistrationParams): unknown {
     // eslint-disable-next-line no-console
     console.log("Fido2Service.registerCredential");
-    return undefined;
+    return "createCredential response";
   }
 
   assertCredential(): unknown {