about:blank for entire nebula

src/locales/en.json

@@ -46,7 +46,8 @@
     },
     "cloaking": {
       "title": "Cloaking",
-      "subtitle": "Choose how your tab looks"
+      "subtitle": "Choose how your tab looks",
+      "aboutblank": "open in about:blank"
     },
     "search": {
       "title": "Search Engine",

src/locales/es.json

@@ -46,7 +46,8 @@
     },
     "cloaking": {
       "title": "Encubrimiento",
-      "subtitle": "Elige cómo se ve tu pestaña"
+      "subtitle": "Elige cómo se ve tu pestaña",
+      "aboutblank": "Abierte en about:blank"
     },
     "search": {
       "title": "Buscador",

src/locales/ja.json

@@ -46,7 +46,8 @@
     },
     "cloaking": {
       "title": "クローキング",
-      "subtitle": "タブの見た目を選択する"
+      "subtitle": "タブの見た目を選択する",
+      "aboutblank": "で開く about:blank"
     },
     "search": {
       "title": "検索エンジン",

src/pages/Settings/TabSettings.tsx

@@ -2,6 +2,7 @@ import { motion } from "framer-motion";
 import { tabContentVariant, settingsPageVariant } from "./Variants";
 import CloakPreset from "./CloakPreset";
 import { useTranslation } from "react-i18next";
+import { LoadSuspense } from "../../LoadSuspense";
 
 const TabSettings = ({ id, active }) => {
   const { t } = useTranslation();
@@ -19,8 +20,12 @@ const TabSettings = ({ id, active }) => {
         variants={settingsPageVariant}
         className="content-card flex w-full flex-col items-center justify-center text-center"
       >
-        <div class="text-3xl font-bold text-input-text">{t("settings.cloaking.title")}</div>
+        <div class="text-3xl font-bold text-input-text">
-        <div class="text-md font-bold pb-5 text-input-text">{t("settings.cloaking.subtitle")}</div>
+          {t("settings.cloaking.title")}
+        </div>
+        <div class="text-md pb-5 font-bold text-input-text">
+          {t("settings.cloaking.subtitle")}
+        </div>
         <div class="flex flex-row space-x-4">
           <CloakPreset faviconUrl="none" title="none" />
           <CloakPreset
@@ -44,6 +49,36 @@ const TabSettings = ({ id, active }) => {
             title="Schoology"
           />
         </div>
+        <div class="relative p-4">
+          <button
+            class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl font-bold text-input-text placeholder:text-input-text focus:outline-none"
+            onClick={() => {
+              let newWindow = window.open("about:blank");
+              let iframe = document.createElement("iframe");
+              iframe.src = window.location.origin;
+              iframe.style.width = "100%";
+              iframe.style.height = "100%";
+              iframe.style.border = "none";
+              iframe.style.overflow = "hidden";
+              iframe.style.margin = "0";
+              iframe.style.padding = "0";
+              iframe.style.position = "fixed";
+              iframe.style.top = "0";
+              iframe.style.bottom = "0";
+              iframe.style.left = "0";
+              iframe.style.right = "0";
+              newWindow.document.body.appendChild(iframe);
+              window.location.replace("https://google.com");
+              return (
+                <div>
+                  <LoadSuspense />
+                </div>
+              );
+            }}
+          >
+            {t("settings.cloaking.aboutblank")}
+          </button>
+        </div>
       </motion.div>
     </motion.div>
   );