Each installed script now saves a reference in IDB.

masqr.js

@@ -37,14 +37,16 @@ export async function masqrCheck(config) {
       config.licenseServer + pass + "&host=" + req.headers.host + " returned " + licenseCheck
     );
     if (licenseCheck == "License valid") {
-      res.cookie("authcheck", "true", { expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000) }); // authorize session, for like a year, by then the link will be expired lol
+      res.cookie("authcheck", "true", {
+        expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000),
+      }); // authorize session, for like a year, by then the link will be expired lol
       res.send(`<script> window.location.href = window.location.href </script>`); // fun hack to make the browser refresh and remove the auth params from the URL
       return;
     }
 
     MasqFail(req, res);
     return;
-  }
+  };
 }
 
 async function MasqFail(req, res) {

src/i18n/en.json

@@ -27,7 +27,7 @@
 
   "footer.brand": "Alu",
   "footer.madeWithLove": "Made with ❤️ by wearr",
-  "footer.poweredBy": "Powered by Ultraviolet",
+  "footer.poweredBy": "Titanium Network",
   "footer.services": "Services",
   "footer.socials": "Socials",
   "footer.aluProject": "Alu Project",

src/i18n/jp.json

@@ -27,7 +27,7 @@
 
   "footer.brand": "アルー",
   "footer.madeWithLove": "wearrによる❤️で作られました",
-  "footer.poweredBy": "「ウルトラバイオレット」による駆動",
+  "footer.poweredBy": "チタンネットワークサービス",
   "footer.services": "サービス",
   "footer.socials": "ソーシャル",
   "footer.aluProject": "アループロジェクト",

src/json/marketplace.json

@@ -1,9 +1,14 @@
 {
-    "adblock": {
+  "dev.wearr.adblock": {
     "title": "Adblocker",
     "version": "0.0.1",
     "image": "/marketplace/adblock/adblock.png",
-        "script": "/marketplace/adblock/adblocker.js",
-        "slug": "adblock"
+    "script": "/marketplace/adblock/adblocker.js"
+  },
+  "dev.wearr.adblock2": {
+    "title": "Adblocker2",
+    "version": "0.0.2",
+    "image": "/marketplace/adblock/adblock.png",
+    "script": "/marketplace/adblock/adblocker.js"
   }
 }

src/pages/[lang]/marketplace.astro

@@ -1,18 +1,17 @@
 ---
 import { STATIC_PATHS } from "@i18n/utils";
-import Layout from "src/layouts/Layout.astro"
-import marketplace from "../../json/marketplace.json"
+import Layout from "src/layouts/Layout.astro";
+import marketplace from "../../json/marketplace.json";
 
-export const getStaticPaths = (() => {
+export const getStaticPaths = () => {
   return STATIC_PATHS;
-});
+};
 
 type MarketplaceItem = {
-    title: string,
-    version: string | number,
-    image: string,
-    script: string,
-    slug: string
+  title: string;
+  version: string | number;
+  image: string;
+  script: string;
 };
 ---
 
@@ -20,25 +19,167 @@ type MarketplaceItem = {
   <div id="main-content">
     <h1 class="title-text">Marketplace</h1>
     <div class="marketplace-ext-grid">
-            {Object.keys(marketplace).map((mp_item) => {
-                const item = (marketplace as {[key: string ]: MarketplaceItem})[mp_item]
-                return <div class="marketplace-item" id={item.slug}>
+      {
+        Object.keys(marketplace).map((mp_item) => {
+          const item = (marketplace as { [key: string]: MarketplaceItem })[mp_item];
+          const slug = mp_item;
+          console.log(slug);
+          return (
+            <div class="marketplace-item" data-slug={slug}>
               <img class="marketplace-item-image" src={item.image} alt={`${item.title} Logo`} />
               <div class="marketplace-item-title">{item.title}</div>
-                    <button class="marketplace-install-btn">Install</button>
+              <button class="marketplace-install-btn" data-slug={slug} data-title={item.title}>
+                Install
+              </button>
             </div>
-            })}
+          );
+        })
+      }
     </div>
   </div>
 </Layout>
 
 <script>
-    const installButtons = document.getElementsByClassName("marketplace-install-btn") as HTMLCollectionOf<HTMLButtonElement>;
-    Array.from(installButtons).forEach(btn => {
-        btn.addEventListener("click", (event) => {
-            console.log(event.target)
-        })
+  import "notyf/notyf.min.css";
+  import { Notyf } from "notyf";
+  import marketplaceManifest from "../../json/marketplace.json";
+  const installButtons = document.getElementsByClassName(
+    "marketplace-install-btn"
+  ) as HTMLCollectionOf<HTMLButtonElement>;
+  Array.from(installButtons).forEach((btn) => {
+    btn.addEventListener("click", async (event) => {
+      const ele = event.target as HTMLButtonElement;
+      const title = ele.dataset.title;
+      let notification = new Notyf({
+        duration: 999999,
+        position: { x: "right", y: "bottom" },
+        dismissible: true,
+        ripple: true,
       });
+      let installNotif = notification.success(`Installing ${title}...`);
+      if (ele.dataset.slug) installExtension(getMarketplaceObj(ele.dataset.slug), ele.dataset.slug).then((code) => {
+        let notifMessage = "";
+        let timeout = 2000;
+        console.log(code)
+        switch (code) {
+          case 0:
+            notifMessage = `Installed ${title} Successfully!`;
+            break;
+          case 1:
+            notifMessage = `${title} is already installed!`;
+            timeout = 0;
+            break;
+          case -1:
+            // We should NEVER get here, but just in case.
+            notifMessage = `Failed to install ${title}!`;
+            break;
+        }
+        setTimeout(() => {
+            notification.dismiss(installNotif);
+            notification.options.duration = 2000;
+            notification.success(notifMessage)
+            notification.options.duration = 999999;
+        }, timeout)
+
+      }).catch(() => {
+        notification.dismiss(installNotif);
+        notification.options.duration = 2000;
+        notification.error(`Failed to install ${title}!`);
+        notification.options.duration = 999999;
+      });
+      else console.error("No slug found!");
+    });
+  });
+
+  type MarketplaceItem = {
+    title: string;
+    version: string | number;
+    image: string;
+    script: string;
+  };
+
+  function getMarketplaceObj(slug: string): ExtensionMetadata {
+    return (marketplaceManifest as { [key: string]: MarketplaceItem })[slug];
+  }
+
+  interface ExtensionMetadata {
+    title: string;
+    version: string | number;
+    script: string;
+  }
+
+  enum EXT_RETURN {
+    INSTALL_SUCCESS = 0,
+    INSTALL_FAILED = -1,
+    ALREADY_INSTALLED = 1,
+  }
+
+  async function installExtension(ext: ExtensionMetadata, slug: string) {
+    return new Promise((resolve, reject) => {
+        const request = window.indexedDB.open("AluDB", 1);
+    request.onupgradeneeded = (event) => {
+      const db = (event.target as IDBOpenDBRequest).result;
+      if (!db.objectStoreNames.contains("InstalledExtensions")) {
+        db.createObjectStore("InstalledExtensions", { keyPath: "slug" });
+      }
+    };
+    request.onsuccess = async (event) => {
+      const db = (event.target as IDBOpenDBRequest).result;
+      const transaction = db.transaction("InstalledExtensions", "readwrite");
+      const store = transaction.objectStore("InstalledExtensions");
+      const extensionObject = {
+        slug: slug,
+        title: ext.title,
+        version: ext.version,
+        script: ext.script,
+      };
+      // Check if the key already exists in the IDB
+      let slugCheck = store.get(slug);
+      slugCheck.onsuccess = (event) => {
+        if (slugCheck.result) {
+          resolve(EXT_RETURN.ALREADY_INSTALLED);
+        } else {
+          if (store.get(slug)) resolve(EXT_RETURN.ALREADY_INSTALLED);
+          const addRequest = store.add(extensionObject);
+          addRequest.onerror = (event) => {
+            console.error(`Error installing ${slug}!`)
+            reject(EXT_RETURN.INSTALL_FAILED);
+          };
+          addRequest.onsuccess = (event) => {
+            resolve(EXT_RETURN.INSTALL_SUCCESS);
+          };
+        }
+      };
+      slugCheck.onerror = (event) => {
+        console.error("Error checking install status!");
+        reject(EXT_RETURN.INSTALL_FAILED);
+      };
+    };
+    })
+
+  }
+
+  function InitIDB() {
+    if (!window.indexedDB) {
+      console.error("This browser doesn't support IndexedDB");
+      return;
+    }
+    const request = window.indexedDB.open("AluDB", 1);
+    request.onerror = (event: Event) => {
+      console.error("Database error: " + (event.target as any).errorCode);
+    };
+    request.onsuccess = (event) => {
+      console.log("Database opened successfully");
+    };
+    request.onupgradeneeded = (event) => {
+      const db = (event.target as IDBOpenDBRequest).result;
+      if (!db.objectStoreNames.contains("InstalledExtensions")) {
+        db.createObjectStore("InstalledExtensions", { keyPath: "slug" });
+        console.log("Database setup complete");
+      }
+    };
+  }
+  InitIDB();
 </script>
 
 <style>
@@ -53,11 +194,13 @@ type MarketplaceItem = {
     flex-wrap: wrap;
     text-align: center;
     justify-content: center;
+    gap: 20px;
   }
   .marketplace-item {
     border: 3px solid var(--accent-color);
     padding: 20px;
     border-radius: 15px;
+    width: 180px;
   }
   .marketplace-item-image {
     width: 64px;