bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-19 09:43:23 +00:00
Code Issues Releases Wiki Activity

[PM-5189] Fixing issue found with how we handle re-injecting content scripts after the extension has been reloaded

Browse Source
This commit is contained in:
Cesar Gonzalez
2024-03-21 13:44:48 -05:00
parent aea2a80c08
commit 68514ace53
7 changed files with 21 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/browser/src/autofill/background/overlay.background.ts
View File

@@ -623,15 +623,11 @@ class OverlayBackground implements OverlayBackgroundInterface {
*/ */
private handleOverlayButtonClicked(port: chrome.runtime.Port) { private handleOverlayButtonClicked(port: chrome.runtime.Port) {
if (this.userAuthStatus !== AuthenticationStatus.Unlocked) { if (this.userAuthStatus !== AuthenticationStatus.Unlocked) {
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. void this.unlockVault(port);
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.unlockVault(port);
return; return;
} }
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. void this.openOverlay(false, true);
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.openOverlay(false, true);
} }
/** /**
@@ -737,9 +733,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
return; return;
} }
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. void BrowserApi.tabSendMessageData(sender.tab, "redirectOverlayFocusOut", { direction });
// eslint-disable-next-line @typescript-eslint/no-floating-promises
BrowserApi.tabSendMessageData(sender.tab, "redirectOverlayFocusOut", { direction });
} }
/** /**

1
apps/browser/src/autofill/content/autofill-init.ts
View File

@@ -317,6 +317,7 @@ class AutofillInit implements AutofillInitInterface {
chrome.runtime.onMessage.removeListener(this.handleExtensionMessage); chrome.runtime.onMessage.removeListener(this.handleExtensionMessage);
this.collectAutofillContentService.destroy(); this.collectAutofillContentService.destroy();
this.autofillOverlayContentService?.destroy(); this.autofillOverlayContentService?.destroy();
this.inlineMenuElements?.destroy();
this.clearSendCollectDetailsMessageTimeout(); this.clearSendCollectDetailsMessageTimeout();
} }
} }

2
apps/browser/src/autofill/content/bootstrap-autofill-overlay.ts
View File

@@ -8,7 +8,7 @@ import AutofillInit from "./autofill-init";
if (!windowContext.bitwardenAutofillInit) { if (!windowContext.bitwardenAutofillInit) {
const autofillOverlayContentService = new AutofillOverlayContentService(); const autofillOverlayContentService = new AutofillOverlayContentService();
let inlineMenuElements: InlineMenuElements; let inlineMenuElements: InlineMenuElements;
if (globalThis.parent === globalThis.top) { if (globalThis.self === globalThis.top) {
inlineMenuElements = new InlineMenuElements(); inlineMenuElements = new InlineMenuElements();
} }
windowContext.bitwardenAutofillInit = new AutofillInit( windowContext.bitwardenAutofillInit = new AutofillInit(

1
apps/browser/src/autofill/overlay/abstractions/inline-menu-elements.ts
View File

@@ -11,4 +11,5 @@ export type InlineMenuExtensionMessageHandlers = {
export interface InlineMenuElements { export interface InlineMenuElements {
extensionMessageHandlers: InlineMenuExtensionMessageHandlers; extensionMessageHandlers: InlineMenuExtensionMessageHandlers;
destroy: () => void;
} }

1
apps/browser/src/autofill/overlay/content/inline-menu-elements.ts
View File

@@ -422,5 +422,6 @@ export class InlineMenuElements implements InlineMenuElementsInterface {
} }
destroy() { destroy() {
this.documentElementMutationObserver?.disconnect(); this.documentElementMutationObserver?.disconnect();
this.removeInlineMenu({ forceClose: true });
} }
} }

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

@@ -7,15 +7,8 @@ import { EVENTS, AutofillOverlayVisibility } from "@bitwarden/common/autofill/co
import { FocusedFieldData } from "../background/abstractions/overlay.background"; import { FocusedFieldData } from "../background/abstractions/overlay.background";
import AutofillField from "../models/autofill-field"; import AutofillField from "../models/autofill-field";
// import AutofillOverlayButtonIframe from "../overlay/iframe-content/autofill-overlay-button-iframe";
// import AutofillOverlayListIframe from "../overlay/iframe-content/autofill-overlay-list-iframe";
import { ElementWithOpId, FillableFormFieldElement, FormFieldElement } from "../types"; import { ElementWithOpId, FillableFormFieldElement, FormFieldElement } from "../types";
import { import { elementIsFillableFormField, sendExtensionMessage } from "../utils";
elementIsFillableFormField,
// generateRandomCustomElementName,
sendExtensionMessage,
// setElementStyles,
} from "../utils";
import { AutofillOverlayElement, RedirectFocusDirection } from "../utils/autofill-overlay.enum"; import { AutofillOverlayElement, RedirectFocusDirection } from "../utils/autofill-overlay.enum";
import { import {
@@ -26,15 +19,9 @@ import {
import { AutoFillConstants } from "./autofill-constants"; import { AutoFillConstants } from "./autofill-constants";
class AutofillOverlayContentService implements AutofillOverlayContentServiceInterface { class AutofillOverlayContentService implements AutofillOverlayContentServiceInterface {
// isFieldCurrentlyFocused = false;
// isCurrentlyFilling = false;
isOverlayCiphersPopulated = false; isOverlayCiphersPopulated = false;
pageDetailsUpdateRequired = false; pageDetailsUpdateRequired = false;
autofillOverlayVisibility: number; autofillOverlayVisibility: number;
// private isFirefoxBrowser =
// globalThis.navigator.userAgent.indexOf(" Firefox/") !== -1 ||
// globalThis.navigator.userAgent.indexOf(" Gecko/") !== -1;
// private readonly generateRandomCustomElementName = generateRandomCustomElementName;
private readonly findTabs = tabbable; private readonly findTabs = tabbable;
private readonly sendExtensionMessage = sendExtensionMessage; private readonly sendExtensionMessage = sendExtensionMessage;
private formFieldElements: Set<ElementWithOpId<FormFieldElement>> = new Set([]); private formFieldElements: Set<ElementWithOpId<FormFieldElement>> = new Set([]);
@@ -42,29 +29,14 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
private userFilledFields: Record<string, FillableFormFieldElement> = {}; private userFilledFields: Record<string, FillableFormFieldElement> = {};
private authStatus: AuthenticationStatus; private authStatus: AuthenticationStatus;
private focusableElements: FocusableElement[] = []; private focusableElements: FocusableElement[] = [];
// private isOverlayButtonVisible = false;
// private isOverlayListVisible = false;
// private overlayButtonElement: HTMLElement;
// private overlayListElement: HTMLElement;
private mostRecentlyFocusedField: ElementWithOpId<FormFieldElement>; private mostRecentlyFocusedField: ElementWithOpId<FormFieldElement>;
private focusedFieldData: FocusedFieldData; private focusedFieldData: FocusedFieldData;
private userInteractionEventTimeout: number | NodeJS.Timeout; private userInteractionEventTimeout: number | NodeJS.Timeout;
// private overlayElementsMutationObserver: MutationObserver;
// private bodyElementMutationObserver: MutationObserver;
// private documentElementMutationObserver: MutationObserver;
// private mutationObserverIterations = 0;
// private mutationObserverIterationsResetTimeout: number | NodeJS.Timeout;
private autofillFieldKeywordsMap: WeakMap<AutofillField, string> = new WeakMap(); private autofillFieldKeywordsMap: WeakMap<AutofillField, string> = new WeakMap();
private eventHandlersMemo: { [key: string]: EventListener } = {}; private eventHandlersMemo: { [key: string]: EventListener } = {};
readonly extensionMessageHandlers: AutofillOverlayContentExtensionMessageHandlers = { readonly extensionMessageHandlers: AutofillOverlayContentExtensionMessageHandlers = {
blurMostRecentOverlayField: () => this.blurMostRecentOverlayField, blurMostRecentOverlayField: () => this.blurMostRecentOverlayField,
}; };
// private readonly customElementDefaultStyles: Partial<CSSStyleDeclaration> = {
// all: "initial",
// position: "fixed",
// display: "block",
// zIndex: "2147483647",
// };
/** /**
* Initializes the autofill overlay content service by setting up the mutation observers. * Initializes the autofill overlay content service by setting up the mutation observers.
@@ -166,59 +138,11 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
this.mostRecentlyFocusedField?.blur(); this.mostRecentlyFocusedField?.blur();
} }
// /**
// * Removes the autofill overlay from the page. This will initially
// * unobserve the body element to ensure the mutation observer no
// * longer triggers.
// */
// removeAutofillOverlay = () => {
// this.removeBodyElementObserver();
// this.removeAutofillOverlayButton();
// this.removeAutofillOverlayList();
// };
// /**
// * Removes the overlay button from the DOM if it is currently present. Will
// * also remove the overlay reposition event listeners.
// */
// removeAutofillOverlayButton() {
// if (!this.overlayButtonElement) {
// return;
// }
//
// this.overlayButtonElement.remove();
// this.isOverlayButtonVisible = false;
// // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// // eslint-disable-next-line @typescript-eslint/no-floating-promises
// this.sendExtensionMessage("autofillOverlayElementClosed", {
// overlayElement: AutofillOverlayElement.Button,
// });
// this.removeOverlayRepositionEventListeners();
// }
//
// /**
// * Removes the overlay list from the DOM if it is currently present.
// */
// removeAutofillOverlayList() {
// if (!this.overlayListElement) {
// return;
// }
//
// this.overlayListElement.remove();
// this.isOverlayListVisible = false;
// // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// // eslint-disable-next-line @typescript-eslint/no-floating-promises
// this.sendExtensionMessage("autofillOverlayElementClosed", {
// overlayElement: AutofillOverlayElement.List,
// });
// }
/** /**
* Formats any found user filled fields for a login cipher and sends a message * Formats any found user filled fields for a login cipher and sends a message
* to the background script to add a new cipher. * to the background script to add a new cipher.
*/ */
async addNewVaultItem() { async addNewVaultItem() {
// if (!this.isOverlayListVisible) {
if ((await this.sendExtensionMessage("checkIsInlineMenuListVisible")) !== true) { if ((await this.sendExtensionMessage("checkIsInlineMenuListVisible")) !== true) {
return; return;
} }
@@ -241,7 +165,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
* @param direction - The direction to redirect the focus. * @param direction - The direction to redirect the focus.
*/ */
async redirectOverlayFocusOut(direction: string) { async redirectOverlayFocusOut(direction: string) {
// if (!this.isOverlayListVisible || !this.mostRecentlyFocusedField) {
if ( if (
!this.mostRecentlyFocusedField || !this.mostRecentlyFocusedField ||
(await this.sendExtensionMessage("checkIsInlineMenuListVisible")) !== true (await this.sendExtensionMessage("checkIsInlineMenuListVisible")) !== true
@@ -251,7 +174,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
if (direction === RedirectFocusDirection.Current) { if (direction === RedirectFocusDirection.Current) {
this.focusMostRecentOverlayField(); this.focusMostRecentOverlayField();
// setTimeout(this.removeAutofillOverlay, 100);
setTimeout(() => void this.sendExtensionMessage("closeAutofillOverlay"), 100); setTimeout(() => void this.sendExtensionMessage("closeAutofillOverlay"), 100);
return; return;
} }
@@ -345,7 +267,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
* is currently focused. * is currently focused.
*/ */
private handleFormFieldBlurEvent = () => { private handleFormFieldBlurEvent = () => {
// this.isFieldCurrentlyFocused = false;
void this.sendExtensionMessage("updateIsFieldCurrentlyFocused", { void this.sendExtensionMessage("updateIsFieldCurrentlyFocused", {
isFieldCurrentlyFocused: false, isFieldCurrentlyFocused: false,
}); });
@@ -363,14 +284,12 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
private handleFormFieldKeyupEvent = async (event: KeyboardEvent) => { private handleFormFieldKeyupEvent = async (event: KeyboardEvent) => {
const eventCode = event.code; const eventCode = event.code;
if (eventCode === "Escape") { if (eventCode === "Escape") {
// this.removeAutofillOverlay();
void this.sendExtensionMessage("closeAutofillOverlay", { void this.sendExtensionMessage("closeAutofillOverlay", {
forceCloseOverlay: true, forceCloseOverlay: true,
}); });
return; return;
} }
// if (eventCode === "Enter" && !this.isCurrentlyFilling) {
if ( if (
eventCode === "Enter" && eventCode === "Enter" &&
!(await this.sendExtensionMessage("checkIsFieldCurrentlyFilling")) === true !(await this.sendExtensionMessage("checkIsFieldCurrentlyFilling")) === true
@@ -393,7 +312,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
* that the overlay list is focused when the user presses the down arrow key. * that the overlay list is focused when the user presses the down arrow key.
*/ */
private async focusOverlayList() { private async focusOverlayList() {
// if (!this.isOverlayListVisible && this.mostRecentlyFocusedField) {
if ( if (
this.mostRecentlyFocusedField && this.mostRecentlyFocusedField &&
(await this.sendExtensionMessage("checkIsInlineMenuListVisible")) !== true (await this.sendExtensionMessage("checkIsInlineMenuListVisible")) !== true
@@ -404,9 +322,7 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
return; return;
} }
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. void this.sendExtensionMessage("focusAutofillOverlayList");
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.sendExtensionMessage("focusAutofillOverlayList");
} }
/** /**
@@ -436,7 +352,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
this.storeModifiedFormElement(formFieldElement); this.storeModifiedFormElement(formFieldElement);
if (formFieldElement.value && (this.isOverlayCiphersPopulated || !this.isUserAuthed())) { if (formFieldElement.value && (this.isOverlayCiphersPopulated || !this.isUserAuthed())) {
// this.removeAutofillOverlayList();
void this.sendExtensionMessage("closeAutofillOverlay", { void this.sendExtensionMessage("closeAutofillOverlay", {
overlayElement: AutofillOverlayElement.List, overlayElement: AutofillOverlayElement.List,
forceCloseOverlay: true, forceCloseOverlay: true,
@@ -487,7 +402,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
* @param formFieldElement - The form field element that triggered the click event. * @param formFieldElement - The form field element that triggered the click event.
*/ */
private async triggerFormFieldClickedAction(formFieldElement: ElementWithOpId<FormFieldElement>) { private async triggerFormFieldClickedAction(formFieldElement: ElementWithOpId<FormFieldElement>) {
// if (this.isOverlayButtonVisible || this.isOverlayListVisible) {
if ( if (
(await this.sendExtensionMessage("checkIsInlineMenuButtonVisible")) === true || (await this.sendExtensionMessage("checkIsInlineMenuButtonVisible")) === true ||
(await this.sendExtensionMessage("checkIsInlineMenuListVisible")) === true (await this.sendExtensionMessage("checkIsInlineMenuListVisible")) === true
@@ -518,12 +432,10 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
* @param formFieldElement - The form field element that triggered the focus event. * @param formFieldElement - The form field element that triggered the focus event.
*/ */
private async triggerFormFieldFocusedAction(formFieldElement: ElementWithOpId<FormFieldElement>) { private async triggerFormFieldFocusedAction(formFieldElement: ElementWithOpId<FormFieldElement>) {
// if (this.isCurrentlyFilling) {
if ((await this.sendExtensionMessage("checkIsFieldCurrentlyFilling")) === true) { if ((await this.sendExtensionMessage("checkIsFieldCurrentlyFilling")) === true) {
return; return;
} }
// this.isFieldCurrentlyFocused = true;
void this.sendExtensionMessage("updateIsFieldCurrentlyFocused", { void this.sendExtensionMessage("updateIsFieldCurrentlyFocused", {
isFieldCurrentlyFocused: true, isFieldCurrentlyFocused: true,
}); });
@@ -536,7 +448,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
this.autofillOverlayVisibility === AutofillOverlayVisibility.OnButtonClick || this.autofillOverlayVisibility === AutofillOverlayVisibility.OnButtonClick ||
(formElementHasValue && initiallyFocusedField !== this.mostRecentlyFocusedField) (formElementHasValue && initiallyFocusedField !== this.mostRecentlyFocusedField)
) { ) {
// this.removeAutofillOverlayList();
void this.sendExtensionMessage("closeAutofillOverlay", { void this.sendExtensionMessage("closeAutofillOverlay", {
overlayElement: AutofillOverlayElement.List, overlayElement: AutofillOverlayElement.List,
forceCloseOverlay: true, forceCloseOverlay: true,
@@ -625,22 +536,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
* Updates the position of the overlay button. * Updates the position of the overlay button.
*/ */
private updateOverlayButtonPosition() { private updateOverlayButtonPosition() {
// if (!this.overlayButtonElement) {
// this.createAutofillOverlayButton();
// this.updateCustomElementDefaultStyles(this.overlayButtonElement);
// }
//
// if (!this.isOverlayButtonVisible) {
// this.appendOverlayElementToBody(this.overlayButtonElement);
// this.isOverlayButtonVisible = true;
// this.setOverlayRepositionEventListeners();
// }
// // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// // eslint-disable-next-line @typescript-eslint/no-floating-promises
// this.sendExtensionMessage("updateAutofillOverlayPosition", {
// overlayElement: AutofillOverlayElement.Button,
// });
void this.sendExtensionMessage("updateAutofillOverlayPosition", { void this.sendExtensionMessage("updateAutofillOverlayPosition", {
overlayElement: AutofillOverlayElement.Button, overlayElement: AutofillOverlayElement.Button,
}); });
@@ -650,39 +545,11 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
* Updates the position of the overlay list. * Updates the position of the overlay list.
*/ */
private updateOverlayListPosition() { private updateOverlayListPosition() {
// if (!this.overlayListElement) {
// this.createAutofillOverlayList();
// this.updateCustomElementDefaultStyles(this.overlayListElement);
// }
//
// if (!this.isOverlayListVisible) {
// this.appendOverlayElementToBody(this.overlayListElement);
// this.isOverlayListVisible = true;
// }
//
// // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// // eslint-disable-next-line @typescript-eslint/no-floating-promises
// this.sendExtensionMessage("updateAutofillOverlayPosition", {
// overlayElement: AutofillOverlayElement.List,
// });
void this.sendExtensionMessage("updateAutofillOverlayPosition", { void this.sendExtensionMessage("updateAutofillOverlayPosition", {
overlayElement: AutofillOverlayElement.List, overlayElement: AutofillOverlayElement.List,
}); });
} }
// /**
// * Appends the overlay element to the body element. This method will also
// * observe the body element to ensure that the overlay element is not
// * interfered with by any DOM changes.
// *
// * @param element - The overlay element to append to the body element.
// */
// private appendOverlayElementToBody(element: HTMLElement) {
// this.observeBodyElement();
// globalThis.document.body.appendChild(element);
// }
/** /**
* Sends a message that facilitates hiding the overlay elements. * Sends a message that facilitates hiding the overlay elements.
* *
@@ -796,78 +663,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
return !isLoginCipherField; return !isLoginCipherField;
} }
// /**
// * Creates the autofill overlay button element. Will not attempt
// * to create the element if it already exists in the DOM.
// */
// private createAutofillOverlayButton() {
// if (this.overlayButtonElement) {
// return;
// }
//
// if (this.isFirefoxBrowser) {
// this.overlayButtonElement = globalThis.document.createElement("div");
// new AutofillOverlayButtonIframe(this.overlayButtonElement);
//
// return;
// }
//
// const customElementName = this.generateRandomCustomElementName();
// globalThis.customElements?.define(
// customElementName,
// class extends HTMLElement {
// constructor() {
// super();
// new AutofillOverlayButtonIframe(this);
// }
// },
// );
// this.overlayButtonElement = globalThis.document.createElement(customElementName);
// }
//
// /**
// * Creates the autofill overlay list element. Will not attempt
// * to create the element if it already exists in the DOM.
// */
// private createAutofillOverlayList() {
// if (this.overlayListElement) {
// return;
// }
//
// if (this.isFirefoxBrowser) {
// this.overlayListElement = globalThis.document.createElement("div");
// new AutofillOverlayListIframe(this.overlayListElement);
//
// return;
// }
//
// const customElementName = this.generateRandomCustomElementName();
// globalThis.customElements?.define(
// customElementName,
// class extends HTMLElement {
// constructor() {
// super();
// new AutofillOverlayListIframe(this);
// }
// },
// );
// this.overlayListElement = globalThis.document.createElement(customElementName);
// }
// /**
// * Updates the default styles for the custom element. This method will
// * remove any styles that are added to the custom element by other methods.
// *
// * @param element - The custom element to update the default styles for.
// */
// private updateCustomElementDefaultStyles(element: HTMLElement) {
// this.unobserveCustomElements();
//
// setElementStyles(element, this.customElementDefaultStyles, true);
//
// this.observeCustomElements();
// }
/** /**
* Queries the background script for the autofill overlay visibility setting. * Queries the background script for the autofill overlay visibility setting.
* If the setting is not found, a default value of OnFieldFocus will be used * If the setting is not found, a default value of OnFieldFocus will be used
@@ -905,7 +700,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
* repositioning of the overlay. * repositioning of the overlay.
*/ */
private handleOverlayRepositionEvent = async () => { private handleOverlayRepositionEvent = async () => {
// if (!this.isOverlayButtonVisible && !this.isOverlayListVisible) {
if ( if (
(await this.sendExtensionMessage("checkIsInlineMenuButtonVisible")) !== true && (await this.sendExtensionMessage("checkIsInlineMenuButtonVisible")) !== true &&
(await this.sendExtensionMessage("checkIsInlineMenuListVisible")) !== true (await this.sendExtensionMessage("checkIsInlineMenuListVisible")) !== true
@@ -928,8 +722,9 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
private triggerOverlayRepositionUpdates = async () => { private triggerOverlayRepositionUpdates = async () => {
if (!this.recentlyFocusedFieldIsCurrentlyFocused()) { if (!this.recentlyFocusedFieldIsCurrentlyFocused()) {
this.toggleOverlayHidden(false); this.toggleOverlayHidden(false);
// this.removeAutofillOverlay(); void this.sendExtensionMessage("closeAutofillOverlay", {
void this.sendExtensionMessage("closeAutofillOverlay"); forceCloseOverlay: true,
});
return; return;
} }
@@ -945,8 +740,9 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
return; return;
} }
// this.removeAutofillOverlay(); void this.sendExtensionMessage("closeAutofillOverlay", {
void this.sendExtensionMessage("closeAutofillOverlay"); forceCloseOverlay: true,
});
}; };
/** /**
@@ -968,7 +764,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
globalThis.document.addEventListener(EVENTS.VISIBILITYCHANGE, this.handleVisibilityChangeEvent); globalThis.document.addEventListener(EVENTS.VISIBILITYCHANGE, this.handleVisibilityChangeEvent);
globalThis.addEventListener(EVENTS.FOCUSOUT, this.handleFormFieldBlurEvent); globalThis.addEventListener(EVENTS.FOCUSOUT, this.handleFormFieldBlurEvent);
this.setOverlayRepositionEventListeners(); this.setOverlayRepositionEventListeners();
// this.setupMutationObserver();
}; };
/** /**
@@ -981,180 +776,11 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
} }
this.mostRecentlyFocusedField = null; this.mostRecentlyFocusedField = null;
// this.removeAutofillOverlay(); void this.sendExtensionMessage("closeAutofillOverlay", {
void this.sendExtensionMessage("closeAutofillOverlay"); forceCloseOverlay: true,
});
}; };
// /**
// * Sets up mutation observers for the overlay elements, the body element, and the
// * document element. The mutation observers are used to remove any styles that are
// * added to the overlay elements by the website. They are also used to ensure that
// * the overlay elements are always present at the bottom of the body element.
// */
// private setupMutationObserver = () => {
// this.overlayElementsMutationObserver = new MutationObserver(
// this.handleOverlayElementMutationObserverUpdate,
// );
//
// this.bodyElementMutationObserver = new MutationObserver(
// this.handleBodyElementMutationObserverUpdate,
// );
// };
// /**
// * Sets up mutation observers to verify that the overlay
// * elements are not modified by the website.
// */
// private observeCustomElements() {
// if (this.overlayButtonElement) {
// this.overlayElementsMutationObserver?.observe(this.overlayButtonElement, {
// attributes: true,
// });
// }
//
// if (this.overlayListElement) {
// this.overlayElementsMutationObserver?.observe(this.overlayListElement, { attributes: true });
// }
// }
// /**
// * Disconnects the mutation observers that are used to verify that the overlay
// * elements are not modified by the website.
// */
// private unobserveCustomElements() {
// this.overlayElementsMutationObserver?.disconnect();
// }
// /**
// * Sets up a mutation observer for the body element. The mutation observer is used
// * to ensure that the overlay elements are always present at the bottom of the body
// * element.
// */
// private observeBodyElement() {
// this.bodyElementMutationObserver?.observe(globalThis.document.body, { childList: true });
// }
// /**
// * Disconnects the mutation observer for the body element.
// */
// private removeBodyElementObserver() {
// this.bodyElementMutationObserver?.disconnect();
// }
// /**
// * Handles the mutation observer update for the overlay elements. This method will
// * remove any attributes or styles that might be added to the overlay elements by
// * a separate process within the website where this script is injected.
// *
// * @param mutationRecord - The mutation record that triggered the update.
// */
// private handleOverlayElementMutationObserverUpdate = (mutationRecord: MutationRecord[]) => {
// if (this.isTriggeringExcessiveMutationObserverIterations()) {
// return;
// }
//
// for (let recordIndex = 0; recordIndex < mutationRecord.length; recordIndex++) {
// const record = mutationRecord[recordIndex];
// if (record.type !== "attributes") {
// continue;
// }
//
// const element = record.target as HTMLElement;
// if (record.attributeName !== "style") {
// this.removeModifiedElementAttributes(element);
//
// continue;
// }
//
// element.removeAttribute("style");
// this.updateCustomElementDefaultStyles(element);
// }
// };
// /**
// * Removes all elements from a passed overlay
// * element except for the style attribute.
// *
// * @param element - The element to remove the attributes from.
// */
// private removeModifiedElementAttributes(element: HTMLElement) {
// const attributes = Array.from(element.attributes);
// for (let attributeIndex = 0; attributeIndex < attributes.length; attributeIndex++) {
// const attribute = attributes[attributeIndex];
// if (attribute.name === "style") {
// continue;
// }
//
// element.removeAttribute(attribute.name);
// }
// }
// /**
// * Handles the mutation observer update for the body element. This method will
// * ensure that the overlay elements are always present at the bottom of the body
// * element.
// */
// private handleBodyElementMutationObserverUpdate = () => {
// if (
// (!this.overlayButtonElement && !this.overlayListElement) ||
// this.isTriggeringExcessiveMutationObserverIterations()
// ) {
// return;
// }
//
// const lastChild = globalThis.document.body.lastElementChild;
// const secondToLastChild = lastChild?.previousElementSibling;
// const lastChildIsOverlayList = lastChild === this.overlayListElement;
// const lastChildIsOverlayButton = lastChild === this.overlayButtonElement;
// const secondToLastChildIsOverlayButton = secondToLastChild === this.overlayButtonElement;
//
// if (
// (lastChildIsOverlayList && secondToLastChildIsOverlayButton) ||
// (lastChildIsOverlayButton && !this.isOverlayListVisible)
// ) {
// return;
// }
//
// if (
// (lastChildIsOverlayList && !secondToLastChildIsOverlayButton) ||
// (lastChildIsOverlayButton && this.isOverlayListVisible)
// ) {
// globalThis.document.body.insertBefore(this.overlayButtonElement, this.overlayListElement);
// return;
// }
//
// globalThis.document.body.insertBefore(lastChild, this.overlayButtonElement);
// };
// /**
// * Identifies if the mutation observer is triggering excessive iterations.
// * Will trigger a blur of the most recently focused field and remove the
// * autofill overlay if any set mutation observer is triggering
// * excessive iterations.
// */
// private isTriggeringExcessiveMutationObserverIterations() {
// if (this.mutationObserverIterationsResetTimeout) {
// clearTimeout(this.mutationObserverIterationsResetTimeout);
// }
//
// this.mutationObserverIterations++;
// this.mutationObserverIterationsResetTimeout = setTimeout(
// () => (this.mutationObserverIterations = 0),
// 2000,
// );
//
// if (this.mutationObserverIterations > 100) {
// clearTimeout(this.mutationObserverIterationsResetTimeout);
// this.mutationObserverIterations = 0;
// this.blurMostRecentOverlayField();
// this.removeAutofillOverlay();
//
// return true;
// }
//
// return false;
// }
/** /**
* Gets the root node of the passed element and returns the active element within that root node. * Gets the root node of the passed element and returns the active element within that root node.
* *
@@ -1174,7 +800,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
* disconnect the mutation observers and remove all event listeners. * disconnect the mutation observers and remove all event listeners.
*/ */
destroy() { destroy() {
// this.documentElementMutationObserver?.disconnect();
this.clearUserInteractionEventTimeout(); this.clearUserInteractionEventTimeout();
this.formFieldElements.forEach((formFieldElement) => { this.formFieldElements.forEach((formFieldElement) => {
this.removeCachedFormFieldEventListeners(formFieldElement); this.removeCachedFormFieldEventListeners(formFieldElement);
@@ -1187,7 +812,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
this.handleVisibilityChangeEvent, this.handleVisibilityChangeEvent,
); );
globalThis.removeEventListener(EVENTS.FOCUSOUT, this.handleFormFieldBlurEvent); globalThis.removeEventListener(EVENTS.FOCUSOUT, this.handleFormFieldBlurEvent);
// this.removeAutofillOverlay();
this.removeOverlayRepositionEventListeners(); this.removeOverlayRepositionEventListeners();
} }
} }

6
apps/browser/src/autofill/services/autofill.service.ts
View File

@@ -2066,9 +2066,9 @@ export default class AutofillService implements AutofillServiceInterface {
for (let index = 0; index < tabs.length; index++) { for (let index = 0; index < tabs.length; index++) {
const tab = tabs[index]; const tab = tabs[index];
if (tab.url?.startsWith("http")) { if (tab.url?.startsWith("http")) {
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. chrome.webNavigation.getAllFrames({ tabId: tab.id }, (frames) =>
// eslint-disable-next-line @typescript-eslint/no-floating-promises frames.forEach((frame) => this.injectAutofillScripts(tab, frame.frameId, false)),
this.injectAutofillScripts(tab, 0, false); );
} }
} }
} }