Added bypass to WatchOnYoutube and made invidious as default #56

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

@@ -238,6 +238,14 @@ function setAlwaysusePreferred(val) {
   console.log("alwaysusePreferred: ", alwaysusePreferred)
 }
 
+let bypassWatchOnYoutube;
+const getBypassWatchOnYoutube = () => bypassWatchOnYoutube;
+function setBypassWatchOnYoutube(val) {
+  bypassWatchOnYoutube = val;
+  browser.storage.local.set({ bypassWatchOnYoutube })
+  console.log("bypassWatchOnYoutube: ", bypassWatchOnYoutube)
+}
+
 let exceptions = {
   "url": [],
   "regex": [],
@@ -260,24 +268,8 @@ function isException(url) {
   return false;
 }
 
-function isYoutube(url, initiator) {
+function redirect(url, details, initiator) {
-  if (disable) return false;
+  if (disable) return null;
-  if (
-    initiator && (
-      [
-        ...redirects.invidious.normal,
-        ...invidiousNormalCustomRedirects,
-        ...redirects.invidious.tor,
-        ...invidiousTorCustomRedirects,
-
-        ...redirects.piped.normal,
-        ...redirects.piped.tor,
-        ...pipedNormalCustomRedirects,
-        ...pipedTorCustomRedirects
-      ].includes(initiator.origin) ||
-      targets.includes(initiator.host)
-    )
-  ) return false;
 
   let isTargets = targets.some((rx) => rx.test(url.href));
   let protocolHost = `${url.protocol}//${url.host}`;
@@ -307,46 +299,67 @@ function isYoutube(url, initiator) {
   }
 
   if (frontend == 'invidious') {
-    if (alwaysusePreferred)
+    if (alwaysusePreferred) {
-      return isTargets | redirects.piped.normal.includes(protocolHost) | isInvidious;
+      if (!(isTargets | redirects.piped.normal.includes(protocolHost) | isInvidious)) return null;
-    else
+    }
-      return isTargets | isPiped;
+    else {
+      if (!(isTargets | isPiped)) return null;
+    }
   }
   if (frontend == 'piped') {
-    if (alwaysusePreferred)
+    if (alwaysusePreferred) {
-      return isTargets | isPiped | redirects.invidious.normal.includes(protocolHost);
+      if (!(isTargets | isPiped | redirects.invidious.normal.includes(protocolHost))) return null;
-    else
+    }
-      return isTargets | isInvidious;
+    else {
+      if (!(isTargets | isInvidious)) return null;
+    }
   }
   else
-    return isTargets
+    if (!isTargets) return null;
-}
 
-function redirect(url, type, details) {
+
-  if (type != "main_frame" && details.frameAncestors.length > 0 && isException(new URL(details.frameAncestors[0].url))) {
+  if (details.type != "main_frame" && details.frameAncestors && details.frameAncestors.length > 0 && isException(new URL(details.frameAncestors[0].url))) {
     console.log(`Canceled ${url.href}`, details.frameAncestors[0].url)
     return null;
   }
+  if (
+    bypassWatchOnYoutube &&
+    initiator && (
+      [
+        ...redirects.invidious.normal,
+        ...invidiousNormalCustomRedirects,
+        ...redirects.invidious.tor,
+        ...invidiousTorCustomRedirects,
+
+        ...redirects.piped.normal,
+        ...redirects.piped.tor,
+        ...pipedNormalCustomRedirects,
+        ...pipedTorCustomRedirects
+      ].includes(initiator.origin) ||
+      targets.includes(initiator.host)
+    )
+  ) return 'BYBASSTAB';
+
   if (url.pathname.match(/iframe_api/) || url.pathname.match(/www-widgetapi/)) return null; // Don't redirect YouTube Player API.
 
-  if (frontend == 'yatte' && type === "main_frame")
+  if (frontend == 'yatte' && details.type === "main_frame")
     return url.href.replace(/^https?:\/\//, 'yattee://');
 
-  else if (frontend == 'freetube' && type === "main_frame")
+  else if (frontend == 'freetube' && details.type === "main_frame")
     return `freetube://${url}`;
 
-  else if (frontend == 'freetube' && type !== "main_frame" && youtubeEmbedFrontend == "youtube")
+  else if (frontend == 'freetube' && details.type !== "main_frame" && youtubeEmbedFrontend == "youtube")
     return null;
 
   else if (
     frontend == 'invidious' ||
-    ((frontend == 'freetube' || frontend == 'yatte') && youtubeEmbedFrontend == 'invidious' && type == "sub_frame")
+    ((frontend == 'freetube' || frontend == 'yatte') && youtubeEmbedFrontend == 'invidious' && details.type == "sub_frame")
   ) {
 
-    if (OnlyEmbeddedVideo == 'onlyEmbedded' && type !== "sub_frame") return null;
+    if (OnlyEmbeddedVideo == 'onlyEmbedded' && details.type !== "sub_frame") return null;
     if (
-      OnlyEmbeddedVideo == 'onlyNotEmbedded' && type !== "main_frame" &&
+      OnlyEmbeddedVideo == 'onlyNotEmbedded' && details.type !== "main_frame" &&
-      !((frontend == 'freetube' || frontend == 'yatte') && youtubeEmbedFrontend == 'invidious' && type === "sub_frame")
+      !((frontend == 'freetube' || frontend == 'yatte') && youtubeEmbedFrontend == 'invidious' && details.type === "sub_frame")
     ) return null;
 
     let instancesList;
@@ -360,13 +373,13 @@ function redirect(url, type, details) {
 
   } else if (
     frontend == 'piped' ||
-    ((frontend == 'freetube' || frontend == 'yatte') && youtubeEmbedFrontend == 'piped' && type === "sub_frame")
+    ((frontend == 'freetube' || frontend == 'yatte') && youtubeEmbedFrontend == 'piped' && details.type === "sub_frame")
   ) {
 
-    if (OnlyEmbeddedVideo == 'onlyEmbedded' && type !== "sub_frame") return null;
+    if (OnlyEmbeddedVideo == 'onlyEmbedded' && details.type !== "sub_frame") return null;
     if (
-      OnlyEmbeddedVideo == 'onlyNotEmbedded' && type !== "main_frame" &&
+      OnlyEmbeddedVideo == 'onlyNotEmbedded' && details.type !== "main_frame" &&
-      !((frontend == 'freetube' || frontend == 'yatte') && youtubeEmbedFrontend == 'piped' && type == "sub_frame")
+      !((frontend == 'freetube' || frontend == 'yatte') && youtubeEmbedFrontend == 'piped' && details.type == "sub_frame")
     ) return null;
 
     let instancesList;
@@ -419,9 +432,9 @@ function changeInstance(url) {
   return randomInstance;
 }
 
-function isPipedorInvidious(url, type) {
+function isPipedorInvidious(url, details) {
   let protocolHost = `${url.protocol}//${url.host}`;
-  return (type === "main_frame" || type === "sub_frame") && [
+  return (details.type === "main_frame" || details.type === "sub_frame") && [
     ...redirects.invidious.normal,
     ...invidiousNormalCustomRedirects,
     ...redirects.invidious.tor,
@@ -579,7 +592,8 @@ async function init() {
 
           "youtubeProtocol",
 
-          "youtubeEmbedExceptions"
+          "youtubeEmbedExceptions",
+          "bypassWatchOnYoutube"
         ],
         (result) => {
           redirects.invidious = dataJson.invidious;
@@ -587,7 +601,7 @@ async function init() {
 
           disable = result.disableYoutube ?? false;
           protocol = result.youtubeProtocol ?? 'normal';
-          frontend = result.youtubeFrontend ?? 'piped';
+          frontend = result.youtubeFrontend ?? 'invidious';
           youtubeEmbedFrontend = result.youtubeEmbedFrontend ?? 'invidious';
 
           theme = result.youtubeTheme ?? 'DEFAULT';
@@ -616,6 +630,8 @@ async function init() {
 
           alwaysusePreferred = result.alwaysusePreferred ?? true;
 
+          bypassWatchOnYoutube = result.bypassWatchOnYoutube ?? true;
+
           if (result.youtubeEmbedExceptions) exceptions = result.youtubeEmbedExceptions;
 
           resolve();
@@ -625,6 +641,8 @@ async function init() {
 }
 
 export default {
+  getBypassWatchOnYoutube,
+  setBypassWatchOnYoutube,
   invidiousInitCookies,
 
   getFrontend,
@@ -639,7 +657,6 @@ export default {
   setPipedRedirects,
 
   redirect,
-  isYoutube,
   changeInstance,
 
   isPipedorInvidious,

src/pages/background/background.js

@@ -36,6 +36,8 @@ wholeInit();
 
 browser.storage.onChanged.addListener(wholeInit);
 
+let bybassTabs = [];
+
 browser.webRequest.onBeforeRequest.addListener(
   (details) => {
     const url = new URL(details.url);
@@ -49,36 +51,43 @@ browser.webRequest.onBeforeRequest.addListener(
 
     if (exceptionsHelper.isException(url, initiator)) newUrl = null;
 
-    else if (youtubeMusicHelper.isYoutubeMusic(url, initiator)) newUrl = youtubeMusicHelper.redirect(url, details.type)
+    if (!newUrl) newUrl = youtubeHelper.redirect(url, details, initiator)
-    else if (youtubeHelper.isYoutube(url, initiator)) newUrl = youtubeHelper.redirect(url, details.type, details)
+    if (youtubeMusicHelper.isYoutubeMusic(url, initiator)) newUrl = youtubeMusicHelper.redirect(url, details.type)
 
-    else if (twitterHelper.isTwitter(url, initiator)) newUrl = twitterHelper.redirect(url);
+    if (twitterHelper.isTwitter(url, initiator)) newUrl = twitterHelper.redirect(url);
 
-    else if (instagramHelper.isInstagram(url, initiator)) newUrl = instagramHelper.redirect(url, details.type);
+    if (instagramHelper.isInstagram(url, initiator)) newUrl = instagramHelper.redirect(url, details.type);
 
-    else if (mapsHelper.isMaps(url, initiator)) newUrl = mapsHelper.redirect(url);
+    if (mapsHelper.isMaps(url, initiator)) newUrl = mapsHelper.redirect(url);
 
-    else if (redditHelper.isReddit(url, initiator)) newUrl = redditHelper.redirect(url, details.type);
+    if (redditHelper.isReddit(url, initiator)) newUrl = redditHelper.redirect(url, details.type);
 
-    else if (mediumHelper.isMedium(url, initiator)) newUrl = mediumHelper.redirect(url, details.type);
+    if (mediumHelper.isMedium(url, initiator)) newUrl = mediumHelper.redirect(url, details.type);
 
-    else if (imgurHelper.isImgur(url, initiator)) newUrl = imgurHelper.redirect(url, details.type);
+    if (imgurHelper.isImgur(url, initiator)) newUrl = imgurHelper.redirect(url, details.type);
 
-    else if (tiktokHelper.isTiktok(url, initiator)) newUrl = tiktokHelper.redirect(url, details.type);
+    if (tiktokHelper.isTiktok(url, initiator)) newUrl = tiktokHelper.redirect(url, details.type);
 
-    else if (translateHelper.isTranslate(url, initiator)) newUrl = translateHelper.redirect(url);
+    if (translateHelper.isTranslate(url, initiator)) newUrl = translateHelper.redirect(url);
 
-    else if (searchHelper.isSearch(url)) newUrl = searchHelper.redirect(url)
+    if (searchHelper.isSearch(url)) newUrl = searchHelper.redirect(url)
 
-    else if (wikipediaHelper.isWikipedia(url, initiator)) newUrl = wikipediaHelper.redirect(url);
+    if (wikipediaHelper.isWikipedia(url, initiator)) newUrl = wikipediaHelper.redirect(url);
 
     if (youtubeHelper.isPipedorInvidious(newUrl ?? url, details.type)) newUrl = youtubeHelper.addUrlParams(newUrl ?? url);
 
+    if (bybassTabs.includes(details.tabId)) newUrl = null;
+
     if (newUrl) {
       if (newUrl == 'CANCEL') {
         console.log(`Canceled ${url}`);
         return { cancel: true };
       }
+      else if (newUrl == 'BYBASSTAB') {
+        console.log(`Bybassed ${details.tabId}`);
+        bybassTabs.push(details.tabId);
+        return null;
+      }
       else {
         console.info("Redirecting", url.href, "=>", newUrl);
         return { redirectUrl: newUrl };
@@ -90,6 +99,13 @@ browser.webRequest.onBeforeRequest.addListener(
   ["blocking"]
 );
 
+browser.tabs.onRemoved.addListener((tabId) => {
+  let index = bybassTabs.indexOf(tabId);
+  if (index > -1) bybassTabs.splice(index, 1);
+  console.log("Removed bybassTabs", tabId);
+});
+
+
 browser.tabs.onUpdated.addListener(
   (tabId, changeInfo) => {
     if (changeInfo.url && youtubeHelper.isUrlPipedorInvidious(changeInfo.url))

src/pages/options/youtube/youtube.html

@@ -166,6 +166,11 @@
         <input id="always-use-preferred" type="checkbox" checked />
       </div>
 
+      <div class="some-block option-block">
+        <h4>Bypass Watch On YouTube</h4>
+        <input id="bypass-watch-on-youtube" type="checkbox" checked />
+      </div>
+
       <div class="some-block option-block">
         <h4>Volume: <span id="volume-value">50%</span></h4>
         <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />

src/pages/options/youtube/youtube.js

@@ -9,6 +9,8 @@ let invidiousPipedDivElement = document.getElementById("invidious-piped");
 let freetubeYatteDivElement = document.getElementById("freetube-yatte");
 
 
+
+
 function changeFrontendsSettings(frontend) {
     if (frontend == 'piped') {
         invidiousPipedDivElement.style.display = 'block'
@@ -27,6 +29,7 @@ function changeFrontendsSettings(frontend) {
         pipedDivElement.style.display = 'none';
         invidiousDivElement.style.display = 'none';
         freetubeYatteDivElement.style.display = 'block';
+        changeYoutubeEmbedFrontendsSettings(youtubeHelper.getYoutubeEmbedFrontend());
     }
 }
 
@@ -48,17 +51,16 @@ function changeYoutubeEmbedFrontendsSettings(youtubeEmbedFrontend) {
     }
 }
 youtubeFrontendElement.addEventListener("change",
-    (event) => {
+    event => {
         let frontend = event.target.options[youtubeFrontendElement.selectedIndex].value
         youtubeHelper.setFrontend(frontend);
         changeFrontendsSettings(frontend);
-        changeYoutubeEmbedFrontendsSettings(youtubeHelper.getYoutubeEmbedFrontend());
     }
 );
 
 let youtubeEmbedFrontendElement = document.getElementById("youtube-embed-frontend");
 youtubeEmbedFrontendElement.addEventListener("change",
-    (event) => {
+    event => {
         let youtubeEmbedFrontend = event.target.options[youtubeEmbedFrontendElement.selectedIndex].value
         youtubeHelper.setYoutubeEmbedFrontend(youtubeEmbedFrontend);
         changeYoutubeEmbedFrontendsSettings(youtubeEmbedFrontend);
@@ -66,12 +68,12 @@ youtubeEmbedFrontendElement.addEventListener("change",
 );
 
 disableYoutubeElement.addEventListener("change",
-    (event) => youtubeHelper.setDisable(!event.target.checked)
+    event => youtubeHelper.setDisable(!event.target.checked)
 );
 
 let themeElement = document.getElementById("invidious-theme");
 themeElement.addEventListener("change",
-    (event) => youtubeHelper.setTheme(event.target.options[themeElement.selectedIndex].value)
+    event => youtubeHelper.setTheme(event.target.options[themeElement.selectedIndex].value)
 );
 
 let volumeElement = document.getElementById("invidious-volume");
@@ -93,22 +95,27 @@ invidiousClearVolumeElement.addEventListener("click",
 
 let autoplayElement = document.getElementById("invidious-autoplay");
 autoplayElement.addEventListener("change",
-    (event) => youtubeHelper.setAutoplay(event.target.options[autoplayElement.selectedIndex].value)
+    event => youtubeHelper.setAutoplay(event.target.options[autoplayElement.selectedIndex].value)
 );
 
 let OnlyEmbeddedVideoElement = document.getElementById("only-embed");
 OnlyEmbeddedVideoElement.addEventListener("change",
-    (event) => youtubeHelper.setOnlyEmbeddedVideo(event.target.options[OnlyEmbeddedVideoElement.selectedIndex].value)
+    event => youtubeHelper.setOnlyEmbeddedVideo(event.target.options[OnlyEmbeddedVideoElement.selectedIndex].value)
 );
 
 let alwaysUsePreferredElement = document.getElementById("always-use-preferred")
 alwaysUsePreferredElement.addEventListener("change",
-    (event) => youtubeHelper.setAlwaysusePreferred(event.target.checked)
+    event => youtubeHelper.setAlwaysusePreferred(event.target.checked)
+);
+
+let bypassWatchOnYoutubeElement = document.getElementById("bypass-watch-on-youtube")
+bypassWatchOnYoutubeElement.addEventListener("change",
+    event => youtubeHelper.setBypassWatchOnYoutube(event.target.checked)
 );
 
 let protocolElement = document.getElementById("protocol")
 protocolElement.addEventListener("change",
-    (event) => {
+    event => {
         let protocol = event.target.options[protocolElement.selectedIndex].value
         youtubeHelper.setProtocol(protocol);
         changeProtocolSettings(protocol);
@@ -142,6 +149,7 @@ youtubeHelper.init().then(() => {
     volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
     OnlyEmbeddedVideoElement.value = youtubeHelper.getOnlyEmbeddedVideo();
     alwaysUsePreferredElement.checked = youtubeHelper.getAlwaysusePreferred();
+    bypassWatchOnYoutubeElement.checked = youtubeHelper.getBypassWatchOnYoutube();
     autoplayElement.checked = youtubeHelper.getAutoplay();
     let frontend = youtubeHelper.getFrontend();
     youtubeFrontendElement.value = frontend;