3 files changed, 64 insertions, 36 deletions
diff --git a/src/utils/modify-dom.ts b/src/utils/modify-dom.ts
new file mode 100644
index 0000000..4e36008
--- /dev/null
+++ b/src/utils/modify-dom.ts
@@ -0,0 +1,58 @@
+import { observeDOM } from "@/utils/observe-dom";
+
+type Replacements = {
+	innerHTML?: string;
+	styles?: {
+		[key: string]: string
+	};
+} | {
+	[key: string]: string | null
+};
+
+export class DOMModifier {
+	selector: string;
+	replaced: Replacements;
+	constructor(selector: string, replaced: Replacements) {
+		this.selector = selector;
+		this.replaced = replaced;
+	}
+}
+
+export const modifyDOM = (elements: (DOMModifier | null)[]) => {
+	let count = 0;
+
+	observeDOM(() => {
+		for (let i = 0; i < elements.length; i++) {
+			if (elements[i]) {
+				const element = document.querySelector(elements[i]!.selector) as HTMLElement | null;
+				if (element) {
+					const attributes = elements[i]!.replaced as any;
+					if (attributes.innerHTML) {
+						element.innerHTML = attributes.innerHTML;
+					}
+					if (attributes.styles) {
+						for (const styleType in attributes.styles) {
+							element.style[styleType as any] = attributes.styles[styleType];
+						}
+					}
+					delete attributes.innerHTML;
+					delete attributes.styles;
+					for (const attribute in attributes) {
+						if (attributes[attribute] === null) {
+							element.removeAttribute(attribute);
+						} else {
+							element.setAttribute(attribute, attributes[attribute]);
+						}
+					}
+					elements[i] = null;
+					count++;
+					if (count >= elements.length) {
+						return true;
+					}
+				}
+			}
+		}
+
+		return false;
+	});
+};
diff --git a/src/utils/observe-dom.ts b/src/utils/observe-dom.ts
index 30a07b4..8ea1a98 100644
--- a/src/utils/observe-dom.ts
+++ b/src/utils/observe-dom.ts
@@ -1,8 +1,12 @@
-export const observeDOM = (callback: () => boolean) => {
+export const observeDOM = (callback: () => boolean, element: HTMLElement = document as unknown as HTMLElement) => {
 	const observer = new MutationObserver(() => {
 		if (callback()) {
 			observer.disconnect();
 		}
 	});
-	observer.observe(document, {childList: true, subtree: true});
+
+	observer.observe(element, {
+		childList: true,
+		subtree: true
+	});
 };
diff --git a/src/utils/replace-attributes.ts b/src/utils/replace-attributes.ts
deleted file mode 100644
index 443c1d0..0000000
--- a/src/utils/replace-attributes.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { observeDOM } from "@/utils/observe-dom";
-
-export const replaceAttributes = (elements: any[]) => {
-	let count = 0;
-
-	observeDOM(() => {
-		for (let i = 0; i < elements.length; i++) {
-			if (elements[i]) {
-				const element = document.querySelector(elements[i]![0]) as HTMLElement | null;
-				if (element) {
-					const attributes = elements[i]![1];
-					if (attributes.innerHTML) {
-						element.innerHTML = attributes.innerHTML;
-					}
-					delete attributes.innerHTML;
-					for (const attribute in attributes) {
-						if (attributes[attribute] === null) {
-							element.removeAttribute(attribute);
-						} else {
-							element.setAttribute(attribute, attributes[attribute]);
-						}
-					}
-					elements[i] = undefined;
-					count++;
-					if (count >= elements.length) {
-						return true;
-					}
-				}
-			}
-		}
-
-		return false;
-	});
-};