Feat: A:B cloak, Blob cloaking

src/components/settings/Loader.astro

@@ -1,8 +1,8 @@
 <script>
-    import { cloakTab } from "@utils/settings.ts";
+    import { cloakTab, Settings } from "@utils/settings.ts";
     // This loads the settings in a nice way
-    cloakTab(localStorage.getItem("nebula||tabCloak") as string || "default");
+    cloakTab(localStorage.getItem(Settings.tabCloak) as string || "default");
     document.addEventListener("astro:after-swap", function() {
-        cloakTab(localStorage.getItem("nebula||tabCloak") as string || "default");
+        cloakTab(localStorage.getItem(Settings.tabCloak) as string || "default");
     });
 </script>

src/pages/[lang]/settings/tab.astro

@@ -40,7 +40,7 @@ export const prerender = true;
                 title="A:B & Blob" 
                 description="Choose to open your tab in about:blank or blob" 
                 input={{input: false}} 
-                button={{name: "Go!", id: "aboutblank"}} 
+                button={{name: "Go!", id: "aboutblankbutton"}} 
                 select={{ select: true, name: 'aboutblank', options: [
                     {name: 'About:Blank', value: 'a:b', disabled: false}, 
                     {name: 'Blob', value: 'blob', disabled: false}
@@ -52,30 +52,34 @@ export const prerender = true;
   { /* The toast notifications :D */ }
   <ToastWrapper client:load>
     <Toast toastProp={{toastType: "success", text: "Successfully set cloak!", class: "cloakMessageSuccess"}} client:load />
+    <Toast toastProp={{toastType: "success", text: "Saved your option for next time! \n Opening in new tab...", class: "abCloakMessage"}} client:load />
   </ToastWrapper>
 </Layout>
 
 <script>
     import { toast } from "@utils/toast.ts"; //A helper function so we don't have to run this logic everytime.
-    import { cloakTab } from "@utils/settings.ts";
+    import { cloakTab, abCloak, Settings as SettingsEnum } from "@utils/settings.ts";
-    function setup(cloakValue: HTMLSelectElement) {
+    function setup(cloakValue: HTMLSelectElement, abValue: HTMLSelectElement) {
-        const cloakLocal = localStorage.getItem("nebula||tabCloak");
+        const cloakLocal = localStorage.getItem(SettingsEnum.tabCloak);
-        if (cloakLocal === "default") {
+        const abCloakLocal = localStorage.getItem(SettingsEnum.abblob);
-            cloakValue.value = "reset";
+        cloakLocal === "default" ? cloakValue.value = "reset" : cloakValue.value = cloakLocal as string;
-        }
+        abValue.value = abCloakLocal as string;
-        else {
-            cloakValue.value = cloakLocal;
-        }
     }
     document.addEventListener("astro:page-load", function() {
         try {
-            const cloakButton = document.getElementById("cloak") as HTMLElement;
+            const cloakButton = document.getElementById("cloak") as HTMLButtonElement;
             const cloakValue = document.getElementById("cloakselect") as HTMLSelectElement;
-            setup(cloakValue);
+            const abButton = document.getElementById("aboutblankbutton") as HTMLButtonElement;
+            const abValue = document.getElementById("aboutblank") as HTMLSelectElement;
+            setup(cloakValue, abValue);
             cloakButton.addEventListener("click", () => {
                 cloakTab(cloakValue.value);
                 toast('.cloakMessageSuccess');
             });
+            abButton.addEventListener("click", () => {
+                toast('.abCloakMessage');
+                abCloak(abValue.value);
+            })
         }
         catch (_) { /* We don't want to return anything on purpose */ }
     })

src/utils/settings.ts

@@ -1,7 +1,12 @@
-type TabCloaks = "default" | "google" | "wikipedia" | "canvas" | "classroom" | "powerschool"
+enum Settings {
+    "tabCloak" = "nebula||tabCloak",
+    "abblob" = "nebula||abBlob"
+}
+type TabCloaks = "default" | "google" | "wikipedia" | "canvas" | "classroom" | "powerschool";
+type AbCloaks = "a:b" | "blob"
 function cloakTab(cloak: TabCloaks | string) {
     const faviconElement = document.getElementById("favicon") as HTMLLinkElement;
-    localStorage.setItem("nebula||tabCloak", cloak); 
+    localStorage.setItem(Settings.tabCloak, cloak); 
     switch(cloak) {
         case "google":
             document.title = "Google";
@@ -32,4 +37,45 @@ function cloakTab(cloak: TabCloaks | string) {
     }
 }
 
-export { cloakTab }
+function abCloak(type: AbCloaks | string) {
+    localStorage.setItem(Settings.abblob, type);
+    switch(type) {
+        case "a:b":
+            window.location.replace('https://google.com');
+            const win = window.open();
+            win!.document.body.style.margin = '0';
+            win!.document.body.style.height = '100vh';
+            const iframe = win!.document.createElement('iframe');
+            iframe.style.border = 'none';
+            iframe.style.width = '100%';
+            iframe.style.height = '100%';
+            iframe.style.margin = '0';
+            const url = window.location.href;
+            iframe.src = url;
+            win!.document.body.appendChild(iframe);
+            break;
+        case "blob":
+            const htmlContent = `
+                <!DOCTYPE html>
+                <html>
+                <head>
+                <style type="text/css">
+                body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
+                </style>
+                </head>
+                <body>
+                <iframe style="border: none; width: 100%; height: 100vh;" src="${window.location.href}"></iframe>
+                </body>
+                </html>
+            `;
+            window.location.replace("https://google.com");
+            const blob = new Blob([htmlContent], { type: 'text/html' });
+            const blobURL = URL.createObjectURL(blob);
+            window.open(blobURL, '_blank');
+            break;
+        default:
+            return;
+    }
+}
+
+export { cloakTab, abCloak, Settings }

src/utils/toast.ts

@@ -1,4 +1,4 @@
-type ToastType = "success" | "error" | "promise" | "multiline";
+type ToastType = "success" | "error" | "multiline";
 type Position = "top-left" | "top-middle" | "top-right" | "bottom-left" | "bottom-right" | "bottom-center";
 interface Props {
     toastType: ToastType;