Using on loaded scripts for chaning styles.

6 files changed, 45 insertions, 44 deletions

diff --git a/src/scripts.json b/src/scripts.json
index ba6f73f..b3f14b0 100644
--- a/src/scripts.json
+++ b/src/scripts.json
@@ -1,7 +1,7 @@
 {
 	"before": {
 		"optimize/index.ts": "*",
-		"optimize/home-page.ts": "Home.action"
+		"optimize/home-page/index.ts": "Home.action"
 	},
 	"injected": {
 		"stop-blocking.js": "*",
@@ -9,6 +9,7 @@
 		"auto-login.ts": "*"
 	},
 	"loaded": {
-		"autofill-captcha.ts": "*"
+		"autofill-captcha.ts": "*",
+		"optimize/home-page/styles.ts": "Home.action"
 	}
 }
diff --git a/src/scripts/optimize/home-page.ts b/src/scripts/optimize/home-page.ts
deleted file mode 100644
index 6e41294..0000000
--- a/src/scripts/optimize/home-page.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { modifyDOM, DOMModifier } from "@/utils/modify-dom";
-
-const bannerImageUrl = chrome.runtime.getURL("assets/banner.jpg");
-
-modifyDOM([
-	new DOMModifier("#slider > img", {
-		src: bannerImageUrl,
-		styles: {
-			position: "initial",
-			width: "100vw"
-		}
-	}),
-	new DOMModifier("#slider", {
-		styles: {
-			overflow: "visible",
-			position: "initial"
-		}
-	}),
-	new DOMModifier("#form_MainMenuPage > div > div.logo-div.row.ng-scope > div.top_link_icon.col-sm-7.float-right", {
-		styles: {
-			width: "100%",
-			display: "flex",
-			justifyContent: "space-around",
-			paddingTop: "5px"
-		}
-	})
-]);
diff --git a/src/scripts/optimize/home-page/index.ts b/src/scripts/optimize/home-page/index.ts
new file mode 100644
index 0000000..762b4f8
--- /dev/null
+++ b/src/scripts/optimize/home-page/index.ts
@@ -0,0 +1,9 @@
+import { modifyDOM, DOMModifier } from "@/utils/modify-dom";
+
+const bannerImageUrl = chrome.runtime.getURL("assets/banner.jpg");
+
+modifyDOM([
+	new DOMModifier("#slider > img", {
+		src: bannerImageUrl
+	})
+]);
diff --git a/src/scripts/optimize/home-page/styles.ts b/src/scripts/optimize/home-page/styles.ts
new file mode 100644
index 0000000..91d273a
--- /dev/null
+++ b/src/scripts/optimize/home-page/styles.ts
@@ -0,0 +1,21 @@
+import { styles } from "@/utils/styling";
+
+styles("#form_MainMenuPage > div > div.logo-div.row.ng-scope > div.top_link_icon.col-sm-7.float-right", {
+	width: "100%",
+	display: "flex",
+	justifyContent: "space-around",
+	paddingTop: "5px"
+});
+styles("#form_MainMenuPage > div > div.logo-div.row.ng-scope > div.top_link_icon.col-sm-7.float-right > a > span > i", {
+	height: "40px",
+	width: "40px",
+	paddingTop: "10px"
+});
+styles("#slider", {
+	overflow: "visible",
+	position: "initial"
+});
+styles("#slider > img", {
+	width: "100vw",
+	position: "initial"
+});
diff --git a/src/utils/modify-dom.ts b/src/utils/modify-dom.ts
index 4e36008..da0944b 100644
--- a/src/utils/modify-dom.ts
+++ b/src/utils/modify-dom.ts
@@ -1,20 +1,15 @@
 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) {
+	attributes: Replacements;
+	constructor(selector: string, attributes: Replacements) {
 		this.selector = selector;
-		this.replaced = replaced;
+		this.attributes = attributes;
 	}
 }
 
@@ -26,17 +21,11 @@ export const modifyDOM = (elements: (DOMModifier | null)[]) => {
 			if (elements[i]) {
 				const element = document.querySelector(elements[i]!.selector) as HTMLElement | null;
 				if (element) {
-					const attributes = elements[i]!.replaced as any;
+					const attributes = elements[i]!.attributes 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);
diff --git a/src/utils/styling.ts b/src/utils/styling.ts
new file mode 100644
index 0000000..0e527d9
--- /dev/null
+++ b/src/utils/styling.ts
@@ -0,0 +1,8 @@
+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];
+		}
+	}
+};