feat(path-box): update style and better management

giuxtaposition · Jan 5, 2024 · 9946e4b · 9946e4b
1 parent 64f4689
commit 9946e4b
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 38 deletions.
diff --git a/src/entries/background/main.ts b/src/entries/background/main.ts
@@ -19,10 +19,6 @@ browser.tabs.onUpdated.addListener(async function (tabId, changeInfo, tab) {
       tab.title?.toLowerCase().includes("bridge insurance services"))
   ) {
     await tabs.addTab(tabId.toString());
-
-    if (await storage.get("showPathBox")) {
-      messenger.send("load-path-box");
-    }
   }
 });
 

diff --git a/src/entries/contentScript/primary/main.ts b/src/entries/contentScript/primary/main.ts
@@ -3,35 +3,38 @@ import PathBoxComponent from "../../../lib/components/PathBox.svelte";
 import { waitForElement } from "../../../lib/utils/waitForElement";
 import prepareComponent from "../renderContent";
 import PageFactory from "../../../lib/pages/pageFactory";
+import OptionsSyncStorage from "../../../lib/services/storage";
 
-browser.runtime.onMessage.addListener(
-  async function (message, sender, sendResponse) {
-    if (message.message === "load-path-box") {
-      const pathBox = await prepareComponent((appRoot) => {
-        new PathBoxComponent({
-          target: appRoot,
-          props: {
-            currentPath: window.location.pathname.split("/")[1],
-          },
-        });
-      });
+const storage = OptionsSyncStorage.getInstance();
+
+let lastUrl = location.href;
+new MutationObserver(() => {
+  const url = location.href;
+  if (url !== lastUrl) {
+    lastUrl = url;
+    loadPathBox();
+  }
+}).observe(document, { subtree: true, childList: true });
 
-      Promise.any([
-        waitForElement("#vite-sicure-logo"),
-        waitForElement('img[alt="vite-sicure-logo"]'),
-      ]).then((viteSicureLogo) => {
-        let header: HTMLElement;
-        if (viteSicureLogo!.tagName === "IMG") {
-          header = viteSicureLogo!.parentElement!;
-        } else {
-          header = viteSicureLogo!.parentElement!.parentElement!;
-        }
-        if (header.querySelector("#vitesicure-path-box")) return;
-        header.appendChild(pathBox);
+async function loadPathBox() {
+  if (await storage.get("showPathBox")) {
+    const pathBox = await prepareComponent((appRoot) => {
+      new PathBoxComponent({
+        target: appRoot,
+        props: {
+          currentPath: window.location.pathname.split("/")[1],
+        },
       });
-    }
-  },
-);
+    });
+
+    Promise.any([waitForElement("#root div")]).then((root) => {
+      if (root.querySelector("#vitesicure-path-box")) return;
+      root.appendChild(pathBox);
+    });
+  }
+}
+
+loadPathBox();
 
 browser.runtime.onMessage.addListener(
   async function (message, sender, sendResponse) {
@@ -58,3 +61,11 @@ browser.runtime.onMessage.addListener(
     }
   },
 );
+
+browser.runtime.onMessage.addListener(
+  async function (message, sender, sendResponse) {
+    if (message.message === "load-path-box") {
+      loadPathBox();
+    }
+  },
+);
diff --git a/src/lib/components/PathBox.svelte b/src/lib/components/PathBox.svelte
@@ -13,21 +13,30 @@
 <style lang="scss">
   #path-box {
     margin: 0 20px;
-    padding: 12px;
+    padding: 16px 12px 16px 16px;
+    font-size: 20px;
     font-weight: bold;
     text-transform: uppercase;
-    border-radius: 8px;
+    position: fixed;
+    top: 20%;
+    left: -3%;
+    border-radius: 0 25px 25px 0;
+    border: 2px solid;
+    min-width: 60px;
   }
   .vita {
-    color: rgb(185 28 28);
-    background: rgb(252 165 165);
+    background: rgba(210, 82, 127, 0.1);
+    border-color: #d2527f;
+    color: #d2527f;
   }
   .caso-morte {
-    color: rgb(21 128 61);
-    background: rgb(134 239 172);
+    background: rgba(39, 174, 96, 0.1);
+    border-color: #27ae60;
+    color: #27ae60;
   }
   .infortuni {
-    color: rgb(29 78 216);
-    background: rgb(147 197 253);
+    background: rgba(34, 167, 240, 0.1);
+    border-color: #22a7f0;
+    color: #22a7f0;
   }
 </style>