Fixed alwaysUsePreferred bug #96. Added way to customize Popup. Added oldReddit to targets

src/assets/javascripts/helpers/common.js

@@ -121,7 +121,7 @@ function processDefaultCustomInstances(
     ].join('\n<hr>\n');
 
   calcNameCheckBoxes();
-  document.getElementById(`${name}-${protocol}-toogle-all`).addEventListener("change", (event) => {
+  document.getElementById(`${name}-${protocol}-toogle-all`).addEventListener("change", event => {
     if (event.target.checked)
       nameDefaultRedirects = [...nameHelper.getRedirects()[name][protocol]];
     else

src/assets/javascripts/helpers/general.js

@@ -55,6 +55,7 @@ async function init() {
                 "alwaysUsePreferred",
                 "theme",
                 "applyThemeToSites",
+                "popupFrontends"
             ],
             r => { // r = result
                 if (r.exceptions) exceptions = r.exceptions;
@@ -63,12 +64,52 @@ async function init() {
                 theme = r.theme ?? "DEFAULT"
                 applyThemeToSites = r.applyThemeToSites ?? false;
 
+                popupFrontends = r.popupFrontends ?? [
+                    "youtube",
+                    "youtubeMusic",
+                    "twitter",
+                    "instagram",
+                    "tikTok",
+                    "imgur",
+                    "reddit",
+                    "search",
+                    "translate",
+                    "maps",
+                    "wikipedia",
+                    "medium",
+                ];
                 resolve();
             }
         )
     )
 }
 
+
+let popupFrontends;
+const getPopupFrontends = () => popupFrontends;
+function setPopupFrontends(val) {
+    popupFrontends = val;
+    browser.storage.local.set({ popupFrontends })
+    console.log("popupFrontends: ", val)
+}
+
+let allPopupFrontends = [
+    "youtube",
+    "youtubeMusic",
+    "twitter",
+    "instagram",
+    "tikTok",
+    "imgur",
+    "reddit",
+    "pixiv",
+    "search",
+    "translate",
+    "maps",
+    "wikipedia",
+    "medium",
+];
+
+
 export default {
     getExceptions,
     setExceptions,
@@ -79,6 +120,11 @@ export default {
     getApplyThemeToSites,
     setApplyThemeToSites,
 
+    getPopupFrontends,
+    setPopupFrontends,
+
+    allPopupFrontends,
+
     getTheme,
     setTheme,
 

src/assets/javascripts/helpers/reddit.js

@@ -3,13 +3,8 @@ window.browser = window.browser || window.chrome;
 import commonHelper from './common.js'
 
 const targets = [
-  /^https?:\/\/reddit\.com/,
+  /^https?:\/\/(www\.|old\.|np\.|new\.|amp\.|)reddit\.com/,
-  /^https?:\/\/www\.reddit\.com/,
+  /^https?:\/\/(i\.|)redd\.it/,
-  /^https?:\/\/np\.reddit\.com/,
-  /^https?:\/\/new\.reddit\.com/,
-  /^https?:\/\/amp\.reddit\.com/,
-  /^https?:\/\/i\.redd\.it/,
-  /^https?:\/\/redd\.it/,
 ];
 let redirects = {
   // modern UI
@@ -397,7 +392,7 @@ async function init() {
 
           bypassWatchOnReddit = result.bypassWatchOnReddit ?? true;
 
-          alwaysUsePreferred = result.alwaysUsePreferred ?? true;
+          alwaysUsePreferred = result.alwaysUsePreferred ?? false;
 
           redirects.teddit = dataJson.teddit;
           if (result.redditRedirects) redirects = result.redditRedirects;

src/assets/javascripts/helpers/twitter.js

@@ -245,7 +245,7 @@ async function init() {
 
           bypassWatchOnTwitter = r.bypassWatchOnTwitter ?? true;
 
-          alwaysUsePreferred = r.alwaysUsePreferred ?? true;
+          alwaysUsePreferred = r.alwaysUsePreferred ?? false;
 
           theme = r.theme ?? 'DEFAULT';
           applyThemeToSites = r.applyThemeToSites ?? false;

src/assets/javascripts/helpers/youtube/youtube.js

@@ -618,7 +618,6 @@ function addUrlParams(url) {
   else return;
 }
 
-
 function initPipedLocalStorage(tabId) {
   browser.tabs.executeScript(
     tabId,
@@ -736,7 +735,7 @@ async function init() {
 
           persistInvidiousPrefs = r.persistInvidiousPrefs ?? false;
 
-          alwaysUsePreferred = r.alwaysUsePreferred ?? true;
+          alwaysUsePreferred = r.alwaysUsePreferred ?? false;
 
           bypassWatchOnYoutube = r.bypassWatchOnYoutube ?? true;
 

src/pages/background/background.js

@@ -32,7 +32,6 @@ async function wholeInit() {
   tiktokHelper.init()
   pixivHelper.init()
   generalHelper.init()
-
 }
 wholeInit();
 

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>

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);
 })

src/pages/popup/popup.html

@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <div class="some-block">
+  <div id="youtube" class="some-block">
     <div class="title">
       <img src="../../assets/images/youtube-icon.png" />
       <h4>YouTube</h4>
@@ -17,7 +17,7 @@
     <input id="disable-youtube" type="checkbox" checked />
   </div>
 
-  <div class="some-block">
+  <div id="youtubeMusic" class="some-block">
     <div class="title">
       <img src="../../assets/images/youtube-music-icon.png" />
       <h4>YT Music</h4>
@@ -25,7 +25,7 @@
     <input id="disable-youtubeMusic" type="checkbox" checked />
   </div>
 
-  <div class="some-block">
+  <div id="twitter" class="some-block">
     <div class="title">
       <img src="../../assets/images/twitter-icon.png" />
       <h4>Twitter</h4>
@@ -33,7 +33,7 @@
     <input id="disable-nitter" type="checkbox" checked />
   </div>
 
-  <div class="some-block">
+  <div id="instagram" class="some-block">
     <div class="title">
       <!-- https://www.iconfinder.com/Indygo -->
       <img src="../../assets/images/instagram-icon.png" />
@@ -42,7 +42,7 @@
     <input id="disable-bibliogram" type="checkbox" checked />
   </div>
 
-  <div class="some-block">
+  <div id="tikTok" class="some-block">
     <div class="title">
       <!-- https://www.flaticon.com/authors/designer-shah -->
       <img src="../../assets/images/tiktok-icon.png" />
@@ -51,7 +51,7 @@
     <input id="disable-tiktok" type="checkbox" checked />
   </div>
 
-  <div class="some-block">
+  <div id="imgur" class="some-block">
     <div class="title">
       <img src="../../assets/images/imgur-icon.png" />
       <h4>Imgur</h4>
@@ -59,7 +59,7 @@
     <input id="disable-imgur" type="checkbox" checked />
   </div>
 
-  <div class="some-block">
+  <div id="reddit" class="some-block">
     <div class="title">
       <!-- https://www.flaticon.com/authors/md-tanvirul-haque -->
       <img src="../../assets/images/reddit-icon.png" />
@@ -68,7 +68,7 @@
     <input id="disable-reddit" type="checkbox" checked />
   </div>
 
-  <div class="some-block">
+  <div id="pixiv" class="some-block">
     <div class="title">
       <!-- https://clipground.com/pics/getsecond?url=pixiv-logo-2.png -->
       <img src="../../assets/images/pixiv-icon.png" />
@@ -77,7 +77,7 @@
     <input id="disable-pixiv" type="checkbox" checked />
   </div>
 
-  <div class="some-block">
+  <div id="wikipedia" class="some-block">
     <div class="title">
       <img src="../../../assets/images/wikipedia-icon.svg" />
       <h4>Wikipedia</h4>
@@ -85,7 +85,7 @@
     <input id="disable-wikipedia" type="checkbox" checked />
   </div>
 
-  <div class="some-block">
+  <div id="medium" class="some-block">
     <div class="title">
       <!-- https://markentier.tech/posts/2020/10/medium-icon-svg/ -->
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1770 1000" fill="currentColor">
@@ -98,8 +98,7 @@
     <input id="disable-medium" type="checkbox" checked />
   </div>
 
-  <div class="some-block">
+  <div id="search" class="some-block">
-
     <div class="title">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
         <path d="M0 0h24v24H0V0z" fill="none" />
@@ -108,11 +107,10 @@
       </svg>
       <h4>Search</h4>
     </div>
-
     <input id="disable-search" type="checkbox" checked />
   </div>
 
-  <div class="some-block">
+  <div id="translate" class="some-block">
     <div class="title">
       <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
         <path d="M0 0h24v24H0V0z" fill="none" />
@@ -124,7 +122,7 @@
     <input id="disable-simplyTranslate" type="checkbox" checked />
   </div>
 
-  <div class="some-block">
+  <div id="maps" class="some-block">
     <div class="title">
       <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
         <path d="M0 0h24v24H0V0z" fill="none" />

src/pages/popup/popup.js

@@ -15,6 +15,7 @@ import mediumHelper from "../../assets/javascripts/helpers/medium.js";
 import imgurHelper from "../../assets/javascripts/helpers/imgur.js";
 import tiktokHelper from "../../assets/javascripts/helpers/tiktok.js";
 import pixivHelper from "../../assets/javascripts/helpers/pixiv.js";
+import generalHelper from "../../assets/javascripts/helpers/general.js";
 
 let disableTwitterElement = document.getElementById("disable-nitter");
 let disableYoutubeElement = document.getElementById("disable-youtube");
@@ -157,3 +158,17 @@ function changeInstance() {
 let changeInstanceElement = document.getElementById("change-instance")
 changeInstanceElement.disabled = !changeInstance();
 changeInstanceElement.addEventListener("click", changeInstance);
+
+
+let popupFrontends;
+generalHelper.init().then(() => {
+  popupFrontends = generalHelper.getPopupFrontends();
+
+  for (const frontend of generalHelper.allPopupFrontends) {
+    console.log(frontend)
+    if (!popupFrontends.includes(frontend))
+      document.getElementById(frontend).classList.add("hide")
+    else
+      document.getElementById(frontend).classList.remove("hide")
+  }
+});

src/pages/popup/style.css

@@ -1,4 +1,8 @@
 body {
     width: 240px;
     min-height: auto;
+}
+
+.hide {
+    display: none !important;
 }