2 files changed, 43 insertions, 2 deletions
diff --git a/src/pages/options/general/general.html b/src/pages/options/general/general.html
index 19e8e946..fcee2089 100644
--- a/src/pages/options/general/general.html
+++ b/src/pages/options/general/general.html
@@ -89,7 +89,6 @@
     </div>
   </section>
 
-
   <section class="option-block">
     <div class="some-block option-block">
       <h4>Theme</h4>
@@ -176,6 +175,29 @@
       </a>
     </div>
 
+    <hr>
+
+    <div class="some-block option-block">
+      <h4>Customize Popup</h4>
+    </div>
+
+    <div class="checklist" id="popup-frontends-checklist">
+      <div>Youtube<input type="checkbox" id="youtube" /></div>
+      <div>YoutubeMusic<input type="checkbox" id="youtubeMusic" /></div>
+      <div>Twitter<input type="checkbox" id="twitter" /></div>
+      <div>Instagram<input type="checkbox" id="instagram" /></div>
+      <div>TikTok<input type="checkbox" id="tikTok" /></div>
+      <div>Imgur<input type="checkbox" id="imgur" /></div>
+      <div>Reddit<input type="checkbox" id="reddit" /></div>
+      <div>Pixiv<input type="checkbox" id="pixiv" /></div>
+      <div>Search<input type="checkbox" id="search" /></div>
+      <div>Translate<input type="checkbox" id="translate" /></div>
+      <div>Maps<input type="checkbox" id="maps" /></div>
+      <div>Wikipedia<input type="checkbox" id="wikipedia" /></div>
+      <div>Medium<input type="checkbox" id="medium" /></div>
+    </div>
+    <hr>
+
   </section>
 
   <script type="module" src="../init.js"></script>
diff --git a/src/pages/options/general/general.js b/src/pages/options/general/general.js
index 4f10ab30..f65fa290 100644
--- a/src/pages/options/general/general.js
+++ b/src/pages/options/general/general.js
@@ -76,12 +76,27 @@ let nameCustomInstanceInput = document.getElementById("exceptions-custom-instanc
 let instanceTypeElement = document.getElementById("exceptions-custom-instance-type");
 let instanceType = "url"
 
+let popupFrontends;
+for (const frontend of generalHelper.allPopupFrontends)
+  document.getElementById(frontend).addEventListener("change",
+    event => {
+      if (event.target.checked && !popupFrontends.includes(frontend))
+        popupFrontends.push(frontend)
+      else if (popupFrontends.includes(frontend)) {
+        var index = popupFrontends.indexOf(frontend);
+        if (index !== -1) popupFrontends.splice(index, 1);
+      }
+      generalHelper.setPopupFrontends(popupFrontends);
+    }
+  )
+
 generalHelper.init().then(() => {
   alwaysUsePreferredElement.checked = generalHelper.getAlwaysUsePreferred();
+  console.log("alwaysUsePreferredElement.checked", alwaysUsePreferredElement.checked);
   themeElement.value = generalHelper.getTheme();
   applyThemeToSitesElement.checked = generalHelper.getApplyThemeToSites();
   instanceTypeElement.addEventListener("change",
-    (event) => {
+    event => {
       instanceType = event.target.options[instanceTypeElement.selectedIndex].value
       if (instanceType == 'url') {
         nameCustomInstanceInput.setAttribute("type", "url");
@@ -149,4 +164,8 @@ generalHelper.init().then(() => {
     }
     calcExceptionsCustomInstances();
   })
+
+  popupFrontends = generalHelper.getPopupFrontends();
+  for (const frontend of generalHelper.allPopupFrontends)
+    document.getElementById(frontend).checked = popupFrontends.includes(frontend);
 })
\ No newline at end of file