[PM-5189] Working through content script port improvement

apps/browser/src/autofill/background/abstractions/overlay.background.ts

@@ -94,8 +94,6 @@ export type BackgroundOnMessageHandlerParams = BackgroundMessageParam & Backgrou
 
 export type OverlayBackgroundExtensionMessageHandlers = {
   [key: string]: CallableFunction;
-
-  autofillOverlayAddNewVaultItem: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
   triggerAutofillOverlayReposition: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
   checkIsInlineMenuCiphersPopulated: ({ sender }: BackgroundSenderParam) => void;
   updateFocusedFieldData: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
@@ -146,6 +144,7 @@ export type PortOnMessageHandlerParams = PortMessageParam & PortConnectionParam;
 export type OverlayContentScriptPortMessageHandlers = {
   [key: string]: CallableFunction;
   autofillOverlayElementClosed: ({ message, port }: PortOnMessageHandlerParams) => void;
+  autofillOverlayAddNewVaultItem: ({ message, port }: PortOnMessageHandlerParams) => void;
 };
 
 export type InlineMenuButtonPortMessageHandlers = {

apps/browser/src/autofill/background/overlay.background.ts

@@ -76,7 +76,6 @@ export class OverlayBackground implements OverlayBackgroundInterface {
   private isFieldCurrentlyFilling: boolean = false;
   private iconsServerUrl: string;
   private readonly extensionMessageHandlers: OverlayBackgroundExtensionMessageHandlers = {
-    autofillOverlayAddNewVaultItem: ({ message, sender }) => this.addNewVaultItem(message, sender),
     triggerAutofillOverlayReposition: ({ sender }) => this.triggerOverlayReposition(sender),
     checkIsInlineMenuCiphersPopulated: ({ sender }) =>
       this.checkIsInlineMenuCiphersPopulated(sender),
@@ -111,6 +110,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
   };
   private readonly contentScriptPortMessageHandlers: OverlayContentScriptPortMessageHandlers = {
     autofillOverlayElementClosed: ({ message, port }) => this.overlayElementClosed(message, port),
+    autofillOverlayAddNewVaultItem: ({ message, port }) => this.addNewVaultItem(message, port),
   };
   private readonly inlineMenuButtonPortMessageHandlers: InlineMenuButtonPortMessageHandlers = {
     triggerDelayedAutofillInlineMenuClosure: ({ port }) => this.triggerDelayedInlineMenuClosure(),
@@ -1015,12 +1015,9 @@ export class OverlayBackground implements OverlayBackgroundInterface {
    * data captured in the extension message.
    *
    * @param login - The login data captured from the extension message
-   * @param sender - The sender of the extension message
+   * @param port - The content script port
    */
-  private async addNewVaultItem(
+  private async addNewVaultItem({ login }: OverlayAddNewItemMessage, port: chrome.runtime.Port) {
-    { login }: OverlayAddNewItemMessage,
-    sender: chrome.runtime.MessageSender,
-  ) {
     if (!login) {
       return;
     }
@@ -1044,7 +1041,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
       collectionIds: cipherView.collectionIds,
     });
 
-    await this.openAddEditVaultItemPopout(sender.tab, { cipherId: cipherView.id });
+    await this.openAddEditVaultItemPopout(port.sender.tab, { cipherId: cipherView.id });
     await BrowserApi.sendMessage("inlineAutofillMenuRefreshAddEditCipher");
   }
 

apps/browser/src/autofill/enums/autofill-overlay.enum.ts

@@ -3,6 +3,9 @@ export const AutofillOverlayElement = {
   List: "autofill-inline-menu-list",
 } as const;
 
+export type AutofillOverlayElementType =
+  (typeof AutofillOverlayElement)[keyof typeof AutofillOverlayElement];
+
 export const AutofillOverlayPort = {
   ContentScript: "autofill-overlay-content-script-port",
   Button: "autofill-inline-menu-button-port",

apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts

@@ -1,10 +1,7 @@
 import { AutofillExtensionMessage } from "../../../content/abstractions/autofill-init";
 import { AutofillOverlayElement } from "../../../enums/autofill-overlay.enum";
-import {
+import { AutofillOverlayContentExtensionMessage } from "../../../services/abstractions/autofill-overlay-content.service";
-  sendExtensionMessage,
+import { generateRandomCustomElementName, setElementStyles } from "../../../utils";
-  generateRandomCustomElementName,
-  setElementStyles,
-} from "../../../utils";
 import {
   InlineMenuExtensionMessageHandlers,
   AutofillInlineMenuContentService as AutofillInlineMenuContentServiceInterface,
@@ -13,7 +10,6 @@ import { AutofillInlineMenuButtonIframe } from "../iframe-content/autofill-inlin
 import { AutofillInlineMenuListIframe } from "../iframe-content/autofill-inline-menu-list-iframe";
 
 export class AutofillInlineMenuContentService implements AutofillInlineMenuContentServiceInterface {
-  private readonly sendExtensionMessage = sendExtensionMessage;
   private readonly generateRandomCustomElementName = generateRandomCustomElementName;
   private readonly setElementStyles = setElementStyles;
   private isFirefoxBrowser =
@@ -427,7 +423,10 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte
    * @param command - The command to send through the port.
    * @param message - The message to send through the port.
    */
-  private sendPortMessage(command: string, message: Omit<AutofillExtensionMessage, "command">) {
+  private sendPortMessage(
+    command: string,
+    message: Omit<AutofillOverlayContentExtensionMessage, "command">,
+  ) {
     this.port.postMessage({ command, ...message });
   }
 

apps/browser/src/autofill/services/abstractions/autofill-overlay-content.service.ts

@@ -1,7 +1,11 @@
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
 
-import { SubFrameOffsetData } from "../../background/abstractions/overlay.background";
+import {
+  OverlayAddNewItemMessage,
+  SubFrameOffsetData,
+} from "../../background/abstractions/overlay.background";
 import { AutofillExtensionMessageParam } from "../../content/abstractions/autofill-init";
+import { AutofillOverlayElementType } from "../../enums/autofill-overlay.enum";
 import AutofillField from "../../models/autofill-field";
 import AutofillPageDetails from "../../models/autofill-page-details";
 import { ElementWithOpId, FormFieldElement } from "../../types";
@@ -34,6 +38,11 @@ export type AutofillOverlayContentExtensionMessageHandlers = {
   destroyAutofillInlineMenuListeners: () => void;
 };
 
+export type AutofillOverlayContentExtensionMessage = {
+  command: string;
+  overlayElement?: AutofillOverlayElementType;
+} & OverlayAddNewItemMessage;
+
 export interface AutofillOverlayContentService {
   pageDetailsUpdateRequired: boolean;
   messageHandlers: AutofillOverlayContentExtensionMessageHandlers;

apps/browser/src/autofill/services/autofill-overlay-content.service.ts

@@ -31,6 +31,7 @@ import {
 } from "../utils";
 
 import {
+  AutofillOverlayContentExtensionMessage,
   AutofillOverlayContentExtensionMessageHandlers,
   AutofillOverlayContentService as AutofillOverlayContentServiceInterface,
   OpenAutofillInlineMenuOptions,
@@ -233,7 +234,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
       hostname: globalThis.document.location.hostname,
     };
 
-    void this.sendExtensionMessage("autofillOverlayAddNewVaultItem", { login });
+    this.sendPortMessage("autofillOverlayAddNewVaultItem", { login });
   }
 
   /**
@@ -1121,6 +1122,19 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
     );
   }
 
+  /**
+   * Sends a message through the port to the background script.
+   *
+   * @param command - The command to send through the port.
+   * @param message - The message to send through the port.
+   */
+  private sendPortMessage(
+    command: string,
+    message: Omit<AutofillOverlayContentExtensionMessage, "command">,
+  ) {
+    this.port.postMessage({ command, ...message });
+  }
+
   /**
    * Clears the user interaction event timeout. This is used to ensure that
    * the overlay is not repositioned while the user is interacting with it.