From e30a1ebc5d2f36b8fbf3e92b13a6f7426e366e44 Mon Sep 17 00:00:00 2001 From: Cesar Gonzalez Date: Wed, 19 Jun 2024 02:08:14 -0500 Subject: [PATCH] [PM-5189] Working through content script port improvement --- .../abstractions/overlay.background.ts | 3 +-- .../autofill/background/overlay.background.ts | 11 ++++------- .../src/autofill/enums/autofill-overlay.enum.ts | 3 +++ .../autofill-inline-menu-content.service.ts | 13 ++++++------- .../autofill-overlay-content.service.ts | 11 ++++++++++- .../services/autofill-overlay-content.service.ts | 16 +++++++++++++++- 6 files changed, 39 insertions(+), 18 deletions(-) diff --git a/apps/browser/src/autofill/background/abstractions/overlay.background.ts b/apps/browser/src/autofill/background/abstractions/overlay.background.ts index 6cbaebc6e4..5e79585306 100644 --- a/apps/browser/src/autofill/background/abstractions/overlay.background.ts +++ b/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 = { diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts index ea925a20ca..bbf5d2ccee 100644 --- a/apps/browser/src/autofill/background/overlay.background.ts +++ b/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( - { login }: OverlayAddNewItemMessage, - sender: chrome.runtime.MessageSender, - ) { + private async addNewVaultItem({ login }: OverlayAddNewItemMessage, port: chrome.runtime.Port) { 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"); } diff --git a/apps/browser/src/autofill/enums/autofill-overlay.enum.ts b/apps/browser/src/autofill/enums/autofill-overlay.enum.ts index ea9eb0eb40..c0c958de68 100644 --- a/apps/browser/src/autofill/enums/autofill-overlay.enum.ts +++ b/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", diff --git a/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts b/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts index dbdc7d6893..e44cc2e3bf 100644 --- a/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts +++ b/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 { - sendExtensionMessage, - generateRandomCustomElementName, - setElementStyles, -} from "../../../utils"; +import { AutofillOverlayContentExtensionMessage } from "../../../services/abstractions/autofill-overlay-content.service"; +import { 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) { + private sendPortMessage( + command: string, + message: Omit, + ) { this.port.postMessage({ command, ...message }); } diff --git a/apps/browser/src/autofill/services/abstractions/autofill-overlay-content.service.ts b/apps/browser/src/autofill/services/abstractions/autofill-overlay-content.service.ts index 79d3153605..a168ebe72c 100644 --- a/apps/browser/src/autofill/services/abstractions/autofill-overlay-content.service.ts +++ b/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; diff --git a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts index 12824e92b3..4030ec6fe5 100644 --- a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts +++ b/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, + ) { + 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.