diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts index c47ab8282a7..dfb7daf32cb 100644 --- a/apps/browser/src/autofill/background/overlay.background.ts +++ b/apps/browser/src/autofill/background/overlay.background.ts @@ -962,13 +962,19 @@ class OverlayBackground implements OverlayBackgroundInterface { port.onDisconnect.addListener(this.handlePortOnDisconnect); port.postMessage({ command: `initAutofillOverlay${isOverlayListPort ? "List" : "Button"}`, + iframeUrl: chrome.runtime.getURL(`overlay/${isOverlayListPort ? "list" : "button"}.html`), + pageTitle: chrome.i18n.getMessage( + isOverlayListPort ? "bitwardenVault" : "bitwardenOverlayButton", + ), authStatus: await this.getAuthStatus(), styleSheetUrl: chrome.runtime.getURL(`overlay/${isOverlayListPort ? "list" : "button"}.css`), theme: await firstValueFrom(this.themeStateService.selectedTheme$), translations: this.getTranslations(), ciphers: isOverlayListPort ? await this.getOverlayCipherData() : null, - messageConnectorUrl: chrome.runtime.getURL("overlay/message-connector.html"), portKey: this.portKeyForTab[port.sender.tab.id], + portName: isOverlayListPort + ? AutofillOverlayPort.ListMessageConnector + : AutofillOverlayPort.ButtonMessageConnector, }); void this.updateOverlayPosition( { diff --git a/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-button.ts b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-button.ts index b8164c6fe01..122b245d6e8 100644 --- a/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-button.ts +++ b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-button.ts @@ -7,7 +7,6 @@ type UpdateAuthStatusMessage = OverlayButtonMessage & { authStatus: Authenticati type InitAutofillOverlayButtonMessage = UpdateAuthStatusMessage & { styleSheetUrl: string; translations: Record; - messageConnectorUrl: string; portKey: string; }; diff --git a/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-iframe.service.ts b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-iframe.service.ts index fcc8a9f5f6e..ac2d28afbf2 100644 --- a/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-iframe.service.ts +++ b/apps/browser/src/autofill/overlay/abstractions/autofill-overlay-iframe.service.ts @@ -2,6 +2,7 @@ type AutofillOverlayIframeExtensionMessage = { command: string; styles?: Partial; theme?: string; + portKey?: string; }; type AutofillOverlayIframeWindowMessageHandlers = { @@ -15,6 +16,7 @@ type AutofillOverlayIframeExtensionMessageParam = { type BackgroundPortMessageHandlers = { [key: string]: CallableFunction; + initAutofillOverlayButton: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void; initAutofillOverlayList: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void; updateIframePosition: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void; updateOverlayHidden: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void; @@ -22,7 +24,7 @@ type BackgroundPortMessageHandlers = { }; interface AutofillOverlayIframeService { - initOverlayIframe(initStyles: Partial, ariaAlert?: string): void; + initMenuIframe(): void; } export { diff --git a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-button-iframe.ts b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-button-iframe.ts index 4f5d64b3cb8..9d4f415ecfd 100644 --- a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-button-iframe.ts +++ b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-button-iframe.ts @@ -6,7 +6,6 @@ class AutofillOverlayButtonIframe extends AutofillOverlayIframeElement { constructor(element: HTMLElement) { super( element, - "overlay/button.html", AutofillOverlayPort.Button, { background: "transparent", diff --git a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe-element.ts b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe-element.ts index ed61c1eb8f1..656d01bb125 100644 --- a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe-element.ts +++ b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe-element.ts @@ -3,7 +3,6 @@ import AutofillOverlayIframeService from "./autofill-overlay-iframe.service"; class AutofillOverlayIframeElement { constructor( element: HTMLElement, - iframePath: string, portName: string, initStyles: Partial, iframeTitle: string, @@ -11,11 +10,13 @@ class AutofillOverlayIframeElement { ) { const shadow: ShadowRoot = element.attachShadow({ mode: "closed" }); const autofillOverlayIframeService = new AutofillOverlayIframeService( - iframePath, - portName, shadow, + portName, + initStyles, + iframeTitle, + ariaAlert, ); - autofillOverlayIframeService.initOverlayIframe(initStyles, iframeTitle, ariaAlert); + autofillOverlayIframeService.initMenuIframe(); } } diff --git a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.ts b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.ts index 64664be8fdd..b8e7486a18a 100644 --- a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.ts +++ b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-iframe.service.ts @@ -11,6 +11,7 @@ import { class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterface { private sendExtensionMessage = sendExtensionMessage; private port: chrome.runtime.Port | null = null; + private portKey: string; private iframeMutationObserver: MutationObserver; private iframe: HTMLIFrameElement; private ariaAlertElement: HTMLDivElement; @@ -34,7 +35,7 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf private defaultIframeAttributes: Record = { src: "", title: "", - sandbox: "allow-scripts", + // sandbox: "allow-scripts", allowtransparency: "true", tabIndex: "-1", }; @@ -42,6 +43,7 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf private mutationObserverIterations = 0; private mutationObserverIterationsResetTimeout: number | NodeJS.Timeout; private readonly backgroundPortMessageHandlers: BackgroundPortMessageHandlers = { + initAutofillOverlayButton: ({ message }) => this.initAutofillOverlay(message), initAutofillOverlayList: ({ message }) => this.initAutofillOverlayList(message), updateIframePosition: ({ message }) => this.updateIframePosition(message.styles), updateOverlayHidden: ({ message }) => this.updateElementStyles(this.iframe, message.styles), @@ -49,9 +51,11 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf }; constructor( - private iframePath: string, - private portName: string, private shadow: ShadowRoot, + private portName: string, + private initStyles: Partial, + private iframeTitle: string, + private ariaAlert?: string, ) { this.iframeMutationObserver = new MutationObserver(this.handleMutations); } @@ -63,29 +67,20 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf * create an aria alert element to announce to screen readers when the iframe * is loaded. The end result is append to the shadowDOM of the custom element * that is declared. - * - * - * @param initStyles - Initial styles to apply to the iframe - * @param iframeTitle - Title to apply to the iframe - * @param ariaAlert - Text to announce to screen readers when the iframe is loaded */ - initOverlayIframe( - initStyles: Partial, - iframeTitle: string, - ariaAlert?: string, - ) { - this.defaultIframeAttributes.src = chrome.runtime.getURL(this.iframePath); - this.defaultIframeAttributes.title = iframeTitle; + initMenuIframe() { + this.defaultIframeAttributes.src = chrome.runtime.getURL("overlay/menu.html"); + this.defaultIframeAttributes.title = this.iframeTitle; this.iframe = globalThis.document.createElement("iframe"); - this.updateElementStyles(this.iframe, { ...this.iframeStyles, ...initStyles }); + this.updateElementStyles(this.iframe, { ...this.iframeStyles, ...this.initStyles }); for (const [attribute, value] of Object.entries(this.defaultIframeAttributes)) { this.iframe.setAttribute(attribute, value); } this.iframe.addEventListener(EVENTS.LOAD, this.setupPortMessageListener); - if (ariaAlert) { - this.createAriaAlertElement(ariaAlert); + if (this.ariaAlert) { + this.createAriaAlertElement(this.ariaAlert); } this.shadow.appendChild(this.iframe); @@ -185,9 +180,14 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf return; } - this.iframe.contentWindow?.postMessage(message, "*"); + this.postMessageToIFrame(message); }; + private initAutofillOverlay(message: AutofillOverlayIframeExtensionMessage) { + this.portKey = message.portKey; + this.postMessageToIFrame(message); + } + /** * Handles messages sent from the iframe to the extension background script. * Will adjust the border element to fit the user's set theme. @@ -196,6 +196,7 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf */ private initAutofillOverlayList(message: AutofillOverlayIframeExtensionMessage) { const { theme } = message; + this.portKey = message.portKey; let borderColor: string; let verifiedTheme = theme; if (verifiedTheme === ThemeType.System) { @@ -218,7 +219,11 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf } message.theme = verifiedTheme; - this.iframe.contentWindow?.postMessage(message, "*"); + this.postMessageToIFrame(message); + } + + private postMessageToIFrame(message: any) { + this.iframe.contentWindow?.postMessage({ portKey: this.portKey, ...message }, "*"); } /** @@ -247,10 +252,10 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf .querySelector("meta[name='color-scheme']") ?.getAttribute("content"); - this.iframe.contentWindow?.postMessage( - { command: "updateOverlayPageColorScheme", colorScheme: colorSchemeValue || "normal" }, - "*", - ); + this.postMessageToIFrame({ + command: "updateOverlayPageColorScheme", + colorScheme: colorSchemeValue || "normal", + }); } /** diff --git a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-list-iframe.ts b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-list-iframe.ts index 23df6581546..8136bd9a580 100644 --- a/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-list-iframe.ts +++ b/apps/browser/src/autofill/overlay/iframe-content/autofill-overlay-list-iframe.ts @@ -6,7 +6,6 @@ class AutofillOverlayListIframe extends AutofillOverlayIframeElement { constructor(element: HTMLElement) { super( element, - "overlay/list.html", AutofillOverlayPort.List, { height: "0px", diff --git a/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.ts b/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.ts index 3b5812a72a4..1921823dd7a 100644 --- a/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.ts +++ b/apps/browser/src/autofill/overlay/pages/button/autofill-overlay-button.ts @@ -53,16 +53,9 @@ class AutofillOverlayButton extends AutofillOverlayPageElement { authStatus, styleSheetUrl, translations, - messageConnectorUrl, portKey, }: InitAutofillOverlayButtonMessage) { - const linkElement = await this.initOverlayPage( - "button", - styleSheetUrl, - translations, - messageConnectorUrl, - portKey, - ); + const linkElement = await this.initOverlayPage("button", styleSheetUrl, translations, portKey); this.buttonElement.tabIndex = -1; this.buttonElement.type = "button"; this.buttonElement.classList.add("overlay-button"); diff --git a/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts b/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts index a4ac103da9a..94b3fc994de 100644 --- a/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts +++ b/apps/browser/src/autofill/overlay/pages/list/autofill-overlay-list.ts @@ -44,7 +44,6 @@ class AutofillOverlayList extends AutofillOverlayPageElement { * @param theme - The theme to use for the overlay list. * @param authStatus - The current authentication status. * @param ciphers - The ciphers to display in the overlay list. - * @param messageConnectorUrl - The URL of the message connector to use. * @param portKey - Background generated key that allows the port to communicate with the background. */ private async initAutofillOverlayList({ @@ -53,16 +52,9 @@ class AutofillOverlayList extends AutofillOverlayPageElement { theme, authStatus, ciphers, - messageConnectorUrl, portKey, }: InitAutofillOverlayListMessage) { - const linkElement = await this.initOverlayPage( - "list", - styleSheetUrl, - translations, - messageConnectorUrl, - portKey, - ); + const linkElement = await this.initOverlayPage("list", styleSheetUrl, translations, portKey); const themeClass = `theme_${theme}`; globalThis.document.documentElement.classList.add(themeClass); diff --git a/apps/browser/src/autofill/overlay/pages/menu/autofill-overlay-menu-container.ts b/apps/browser/src/autofill/overlay/pages/menu/autofill-overlay-menu-container.ts new file mode 100644 index 00000000000..c6f34a5bcd3 --- /dev/null +++ b/apps/browser/src/autofill/overlay/pages/menu/autofill-overlay-menu-container.ts @@ -0,0 +1,132 @@ +import { EVENTS } from "@bitwarden/common/autofill/constants"; + +import { setElementStyles } from "../../../utils"; + +export class AutofillOverlayMenuContainer { + private initMessage: any; + + private extensionOriginsSet: Set; + private port: chrome.runtime.Port | null = null; + private portName: string; + private iframe: HTMLIFrameElement; + private iframeStyles: Partial = { + all: "initial", + position: "fixed", + top: "0", + left: "0", + width: "100%", + height: "100%", + display: "block", + zIndex: "2147483647", + lineHeight: "0", + overflow: "hidden", + visibility: "visible", + clipPath: "none", + pointerEvents: "auto", + margin: "0", + padding: "0", + colorScheme: "normal", + }; + private defaultIframeAttributes: Record = { + src: "", + title: "", + // sandbox: "allow-scripts", + allowtransparency: "true", + tabIndex: "-1", + }; + private windowMessageHandlers: Record void> = { + initAutofillOverlayList: (message: any) => this.handleInitOverlayIframe(message), + initAutofillOverlayButton: (message: any) => this.handleInitOverlayIframe(message), + }; + private backgroundPortMessageHandlers: Record void> = {}; + + constructor() { + this.extensionOriginsSet = new Set([ + chrome.runtime.getURL("").slice(0, -1).toLowerCase(), // Remove the trailing slash and normalize the extension url to lowercase + "null", + ]); + + globalThis.addEventListener("message", this.handleWindowMessage); + } + + private handleInitOverlayIframe(message: any) { + this.initMessage = message; + this.defaultIframeAttributes.src = message.iframeUrl; + this.defaultIframeAttributes.title = message.pageTitle; + this.portName = message.portName; + + this.iframe = globalThis.document.createElement("iframe"); + setElementStyles(this.iframe, this.iframeStyles, true); + for (const [attribute, value] of Object.entries(this.defaultIframeAttributes)) { + this.iframe.setAttribute(attribute, value); + } + this.iframe.addEventListener(EVENTS.LOAD, this.setupPortMessageListener); + + globalThis.document.body.appendChild(this.iframe); + } + + private setupPortMessageListener = () => { + this.port = chrome.runtime.connect({ name: this.portName }); + this.port.onMessage.addListener(this.handlePortMessage); + + this.iframe.contentWindow?.postMessage(this.initMessage, "*"); + }; + + private handlePortMessage = (message: any, port: chrome.runtime.Port) => { + if (port.name !== this.portName) { + return; + } + + if (this.backgroundPortMessageHandlers[message.command]) { + this.backgroundPortMessageHandlers[message.command]({ message, port }); + return; + } + + this.iframe.contentWindow?.postMessage(message, "*"); + }; + + private handleWindowMessage = (event: MessageEvent) => { + const message = event.data; + if (this.isForeignWindowMessage(event)) { + return; + } + + if (this.windowMessageHandlers[message.command]) { + this.windowMessageHandlers[message.command](message); + return; + } + + if (event.source === globalThis.parent) { + this.iframe?.contentWindow?.postMessage(message, "*"); + return; + } + + this.port?.postMessage(message); + }; + + private isForeignWindowMessage(event: MessageEvent) { + if (!event.data.portKey) { + return true; + } + + if (globalThis.parent === event.source) { + return false; + } + + return ( + this.iframe?.contentWindow !== event.source || + !this.isFromExtensionOrigin(event.origin.toLowerCase()) + ); + } + + /** + * Chrome returns null for any sandboxed iframe sources. + * Firefox references the extension URI as its origin. + * Any other origin value is a security risk. + * + * @param messageOrigin - The origin of the window message + */ + private isFromExtensionOrigin(messageOrigin: string): boolean { + return this.extensionOriginsSet.has(messageOrigin); + } +} diff --git a/apps/browser/src/autofill/overlay/pages/menu/bootstrap-autofill-overlay-menu-container.ts b/apps/browser/src/autofill/overlay/pages/menu/bootstrap-autofill-overlay-menu-container.ts new file mode 100644 index 00000000000..0c0f19be86f --- /dev/null +++ b/apps/browser/src/autofill/overlay/pages/menu/bootstrap-autofill-overlay-menu-container.ts @@ -0,0 +1,3 @@ +import { AutofillOverlayMenuContainer } from "./autofill-overlay-menu-container"; + +(() => new AutofillOverlayMenuContainer())(); diff --git a/apps/browser/src/autofill/overlay/pages/message-connector/message-connector.html b/apps/browser/src/autofill/overlay/pages/menu/menu.html similarity index 80% rename from apps/browser/src/autofill/overlay/pages/message-connector/message-connector.html rename to apps/browser/src/autofill/overlay/pages/menu/menu.html index 77ea7c9ae3a..c850a1bc9c8 100644 --- a/apps/browser/src/autofill/overlay/pages/message-connector/message-connector.html +++ b/apps/browser/src/autofill/overlay/pages/menu/menu.html @@ -1,7 +1,7 @@ - Autofill overlay message connector + Bitwarden inline menu diff --git a/apps/browser/src/autofill/overlay/pages/message-connector/bootstrap-autofill-overlay-message-connector.ts b/apps/browser/src/autofill/overlay/pages/message-connector/bootstrap-autofill-overlay-message-connector.ts deleted file mode 100644 index ef1ba474b9e..00000000000 --- a/apps/browser/src/autofill/overlay/pages/message-connector/bootstrap-autofill-overlay-message-connector.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { AutofillOverlayMessageConnector } from "./message-connector"; - -(() => new AutofillOverlayMessageConnector())(); diff --git a/apps/browser/src/autofill/overlay/pages/message-connector/message-connector.ts b/apps/browser/src/autofill/overlay/pages/message-connector/message-connector.ts deleted file mode 100644 index 37333a30157..00000000000 --- a/apps/browser/src/autofill/overlay/pages/message-connector/message-connector.ts +++ /dev/null @@ -1,44 +0,0 @@ -export class AutofillOverlayMessageConnector { - private extensionOriginsSet: Set; - private port: chrome.runtime.Port | null = null; - - constructor() { - globalThis.addEventListener("message", this.handleWindowMessage); - - this.extensionOriginsSet = new Set([ - chrome.runtime.getURL("").slice(0, -1).toLowerCase(), // Remove the trailing slash and normalize the extension url to lowercase - "null", - ]); - } - - private handleWindowMessage = (event: MessageEvent) => { - const message = event.data; - if ( - event.source !== globalThis.parent || - !this.isFromExtensionOrigin(event.origin.toLowerCase()) || - !message.portKey - ) { - return; - } - - if (this.port) { - this.port.postMessage(message); - return; - } - - if (message.command === "initAutofillOverlayPort") { - this.port = chrome.runtime.connect({ name: message.portName }); - } - }; - - /** - * Chrome returns null for any sandboxed iframe sources. - * Firefox references the extension URI as its origin. - * Any other origin value is a security risk. - * - * @param messageOrigin - The origin of the window message - */ - private isFromExtensionOrigin(messageOrigin: string): boolean { - return this.extensionOriginsSet.has(messageOrigin); - } -} diff --git a/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.ts b/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.ts index d641a42d00e..6ce0d7685a6 100644 --- a/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.ts +++ b/apps/browser/src/autofill/overlay/pages/shared/autofill-overlay-page-element.ts @@ -1,6 +1,6 @@ import { EVENTS } from "@bitwarden/common/autofill/constants"; -import { AutofillOverlayPort, RedirectFocusDirection } from "../../../utils/autofill-overlay.enum"; +import { RedirectFocusDirection } from "../../../utils/autofill-overlay.enum"; import { AutofillOverlayPageElementWindowMessage, WindowMessageHandlers, @@ -27,14 +27,12 @@ class AutofillOverlayPageElement extends HTMLElement { * @param elementName - The name of the element, e.g. "button" or "list" * @param styleSheetUrl - The URL of the stylesheet to apply to the page * @param translations - The translations to apply to the page - * @param messageConnectorUrl - The URL of the message connector to use * @param portKey - Background generated key that allows the port to communicate with the background */ protected async initOverlayPage( elementName: "button" | "list", styleSheetUrl: string, translations: Record, - messageConnectorUrl: string, portKey: string, ): Promise { this.portKey = portKey; @@ -43,8 +41,6 @@ class AutofillOverlayPageElement extends HTMLElement { globalThis.document.documentElement.setAttribute("lang", this.getTranslation("locale")); globalThis.document.head.title = this.getTranslation(`${elementName}PageTitle`); - await this.initMessageConnector(messageConnectorUrl, elementName); - this.shadowDom.innerHTML = ""; const linkElement = globalThis.document.createElement("link"); linkElement.setAttribute("rel", "stylesheet"); @@ -62,30 +58,30 @@ class AutofillOverlayPageElement extends HTMLElement { * @param messageConnectorUrl - The URL of the message connector to use * @param elementName - The name of the element, e.g. "button" or "list" */ - private initMessageConnector(messageConnectorUrl: string, elementName: "button" | "list") { - this.messageConnectorIframe = globalThis.document.createElement("iframe"); - this.messageConnectorIframe.src = messageConnectorUrl; - this.messageConnectorIframe.style.opacity = "0"; - this.messageConnectorIframe.style.position = "absolute"; - this.messageConnectorIframe.style.width = "0"; - this.messageConnectorIframe.style.height = "0"; - this.messageConnectorIframe.style.border = "none"; - this.messageConnectorIframe.style.pointerEvents = "none"; - globalThis.document.body.appendChild(this.messageConnectorIframe); - - return new Promise((resolve) => { - this.messageConnectorIframe.addEventListener(EVENTS.LOAD, () => { - this.postMessageToConnector({ - command: `initAutofillOverlayPort`, - portName: - elementName === "list" - ? AutofillOverlayPort.ListMessageConnector - : AutofillOverlayPort.ButtonMessageConnector, - }); - resolve(); - }); - }); - } + // private initMessageConnector(messageConnectorUrl: string, elementName: "button" | "list") { + // this.messageConnectorIframe = globalThis.document.createElement("iframe"); + // this.messageConnectorIframe.src = messageConnectorUrl; + // this.messageConnectorIframe.style.opacity = "0"; + // this.messageConnectorIframe.style.position = "absolute"; + // this.messageConnectorIframe.style.width = "0"; + // this.messageConnectorIframe.style.height = "0"; + // this.messageConnectorIframe.style.border = "none"; + // this.messageConnectorIframe.style.pointerEvents = "none"; + // globalThis.document.body.appendChild(this.messageConnectorIframe); + // + // return new Promise((resolve) => { + // this.messageConnectorIframe.addEventListener(EVENTS.LOAD, () => { + // this.postMessageToConnector({ + // command: `initAutofillOverlayPort`, + // portName: + // elementName === "list" + // ? AutofillOverlayPort.ListMessageConnector + // : AutofillOverlayPort.ButtonMessageConnector, + // }); + // resolve(); + // }); + // }); + // } /** * Posts a window message to the parent window. @@ -93,10 +89,12 @@ class AutofillOverlayPageElement extends HTMLElement { * @param message - The message to post */ protected postMessageToConnector(message: AutofillOverlayPageElementWindowMessage) { - this.messageConnectorIframe.contentWindow.postMessage( - { portKey: this.portKey, ...message }, - "*", - ); + globalThis.parent.postMessage({ portKey: this.portKey, ...message }, "*"); + + // this.messageConnectorIframe.contentWindow.postMessage( + // { portKey: this.portKey, ...message }, + // "*", + // ); } /** diff --git a/apps/browser/src/manifest.json b/apps/browser/src/manifest.json index 89421309b74..f98591dcaa4 100644 --- a/apps/browser/src/manifest.json +++ b/apps/browser/src/manifest.json @@ -115,7 +115,7 @@ "images/icon38_locked.png", "overlay/button.html", "overlay/list.html", - "overlay/message-connector.html", + "overlay/menu.html", "popup/fonts/*" ], "applications": { diff --git a/apps/browser/src/manifest.v3.json b/apps/browser/src/manifest.v3.json index 23a0e06c4d0..6f1bcfb7739 100644 --- a/apps/browser/src/manifest.v3.json +++ b/apps/browser/src/manifest.v3.json @@ -119,7 +119,7 @@ "images/icon38_locked.png", "overlay/button.html", "overlay/list.html", - "overlay/message-connector.html", + "overlay/menu.html", "popup/fonts/*" ], "matches": [""] diff --git a/apps/browser/webpack.config.js b/apps/browser/webpack.config.js index 82d12086a41..0a6fd0172e4 100644 --- a/apps/browser/webpack.config.js +++ b/apps/browser/webpack.config.js @@ -117,9 +117,9 @@ const plugins = [ chunks: ["overlay/list"], }), new HtmlWebpackPlugin({ - template: "./src/autofill/overlay/pages/message-connector/message-connector.html", - filename: "overlay/message-connector.html", - chunks: ["overlay/message-connector"], + template: "./src/autofill/overlay/pages/menu/menu.html", + filename: "overlay/menu.html", + chunks: ["overlay/menu"], }), new CopyWebpackPlugin({ patterns: [ @@ -178,8 +178,8 @@ const mainConfig = { "notification/bar": "./src/autofill/notification/bar.ts", "overlay/button": "./src/autofill/overlay/pages/button/bootstrap-autofill-overlay-button.ts", "overlay/list": "./src/autofill/overlay/pages/list/bootstrap-autofill-overlay-list.ts", - "overlay/message-connector": - "./src/autofill/overlay/pages/message-connector/bootstrap-autofill-overlay-message-connector.ts", + "overlay/menu": + "./src/autofill/overlay/pages/menu/bootstrap-autofill-overlay-menu-container.ts", "encrypt-worker": "../../libs/common/src/platform/services/cryptography/encrypt.worker.ts", "content/lp-fileless-importer": "./src/tools/content/lp-fileless-importer.ts", "content/send-on-installed-message": "./src/vault/content/send-on-installed-message.ts",