huge mobile browsing improvement (#81)

* change userAgent if on mobile * disneyplus works nice * replace all ua on mobile * better for loop * finished prime video * chrome * changelog * add viewport to amazon * customized website * chrome * chrome * version 1.0.75 * formatting * UserAgentSwitch * userAgent * message * fixed settings spread * settings.Video?.userAgent * make settings better * chrome * isMobile * categoryMobile * navMain * chrome * rm old extensions * better experience * chrome * changelog * zip * shorter code * reload only if changed * new version * zip
Dreamlinerm · Jan 6, 2024 · 05b8e66 · 05b8e66
1 parent be15486
commit 05b8e66
Show file tree

Hide file tree

Showing 38 changed files with 775 additions and 109 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,5 @@
 {
   "tabWidth": 2,
-  "printWidth": 200,
+  "printWidth": 150,
   "useTabs": false
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 
 <div>
             <div class="line flex">
-              <h2>1.0.74</h2>
+              <h2>1.0.75</h2>
               <ul>
                 <li>Released for Firefox on Android</li>
               </ul>

diff --git a/chrome/_locales/de/messages.json b/chrome/_locales/de/messages.json
@@ -249,5 +249,11 @@
   },
   "EpilepsySwitchDescription": {
     "message": "Beim überspringen der Werbung den Bildschrim verdunkeln"
+  },
+  "UserAgentSwitch": {
+    "message": "Zu Desktop-Webseiten wechseln"
+  },
+  "UserAgentSwitchDescription": {
+    "message": "Für prime video und disney+ auf die Desktop-Website wechseln und für amazon die Website mobilfreundlich machen"
   }
 }
diff --git a/chrome/_locales/en/messages.json b/chrome/_locales/en/messages.json
@@ -249,5 +249,11 @@
   },
   "EpilepsySwitchDescription": {
     "message": "Darken the screen when skipping the ad"
+  },
+  "UserAgentSwitch": {
+    "message": "Switch to desktop websites"
+  },
+  "UserAgentSwitchDescription": {
+    "message": "For prime video and disney+ change to the Desktop website and for amazon make the site mobile friendly"
   }
 }
diff --git a/chrome/_locales/mk/messages.json b/chrome/_locales/mk/messages.json
@@ -243,5 +243,11 @@
   },
   "EpilepsySwitchDescription": {
     "message": "Затемни го екранот кога ја прескокнуваш рекламата"
+  },
+  "UserAgentSwitch": {
+    "message": "Префрли се на веб-локации за десктоп"
+  },
+  "UserAgentSwitchDescription": {
+    "message": "За примарното видео и disney+ сменете на веб-страницата на Desktop и за amazon направете ја страницата пријателска за мобилни телефони"
   }
 }
diff --git a/chrome/_locales/pt_BR/messages.json b/chrome/_locales/pt_BR/messages.json
@@ -243,5 +243,11 @@
   },
   "EpilepsySwitchDescription": {
     "message": "Escurecer a tela ao pular o anúncio"
+  },
+  "UserAgentSwitch": {
+    "message": "Mudar para sites de desktop"
+  },
+  "UserAgentSwitchDescription": {
+    "message": "Para o Prime Video e a Disney+, mude para o site para desktop e, para a Amazon, torne o site compatível com dispositivos móveis"
   }
 }
diff --git a/chrome/badge.js b/chrome/badge.js
@@ -14,6 +14,7 @@
 console.log("badge.js loaded");
 chrome.action.setBadgeBackgroundColor({ color: "#d90000" });
 let Badges = {};
+const isMobile = /Android/i.test(navigator.userAgent);
 /**
  *
  * Increases Badge by 1
@@ -81,3 +82,96 @@ chrome.runtime.onInstalled.addListener((details) => {
     });
   }
 });
+
+if (isMobile) {
+  const defaultSettings = {
+    settings: {
+      Amazon: {
+        skipIntro: true,
+        skipCredits: true,
+        watchCredits: false,
+        skipAd: true,
+        blockFreevee: true,
+        speedSlider: true,
+        filterPaid: false,
+        showRating: true,
+      },
+      Netflix: {
+        skipIntro: true,
+        skipRecap: true,
+        skipCredits: true,
+        watchCredits: false,
+        skipBlocked: true,
+        skipAd: true,
+        speedSlider: true,
+        profile: true,
+        showRating: true,
+      },
+      Disney: { skipIntro: true, skipCredits: true, watchCredits: false, speedSlider: true, showRating: true },
+      Crunchyroll: { skipIntro: true, speedSlider: true, releaseCalendar: true },
+      Video: { playOnFullScreen: true, epilepsy: false, userAgent: true },
+      Statistics: { AmazonAdTimeSkipped: 0, NetflixAdTimeSkipped: 0, IntroTimeSkipped: 0, RecapTimeSkipped: 0, SegmentsSkipped: 0 },
+      General: { profileName: null, profilePicture: null, sliderSteps: 1, sliderMin: 5, sliderMax: 20, filterDub: true, filterQueued: true },
+    },
+  };
+  let settings = defaultSettings.settings;
+  chrome.storage.sync.get("settings", function (result) {
+    // if there is an undefined setting, set it to the default
+    // apparently 2 depth gets overwritten so here it is
+    settings.Amazon = { ...defaultSettings.settings.Amazon, ...result.settings.Amazon };
+    settings.Netflix = { ...defaultSettings.settings.Netflix, ...result.settings.Netflix };
+    settings.Disney = { ...defaultSettings.settings.Disney, ...result.settings.Disney };
+    settings.Crunchyroll = { ...defaultSettings.settings.Crunchyroll, ...result.settings.Crunchyroll };
+    settings.Video = { ...defaultSettings.settings.Video, ...result.settings.Video };
+    settings.Statistics = { ...defaultSettings.settings.Statistics, ...result.settings.Statistics };
+    settings.General = { ...defaultSettings.settings.General, ...result.settings.General };
+    ChangeUserAgent();
+    console.log("userAgent", settings.Video.userAgent);
+  });
+
+  chrome.storage.sync.onChanged.addListener(function (changes) {
+    if (changes?.settings) {
+      const { oldValue, newValue } = changes.settings;
+      settings = newValue;
+      if (newValue.Video.userAgent !== oldValue?.Video?.userAgent) {
+        console.log("userAgent", settings.Video.userAgent);
+        // remove listener
+        if (!newValue?.Video?.userAgent) {
+          chrome.webRequest.onBeforeSendHeaders.removeListener(ReplaceUserAgent);
+        } else {
+          ChangeUserAgent();
+        }
+      }
+    }
+  });
+  const newUa = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36 streamingEnhanced";
+  function ReplaceUserAgent(details) {
+    for (let header of details.requestHeaders) {
+      if (header.name === "User-Agent") {
+        header.value = newUa;
+        break;
+      }
+    }
+    return { requestHeaders: details.requestHeaders };
+  }
+
+  function ChangeUserAgent() {
+    if (settings.Video.userAgent) {
+      chrome.webRequest.onBeforeSendHeaders.addListener(
+        ReplaceUserAgent,
+        {
+          urls: [
+            "*://*.disneyplus.com/*",
+            // these are only the prime video urls
+            "*://*.primevideo.com/*",
+            "*://*.amazon.com/gp/video/*",
+            "*://*.amazon.co.jp/gp/video/*",
+            "*://*.amazon.de/gp/video/*",
+            "*://*.amazon.co.uk/gp/video/*",
+          ],
+        },
+        ["blocking", "requestHeaders"]
+      );
+    }
+  }
+}
diff --git a/chrome/cr.js b/chrome/cr.js
@@ -13,21 +13,53 @@
 /* global chrome */
 const defaultSettings = {
   settings: {
-    Amazon: { skipIntro: true, skipCredits: true, watchCredits: false, skipAd: true, blockFreevee: true, speedSlider: true, filterPaid: false, showRating: true },
-    Netflix: { skipIntro: true, skipRecap: true, skipCredits: true, watchCredits: false, skipBlocked: true, skipAd: true, speedSlider: true, profile: true, showRating: true },
+    Amazon: {
+      skipIntro: true,
+      skipCredits: true,
+      watchCredits: false,
+      skipAd: true,
+      blockFreevee: true,
+      speedSlider: true,
+      filterPaid: false,
+      showRating: true,
+    },
+    Netflix: {
+      skipIntro: true,
+      skipRecap: true,
+      skipCredits: true,
+      watchCredits: false,
+      skipBlocked: true,
+      skipAd: true,
+      speedSlider: true,
+      profile: true,
+      showRating: true,
+    },
     Disney: { skipIntro: true, skipCredits: true, watchCredits: false, speedSlider: true, showRating: true },
     Crunchyroll: { skipIntro: true, speedSlider: true, releaseCalendar: true },
-    Video: { playOnFullScreen: true, epilepsy: false },
+    Video: { playOnFullScreen: true, epilepsy: false, userAgent: true },
     Statistics: { AmazonAdTimeSkipped: 0, NetflixAdTimeSkipped: 0, IntroTimeSkipped: 0, RecapTimeSkipped: 0, SegmentsSkipped: 0 },
     General: { profileName: null, profilePicture: null, sliderSteps: 1, sliderMin: 5, sliderMax: 20, filterDub: true, filterQueued: true },
   },
 };
 let settings = defaultSettings.settings;
-const version = "1.0.74";
+const version = "1.0.75";
 chrome.storage.sync.get("settings", function (result) {
-  console.log("%cNetflix%c/%cPrime%c Auto-Skip", "color: #e60010;font-size: 2em;", "color: white;font-size: 2em;", "color: #00aeef;font-size: 2em;", "color: white;font-size: 2em;");
+  console.log(
+    "%cNetflix%c/%cPrime%c Auto-Skip",
+    "color: #e60010;font-size: 2em;",
+    "color: white;font-size: 2em;",
+    "color: #00aeef;font-size: 2em;",
+    "color: white;font-size: 2em;"
+  );
   console.log("version:", version);
-  settings = { ...defaultSettings.settings, ...result.settings };
+  // apparently 2 depth gets overwritten so here it is
+  settings.Amazon = { ...defaultSettings.settings.Amazon, ...result.settings.Amazon };
+  settings.Netflix = { ...defaultSettings.settings.Netflix, ...result.settings.Netflix };
+  settings.Disney = { ...defaultSettings.settings.Disney, ...result.settings.Disney };
+  settings.Crunchyroll = { ...defaultSettings.settings.Crunchyroll, ...result.settings.Crunchyroll };
+  settings.Video = { ...defaultSettings.settings.Video, ...result.settings.Video };
+  settings.Statistics = { ...defaultSettings.settings.Statistics, ...result.settings.Statistics };
+  settings.General = { ...defaultSettings.settings.General, ...result.settings.General };
   CrunchyrollObserver.observe(document, config);
   if (settings?.Video?.playOnFullScreen) startPlayOnFullScreen();
 });
@@ -96,7 +128,10 @@ let reverseButtonEndTime;
 function addButton(video, startTime, endTime) {
   if (reverseButtonClicked) return;
   const button = document.createElement("div");
-  button.setAttribute("class", "reverse-button css-1dbjc4n r-1awozwy r-lj0ial r-1jd5jdk r-1loqt21 r-18u37iz r-eu3ka r-1777fci r-kuhrb7 r-ymttw5 r-u8s1d r-1ff5aok r-1otgn73");
+  button.setAttribute(
+    "class",
+    "reverse-button css-1dbjc4n r-1awozwy r-lj0ial r-1jd5jdk r-1loqt21 r-18u37iz r-eu3ka r-1777fci r-kuhrb7 r-ymttw5 r-u8s1d r-1ff5aok r-1otgn73"
+  );
   button.style = "color:white;";
   button.textContent = "Watch skipped ?";
 

diff --git a/chrome/manifest.json b/chrome/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_extensionName__",
   "description": "__MSG_extensionDescription__",
-  "version": "1.0.74",
+  "version": "1.0.75",
 
   "homepage_url": "https://github.com/Dreamlinerm/Netflix-Prime-Auto-Skip",
   "icons": {
@@ -35,7 +35,17 @@
       "matches": ["https://static.crunchyroll.com/vilos-v2/web/vilos/player.html*"]
     }
   ],
-  "permissions": ["storage"],
+  "permissions": [
+    "storage",
+    "webRequest",
+    "webRequestBlocking",
+    "*://*.disneyplus.com/*",
+    "*://*.primevideo.com/*",
+    "*://*.amazon.com/*",
+    "*://*.amazon.co.jp/*",
+    "*://*.amazon.de/*",
+    "*://*.amazon.co.uk/*"
+  ],
   "action": {
     "default_icon": {
       "16": "icons/NetflixAmazon Auto-Skip--16.png",

diff --git a/chrome/popup/popup.html b/chrome/popup/popup.html
@@ -30,7 +30,7 @@
           <img class="Logo" src="../icons/NetflixAmazon Auto-Skip.svg" />
           <div class="flex-center flex-col">
             <h2 class="title" i18n>pageTitle</h2>
-            <p style="color: grey; font-size: 1em">v.1.0.74</p>
+            <p style="color: grey; font-size: 1em">v.1.0.75</p>
           </div>
         </div>
         <a
@@ -43,7 +43,15 @@ <h2 class="title" i18n>pageTitle</h2>
           <img src="https://img.shields.io/chrome-web-store/stars/akaimhgappllmlkadblbdknhbfghdgle?color=e60010" />
         </a>
         <a href="settings.html" target="_blank">
-          <svg xmlns="http://www.w3.org/2000/svg" class="settingsIcon" enable-background="new 0 0 24 24" height="50px" viewBox="0 0 24 24" width="50px" fill="white">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="settingsIcon"
+            enable-background="new 0 0 24 24"
+            height="50px"
+            viewBox="0 0 24 24"
+            width="50px"
+            fill="white"
+          >
             <g>
               <path d="M0,0h24v24H0V0z" fill="none" />
               <path
@@ -54,6 +62,15 @@ <h2 class="title" i18n>pageTitle</h2>
           </svg>
         </a>
       </div>
+      <div class="categoryMobile">
+        <div class="line flex">
+          <p i18n>UserAgentSwitch</p>
+          <label class="switch">
+            <input type="checkbox" id="VideoUserAgent" />
+            <span class="slider round"></span>
+          </label>
+        </div>
+      </div>
       <div class="categoryVideo">
         <div id="openVideoSettings" class="flex flex-between" style="padding: 5px 5px">
           <h2 id="openVideoSettings" i18n>SharedPageTitle</h2>
@@ -150,7 +167,9 @@ <h2 id="openVideoSettings" i18n>SharedPageTitle</h2>
               </g>
             </svg>
           </div>
-          <div class="line" style="width: 350px"><i18n>gotoIndividual</i18n><a href="settings.html" target="_blank" style="color: white" i18n>extendedSettings</a></div>
+          <div class="line" style="width: 350px">
+            <i18n>gotoIndividual</i18n><a href="settings.html" target="_blank" style="color: white" i18n>extendedSettings</a>
+          </div>
         </div>
       </div>
       <div class="categoryPrime">