Refactoring code.

Only using hashes for output file names.
Using singleton pattern to store the callbacks for observeDOM, and only one MutationObserver.

4 files changed, 32 insertions, 10 deletions

diff --git a/src/shared/autofill-otp.ts b/src/shared/autofill-otp.ts
index e05ea7c..b359cb4 100644
--- a/src/shared/autofill-otp.ts
+++ b/src/shared/autofill-otp.ts
@@ -26,6 +26,6 @@ document.addEventListener("DOMContentLoaded", () => {
 	};
 });
 
-export const addAutofillOtps = (addedOTPAutofillList: AutofillOTPRule[]) => {
+export const addAutofillOtps = (addedOTPAutofillList: readonly AutofillOTPRule[]) => {
 	otpAutofillList = otpAutofillList.concat(addedOTPAutofillList);
 };
diff --git a/src/shared/modify-dom.ts b/src/shared/modify-dom.ts
index b3baffb..337c879 100644
--- a/src/shared/modify-dom.ts
+++ b/src/shared/modify-dom.ts
@@ -14,12 +14,16 @@ export const modifyDOM = (modificationRules: (DOMModificaitonRule | null)[]) =>
 		for (let i = 0; i < modificationRules.length; i++) {
 			if (modificationRules[i]) {
 				const element = document.querySelector(modificationRules[i]![0]) as HTMLElement | null;
+
 				if (element) {
-					const attributes = modificationRules[i]![1] as DOMReplacements;
+					const attributes = modificationRules[i]![1];
+
 					if (attributes.innerHTML) {
 						element.innerHTML = attributes.innerHTML as string;
 					}
+
 					delete attributes.innerHTML;
+
 					for (const attribute in attributes) {
 						if (attributes[attribute] === null) {
 							element.removeAttribute(attribute);
@@ -27,8 +31,10 @@ export const modifyDOM = (modificationRules: (DOMModificaitonRule | null)[]) =>
 							element.setAttribute(attribute, attributes[attribute] as string);
 						}
 					}
+
 					modificationRules[i] = null;
 					count++;
+
 					if (count >= modificationRules.length) {
 						return true;
 					}
diff --git a/src/shared/observe-dom.ts b/src/shared/observe-dom.ts
index 4a447a0..dc2cb45 100644
--- a/src/shared/observe-dom.ts
+++ b/src/shared/observe-dom.ts
@@ -1,12 +1,27 @@
-export const observeDOM = (callback: () => boolean) => {
-	const observer = new MutationObserver(() => {
-		if (callback()) {
+type ObserveDOMCallback = () => boolean;
+
+let callbacks: (ObserveDOMCallback | null)[] = [];
+let count = 0;
+
+const observer = new MutationObserver(() => {
+	for (const callback of callbacks) {
+		if (callback && callback()) {
+			count++;
+		}
+
+		if (count >= callbacks.length) {
 			observer.disconnect();
+
+			break;
 		}
-	});
+	}
+});
+
+observer.observe(document, {
+	childList: true,
+	subtree: true
+});
 
-	observer.observe(document, {
-		childList: true,
-		subtree: true
-	});
+export const observeDOM = (callback: ObserveDOMCallback) => {
+	callbacks.push(callback);
 };
diff --git a/src/shared/styling.ts b/src/shared/styling.ts
index 0e527d9..3ec25c8 100644
--- a/src/shared/styling.ts
+++ b/src/shared/styling.ts
@@ -1,5 +1,6 @@
 export const styles = (selector: string, styles: { [key: string]: string }) => {
 	const  elements = Array.from(document.querySelectorAll(selector)) as HTMLElement[];
+
 	for (const element of elements) {
 		for (const styleType in styles) {
 			element.style[styleType as any] = styles[styleType];