Merge branch 'Anarios:main' into main

Extensions/combined/debug.js

@@ -1,8 +0,0 @@
-//---   Get Extension Information   ---//
-const extension = chrome.runtime.getManifest();
-
-//---   Get Debug Elements   ---//
-const ver = document.getElementById("extension-version");
-
-//---   Set Debug Elements   ---//
-ver.innerHTML = extension.version;

Extensions/combined/manifest-chrome.json

@@ -25,7 +25,7 @@
         "*://m.youtube.com/*"
       ],
       "exclude_matches": ["*://*.music.youtube.com/*"],
-      "js": ["bundled-content-script.js"],
+      "js": ["ryd.content-script.js"],
       "css": ["content-style.css"]
     }
   ],

Extensions/combined/manifest-firefox.json

@@ -20,7 +20,7 @@
       "exclude_matches": ["*://*.music.youtube.com/*"],
       "run_at": "document_idle",
       "css": ["content-style.css"],
-      "js": ["bundled-content-script.js"]
+      "js": ["ryd.content-script.js"]
     }
   ]
 }

Extensions/combined/popup.css

@@ -43,14 +43,47 @@ button:hover {
 }
 
 #ext-version {
+  padding: .25rem .5rem;
+}
+
+#ext-update {
+  cursor: pointer;
+  color: var(--white);
+  text-decoration: none;
+  background: var(--primary);
+  border-radius: .25rem;
+}
+#ext-update:hover {
+  text-decoration: underline;
+}
+
+#ext {
+  padding: .25rem 0;
   z-index: 69;
   position: fixed;
+  background: var(--secondary);
   margin: 0;
   bottom: 1.15rem;
   right: 1.15rem;
-  background: var(--secondary);
   border-radius: .25rem;
-  padding: .25rem .5rem;
+}
+
+.switch:before {
+  content: attr(data-hover);
+  visibility: hidden;
+  width: 250px;
+  background-color: var(--secondary);
+  border-radius: .5rem;
+  padding: .5rem;
+
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 160%;
+}
+
+.switch:hover:before {
+  visibility: visible;
 }
 
 #advancedToggle {
@@ -58,7 +91,8 @@ button:hover {
   background: none;
   box-shadow: none;
   color: var(--lightGrey);
-  top: 26px; right: 26px;
+  top: 26px;
+  right: 26px;
   padding: 2px;
   z-index: 69;
   height: 2rem;
@@ -77,12 +111,13 @@ button:hover {
 #advancedSettings {
   opacity: 0;
   pointer-events: none;
-  transition-duration: .15s;
+  transition-duration: 0.15s;
   transition-timing-function: ease-in-out;
   transform: scale(1.1);
   position: fixed;
   background: var(--background);
-  top: 10px; right: 14px;
+  top: 10px;
+  right: 14px;
   width: calc(100% - 65px);
   height: calc(100% - 58px);
   border: 2px solid var(--secondary);

Extensions/combined/popup.html

@@ -26,15 +26,13 @@
       <button id="link_website">Website</button>
       <button id="link_github">GitHub</button>
       <button id="link_discord">Discord</button>
-
       <br />
-
       <button style="margin-top: 0.3rem" id="link_faq">FAQ</button>
       <button style="margin-top: 0.3em" id="link_donate">Donate</button>
+      <button style="margin-top: 0.3em" id="link_help">Help</button>
 
       <br />
       <br />
-
       <p style="display: none">API Status: <b id="status"></b></p>
       <img
         id="server-status"
@@ -42,7 +40,7 @@
         src="./icons/server.svg"
         alt=""
       />
-
+      
       <br />
       <br />
     </center>
@@ -65,16 +63,19 @@
     </button>
 
     <!-- bottom-right -->
-    <p id="ext-version"></p>
+    <div id="ext">
+      <a href="https://returnyoutubedislike.com/install" target="_blank" id="ext-update"></a>
+      <span id="ext-version"></span>
+    </div>
 
     <!-- dialog box -->
     <fieldset id="advancedSettings">
       <legend id="advancedLegend">Settings</legend>
 
-      <label class="switch">
+      <label class="switch" data-hover="Stops counting your likes and dislikes.">
         <input type="checkbox" id="disable_vote_submission" />
         <span class="slider" />
-        <span class="switchLabel">Disable like/dislike submission</span>
+        <span class="switchLabel">Disable vote submission</span>
       </label>
       <!-- <br />
       <label class="switch">

Extensions/combined/popup.js

@@ -12,30 +12,24 @@ const config = {
     discord: "https://discord.gg/mYnESY4Md5",
     donate: "https://returnyoutubedislike.com/donate",
     faq: "https://returnyoutubedislike.com/faq",
+    help: "https://returnyoutubedislike.com/help"
   },
 };
 
-/*   Links   */
-document.getElementById("link_website").addEventListener("click", () => {
-  chrome.tabs.create({ url: config.links.website });
-});
-
-document.getElementById("link_github").addEventListener("click", () => {
-  chrome.tabs.create({ url: config.links.github });
-});
-
-document.getElementById("link_discord").addEventListener("click", () => {
-  chrome.tabs.create({ url: config.links.discord });
-});
-
-document.getElementById("link_faq").addEventListener("click", () => {
-  chrome.tabs.create({ url: config.links.faq });
-});
-
-document.getElementById("link_donate").addEventListener("click", () => {
-  chrome.tabs.create({ url: config.links.donate });
-});
 
+/*   Links   */
+createLink(config.links.website,"link_website")
+createLink(config.links.github,"link_github")
+createLink(config.links.discord,"link_discord")
+createLink(config.links.faq,"link_faq")
+createLink(config.links.donate,"link_donate")
+createLink(config.links.help,"link_help")
+
+function createLink(url,id) {
+  document.getElementById(id).addEventListener("click",()=>{
+    chrome.tabs.create({ url: url})
+  })
+}
 document
   .getElementById("disable_vote_submission")
   .addEventListener("click", (ev) => {
@@ -71,6 +65,19 @@ function initConfig() {
 function initializeVersionNumber() {
   const version = chrome.runtime.getManifest().version;
   document.getElementById('ext-version').innerHTML = 'v' + version;
+
+  fetch(
+    "https://raw.githubusercontent.com/Anarios/return-youtube-dislike/main/Extensions/combined/manifest-chrome.json"
+  )
+    .then((response) => response.json())
+    .then((json) => {
+      if (version !== json.version) {
+        document.getElementById('ext-update').innerHTML = 'update to v' + json.version;
+        document.getElementById('ext-update').style.padding = '.25rem .5rem';
+      }
+    });
+  // .catch(console.error);
+
 }
 
 function initializeDisableVoteSubmission() {
@@ -114,6 +121,7 @@ function handleDisableVoteSubmissionChangeEvent(value) {
   }
 })();
 
+
 /* popup-script.js
 document.querySelector('#login')
 .addEventListener('click', function () {

README.md

@@ -27,7 +27,7 @@ Additionally, the `dislike` field in the YouTube API was [removed](https://suppo
 
 With the removal of dislike stats from the YouTube API, our backend switched to using a combination of scraped dislike stats, estimates extrapolated from extension user data.
 
-[FAQ](https://github.com/Anarios/return-youtube-dislike/blob/main/FAQ.md)
+[FAQ](https://github.com/Anarios/return-youtube-dislike/blob/main/Docs/FAQ.md)
 
 ## Why it Matters
 

Website/layouts/default.vue

@@ -73,29 +73,22 @@ export default {
   }),
   mounted() {
     setTimeout(() => {
-      // check if browser version out of date
+      // Chrome < 70 or FF < 60
       if (
-        window.navigator.userAgent.indexOf("Chrome") > -1 &&
-        window.navigator.userAgent.indexOf("Edge") === -1
+        (this.$ua._parsed.name == "Chrome" &&
+          parseInt(this.$ua._parsed.version.slice(0, 2)) < 70) ||
+        (this.$ua._parsed.name == "Firefox" &&
+          parseInt(this.$ua._parsed.version.slice(0, 2)) < 60)
       ) {
-        let chrome = window.navigator.userAgent.match(/Chrome\/(\d+)/);
-        let chromeVersion = chrome ? chrome[1] : 0;
-        if (chromeVersion < 70) {
-          this.alert.html = `You are using <b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b>. Please update to the latest version.`;
-          this.alert.show = true;
-        }
-      }
-      if (window.navigator.userAgent.indexOf("Firefox") > -1) {
-        let firefox = window.navigator.userAgent.match(/Firefox\/(\d+)/);
-        let firefoxVersion = firefox ? firefox[1] : 0;
-        if (firefoxVersion < 60) {
-          this.alert.html = `You are using <b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b>. Please update to the latest version.`;
-          this.alert.show = true;
-        }
+        this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .25rem .25rem .5rem; margin: 0 .25rem;">
+        ${this.$ua._parsed.name} ${this.$ua._parsed.version.slice(0, 2)}
+        </b> is not supported. Consider upgrading to the latest version.`;
+        this.alert.show = true;
       }
-      // check for IE browser
-      if (window.navigator.userAgent.indexOf("MSIE") > -1) {
-        this.alert.html = `Looks like you're using <b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">Internet Explorer</b>. Stop it, get some help.`;
+
+      // Win7
+      if (window.navigator.userAgent.indexOf("Windows NT 6.1") > -1) {
+        this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem; margin: 0 .25rem;">Windows 7</b> is not supported. Consider upgrading Windows, or installing Linux.`;
         this.alert.show = true;
       }
     }, 1000);
@@ -107,10 +100,9 @@ export default {
 html,
 body {
   height: 100%;
-  background: #111; /* for MacOS/iOS overscroll */
-  height: -webkit-fill-available;
   background: #111;
-  overflow: auto;
+  height: -webkit-fill-available; /* for MacOS/iOS overscroll */
+  scrollbar-color: #424242 #111;
 }
 
 ::selection {
@@ -128,14 +120,18 @@ body {
 
 ::-webkit-scrollbar-thumb {
   background-color: #333; /* color of the scroll thumb */
-  border-radius: 20px; /* roundness of the scroll thumb */
-  border: 4px solid #111; /* creates padding around scroll thumb */
+  border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
+  border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-left: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-top: 0.25rem solid #111; /* creates padding around scroll thumb */
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background-color: #f22; /* color of the scroll thumb */
-  border-radius: 20px; /* roundness of the scroll thumb */
-  border: 4px solid #111; /* creates padding around scroll thumb */
+  border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
+  border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-left: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-top: 0.25rem solid #111; /* creates padding around scroll thumb */
 }
 
 .debug {
@@ -154,14 +150,17 @@ body {
 .topBar {
   padding: 0 3rem;
   width: fit-content !important;
-  background-color: #222 !important;
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  background: rgba(42, 42, 42, 0.75) !important;
   border-radius: 1rem !important;
-  border-radius: 0.75rem;
+  /* border: 1px solid #222; */
   overflow: hidden;
 }
 .title-text {
   font-size: 3rem;
 }
+
 @media (max-width: 768px) {
   /* mobile */
   .title-text {
@@ -186,7 +185,7 @@ body {
 .swoop-right-leave-active {
   transition-duration: 0.1s;
   transition-property: opacity, transform;
-  /* overflow: hidden; */
+  overflow: hidden;
 }
 
 .swoop-left-enter,

Website/nuxt.config.js

@@ -31,14 +31,14 @@ export default {
     apiUrl: "https://returnyoutubedislikeapi.com",
   },
 
-  //server: { host: '0.0.0.0', port: 80 }, //LINE FOR DEBUGGING ONLY
+  server: { host: "0.0.0.0", port: 80 }, //LINE FOR DEBUGGING ONLY
 
   target: "static",
   css: [],
   plugins: [],
   components: true,
   buildModules: ["@nuxtjs/vuetify"],
-  modules: ["nuxt-user-agent"],
+  modules: ["@nuxtjs/axios", "nuxt-user-agent"],
 
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {

Website/package-lock.json

@@ -8,6 +8,7 @@
       "name": "return-youtube-dislike-site",
       "version": "1.1.0",
       "dependencies": {
+        "@nuxtjs/axios": "^5.13.6",
         "core-js": "^3.15.1",
         "nuxt": "^2.15.7",
         "nuxt-user-agent": "^1.2.2",
@@ -2644,6 +2645,31 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/@nuxtjs/axios": {
+      "version": "5.13.6",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.13.6.tgz",
+      "integrity": "sha512-XS+pOE0xsDODs1zAIbo95A0LKlilvJi8YW0NoXYuq3/jjxGgWDxizZ6Yx0AIIjZOoGsXJOPc0/BcnSEUQ2mFBA==",
+      "dependencies": {
+        "@nuxtjs/proxy": "^2.1.0",
+        "axios": "^0.21.1",
+        "axios-retry": "^3.1.9",
+        "consola": "^2.15.3",
+        "defu": "^5.0.0"
+      }
+    },
+    "node_modules/@nuxtjs/axios/node_modules/defu": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-5.0.0.tgz",
+      "integrity": "sha512-VHg73EDeRXlu7oYWRmmrNp/nl7QkdXUxkQQKig0Zk8daNmm84AbGoC8Be6/VVLJEKxn12hR0UBmz8O+xQiAPKQ=="
+    },
+    "node_modules/@nuxtjs/proxy": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/proxy/-/proxy-2.1.0.tgz",
+      "integrity": "sha512-/qtoeqXgZ4Mg6LRg/gDUZQrFpOlOdHrol/vQYMnKu3aN3bP90UfOUB3QSDghUUK7OISAJ0xp8Ld78aHyCTcKCQ==",
+      "dependencies": {
+        "http-proxy-middleware": "^1.0.6"
+      }
+    },
     "node_modules/@nuxtjs/vuetify": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.1.tgz",
@@ -2677,6 +2703,14 @@
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
       "integrity": "sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w=="
     },
+    "node_modules/@types/http-proxy": {
+      "version": "1.17.8",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
+      "integrity": "sha512-5kPLG5BKpWYkw/LVOGWpiq3nEVqxiN32rTgI53Sk12/xHFQ2rG3ehI9IO+O3W2QoKeyB92dJkoka8SUm6BX1pA==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
@@ -3417,6 +3451,23 @@
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
       "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
     },
+    "node_modules/axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dependencies": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
+    "node_modules/axios-retry": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/axios-retry/-/axios-retry-3.2.4.tgz",
+      "integrity": "sha512-Co3UXiv4npi6lM963mfnuH90/YFLKWWDmoBYfxkHT5xtkSSWNqK9zdG3fw5/CP/dsoKB5aMMJCsgab+tp1OxLQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.15.4",
+        "is-retry-allowed": "^2.2.0"
+      }
+    },
     "node_modules/babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -6043,6 +6094,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -6529,6 +6585,25 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.14.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
+      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -7278,6 +7353,45 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dependencies": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/http-proxy-middleware": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-1.3.1.tgz",
+      "integrity": "sha512-13eVVDYS4z79w7f1+NPllJtOQFx/FdUW4btIvVRMaRlUY9VGstAbo5MOhLEuUgZFRHn3x50ufn25zkj/boZnEg==",
+      "dependencies": {
+        "@types/http-proxy": "^1.17.5",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "is-plain-obj": "^3.0.0",
+        "micromatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/http-proxy-middleware/node_modules/is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/https-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
@@ -7835,6 +7949,17 @@
       "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
       "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg=="
     },
+    "node_modules/is-retry-allowed": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-2.2.0.tgz",
+      "integrity": "sha512-XVm7LOeLpTW4jV19QSH38vkswxoLud8sQ57YwJVTPWdiaI9I8keEhGFpBlslyVsgdQy4Opg8QOLb8YRgsyZiQg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-shared-array-buffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz",
@@ -11112,6 +11237,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+    },
     "node_modules/resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -16642,6 +16772,33 @@
         }
       }
     },
+    "@nuxtjs/axios": {
+      "version": "5.13.6",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.13.6.tgz",
+      "integrity": "sha512-XS+pOE0xsDODs1zAIbo95A0LKlilvJi8YW0NoXYuq3/jjxGgWDxizZ6Yx0AIIjZOoGsXJOPc0/BcnSEUQ2mFBA==",
+      "requires": {
+        "@nuxtjs/proxy": "^2.1.0",
+        "axios": "^0.21.1",
+        "axios-retry": "^3.1.9",
+        "consola": "^2.15.3",
+        "defu": "^5.0.0"
+      },
+      "dependencies": {
+        "defu": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/defu/-/defu-5.0.0.tgz",
+          "integrity": "sha512-VHg73EDeRXlu7oYWRmmrNp/nl7QkdXUxkQQKig0Zk8daNmm84AbGoC8Be6/VVLJEKxn12hR0UBmz8O+xQiAPKQ=="
+        }
+      }
+    },
+    "@nuxtjs/proxy": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/proxy/-/proxy-2.1.0.tgz",
+      "integrity": "sha512-/qtoeqXgZ4Mg6LRg/gDUZQrFpOlOdHrol/vQYMnKu3aN3bP90UfOUB3QSDghUUK7OISAJ0xp8Ld78aHyCTcKCQ==",
+      "requires": {
+        "http-proxy-middleware": "^1.0.6"
+      }
+    },
     "@nuxtjs/vuetify": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.1.tgz",
@@ -16675,6 +16832,14 @@
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
       "integrity": "sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w=="
     },
+    "@types/http-proxy": {
+      "version": "1.17.8",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
+      "integrity": "sha512-5kPLG5BKpWYkw/LVOGWpiq3nEVqxiN32rTgI53Sk12/xHFQ2rG3ehI9IO+O3W2QoKeyB92dJkoka8SUm6BX1pA==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/json-schema": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
@@ -17301,6 +17466,23 @@
         }
       }
     },
+    "axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "requires": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
+    "axios-retry": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/axios-retry/-/axios-retry-3.2.4.tgz",
+      "integrity": "sha512-Co3UXiv4npi6lM963mfnuH90/YFLKWWDmoBYfxkHT5xtkSSWNqK9zdG3fw5/CP/dsoKB5aMMJCsgab+tp1OxLQ==",
+      "requires": {
+        "@babel/runtime": "^7.15.4",
+        "is-retry-allowed": "^2.2.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -19311,6 +19493,11 @@
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
     },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -19695,6 +19882,11 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "follow-redirects": {
+      "version": "1.14.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
+      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A=="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -20257,6 +20449,35 @@
         "toidentifier": "1.0.0"
       }
     },
+    "http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "requires": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "http-proxy-middleware": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-1.3.1.tgz",
+      "integrity": "sha512-13eVVDYS4z79w7f1+NPllJtOQFx/FdUW4btIvVRMaRlUY9VGstAbo5MOhLEuUgZFRHn3x50ufn25zkj/boZnEg==",
+      "requires": {
+        "@types/http-proxy": "^1.17.5",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "is-plain-obj": "^3.0.0",
+        "micromatch": "^4.0.2"
+      },
+      "dependencies": {
+        "is-plain-obj": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+          "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA=="
+        }
+      }
+    },
     "https-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
@@ -20652,6 +20873,11 @@
       "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
       "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg=="
     },
+    "is-retry-allowed": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-2.2.0.tgz",
+      "integrity": "sha512-XVm7LOeLpTW4jV19QSH38vkswxoLud8sQ57YwJVTPWdiaI9I8keEhGFpBlslyVsgdQy4Opg8QOLb8YRgsyZiQg=="
+    },
     "is-shared-array-buffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz",
@@ -23285,6 +23511,11 @@
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true
     },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",

Website/package.json

@@ -10,6 +10,7 @@
     "lint": "eslint --fix --ext .js,.vue --ignore-path .eslintignore ."
   },
   "dependencies": {
+    "@nuxtjs/axios": "^5.13.6",
     "core-js": "^3.15.1",
     "nuxt": "^2.15.7",
     "nuxt-user-agent": "^1.2.2",

Website/pages/debug.vue

@@ -1,71 +1,252 @@
 <template>
   <div>
-    <!--   Top Section // "Sections" Card   -->
-    <v-card max-width="600px" class="rounded-lg">
-      <v-card-title style="padding-bottom: 0">Debug Information</v-card-title>
-      <v-card-text style="text-align: left">
-        <!--   Gather Browser Information   -->
-        <span><b>Browser Information:</b></span
-        ><br />
-        <span>Browser: {{ device._parsed.name }}</span
-        ><br />
-        <span>Browser Vendor: {{ device._parsed.vendor }}</span
+    <v-stepper :value="progress" class="mt-12" outlined max-width="800px">
+      <v-stepper-header>
+        <v-stepper-step step="1" :complete="steps.one">Setup</v-stepper-step>
+        <v-divider />
+        <v-stepper-step step="2" :complete="steps.two"
+          >Extension Status</v-stepper-step
+        >
+        <v-divider />
+        <v-stepper-step step="3" :complete="steps.three"
+          >Server Connection</v-stepper-step
+        >
+        <v-divider />
+        <v-stepper-step step="4" :complete="steps.four"
+          >Browser Support</v-stepper-step
+        >
+        <v-divider />
+        <v-stepper-step step="5" :complete="steps.five">Report</v-stepper-step>
+      </v-stepper-header>
+
+      <v-stepper-content step="1">
+        <h1>Getting Ready...</h1>
+        <v-progress-circular
+          indeterminate
+          size="50"
+          width="5"
+          color="primary"
+        />
+      </v-stepper-content>
+
+      <v-stepper-content step="2">
+        <h1>Ensuring the Extension is Running...</h1>
+        <v-progress-circular
+          indeterminate
+          size="50"
+          width="5"
+          color="primary"
+        />
+      </v-stepper-content>
+
+      <v-stepper-content step="3">
+        <h1>Testing Server Connection...</h1>
+        <v-progress-circular
+          indeterminate
+          size="50"
+          width="5"
+          color="primary"
+        />
+      </v-stepper-content>
+
+      <v-stepper-content step="4">
+        <h1>Checking Browser Information...</h1>
+        <v-progress-circular
+          indeterminate
+          size="50"
+          width="5"
+          color="primary"
+        />
+      </v-stepper-content>
+
+      <v-stepper-content step="5" style="text-align: left">
+        <div class="reportHeader">
+          <h1>Browser</h1>
+          <v-divider style="transform: translateY(1.5em)" />
+        </div>
+        <v-alert
+          dense
+          outlined
+          :type="notices.browser.type"
+          v-text="notices.browser.text"
+        />
+        <span><b>BROWSER-</b> {{ userInformation.browser.name }}</span
         ><br />
-        <span>Version: {{ device._parsed.version }}</span
+        <span><b>VENDOR-</b> {{ userInformation.browser.vendor }} </span><br />
+        <span><b>VERSION-</b> {{ userInformation.browser.version }}</span
         ><br />
-        <span>Operating System: {{ device._parsed.os }}</span
+
+        <div class="reportHeader">
+          <h1>System</h1>
+          <v-divider style="transform: translateY(1.5em)" />
+        </div>
+        <v-alert
+          dense
+          outlined
+          :type="notices.system.type"
+          v-text="notices.system.text"
+        />
+        <span><b>OS-</b> {{ userInformation.system.os }}</span
         ><br />
-        <span>Operating System Version: {{ device._parsed.os_version }}</span
+        <span><b>VERSION-</b> {{ userInformation.system.version }} </span><br />
+        <span><b>TYPE-</b> {{ userInformation.system.type }}</span
         ><br />
-        <span>Device Type: {{ device._parsed.category }}</span
-        ><br /><br />
-        <!--   Gather Extension Information   -->
-        <span><b>Installed Extension Information:</b></span
+
+        <div class="reportHeader">
+          <h1>Extension</h1>
+          <v-divider style="transform: translateY(1.5em)" />
+        </div>
+        <v-alert
+          dense
+          outlined
+          :type="notices.extension.type"
+          v-text="notices.extension.text"
+        />
+        <span
+          ><b>LATEST EXTENSION VERSION-</b>
+          {{
+            userInformation.extension.latestExtensionVersion ||
+            "Failed to lookup data"
+          }}</span
         ><br />
         <span
-          >Extension Version:
-          <span id="extension-version">Waiting For Extension...</span></span
+          ><b>SERVER CONNECTION-</b>
+          {{
+            userInformation.extension.serverConnection
+              ? "Working"
+              : "Failed to connect"
+          }}</span
         ><br />
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer />
-        <v-btn @click="copy()">
-          <v-icon small style="margin-right: 0.25em">mdi-content-copy</v-icon
-          >Copy
-        </v-btn>
-      </v-card-actions>
-    </v-card>
+      </v-stepper-content>
+    </v-stepper>
   </div>
 </template>
 
 <script>
 export default {
-  transition(to) {
-    return to.name == "debug" ? "swoop-in" : "swoop-out";
-  },
   data() {
     return {
-      device: this.$ua,
+      stepTime: 2500,
+      supportedBrowsers: ["Firefox", "Chrome", "Brave", "Edge", "Opera"],
+
+      progress: 1,
+      steps: {
+        one: false,
+        two: false,
+        three: false,
+        four: false,
+        five: false,
+      },
+
+      userInformation: {
+        browser: {
+          name: this.$ua._parsed.name,
+          vendor: this.$ua._parsed.vendor,
+          version: this.$ua._parsed.version,
+        },
+        system: {
+          os: this.$ua._parsed.os,
+          version: this.$ua._parsed.os_version,
+          type: this.$ua._parsed.category,
+        },
+        extension: {
+          serverConnection: null,
+          latestExtensionVersion: null,
+        },
+      },
+
+      notices: {
+        system: {
+          text: null,
+          type: null,
+        },
+        browser: {
+          text: null,
+          type: null,
+        },
+        extension: {
+          text: null,
+          type: null,
+        },
+      },
     };
   },
 
-  methods: {
-    copy() {
-      const toCopy = `\`\`\`
-Browser Information:
-Browser: ${this.device._parsed.name}
-Browser Vendor: ${this.device._parsed.vendor}
-Version: ${this.device._parsed.version}
-Operating System: ${this.device._parsed.os}
-Operating System Version: ${this.device._parsed.os_version}
-Device Type: ${this.device._parsed.category}
-
-Installed Extension Information:
-Extension Version: ${document.getElementById("extension-version").innerHTML}
-\`\`\``;
-
-      navigator.clipboard.writeText(toCopy);
-    },
+  mounted() {
+    //---   Init Stuff   ---//
+    setTimeout(() => {
+      this.$axios
+        .$get(
+          "https://raw.githubusercontent.com/Anarios/return-youtube-dislike/main/Extensions/combined/manifest-chrome.json"
+        )
+        .then((res) => {
+          this.userInformation.extension.latestExtensionVersion = res.version;
+        });
+
+      this.progress++;
+      this.steps.one = true;
+    }, this.stepTime);
+
+    //---   Check If Extension Is Running   ---//
+    setTimeout(() => {
+      this.progress++;
+      this.steps.two = true;
+    }, this.stepTime * 2);
+
+    //---   Check Server Connection ---//
+    setTimeout(() => {
+      this.$axios
+        .$get("https://returnyoutubedislikeapi.com/votes?videoId=QOFEgexls14")
+        .then(() => {
+          this.userInformation.extension.serverConnection = true;
+        })
+        .catch(() => {
+          this.userInformation.extension.serverConnection = false;
+        });
+
+      this.progress++;
+      this.steps.three = true;
+    }, this.stepTime * 3);
+
+    setTimeout(() => {
+      this.progress++;
+      this.steps.four = true;
+      //this.steps.five = true;
+
+      //---   Parse Extension Data   ---//
+      this.notices.extension.text = `We are unable to automatically check that your extension is up to date. Please check that the number below matches your extension version.`;
+      this.notices.extension.type = "warning";
+
+      if (this.userInformation.extension.serverConnection != true) {
+        this.notices.extension.text = `Failed to connect to the server!`;
+        this.notices.extension.type = "error";
+      }
+
+      //---   Parse System Compatibility   ---//
+      this.notices.system.text = `${this.userInformation.system.os} is supported!`;
+      this.notices.system.type = "success";
+
+      if (this.userInformation.system.type != "pc") {
+        this.notices.system.text = `"${this.userInformation.system.type}" may not be a supported device type!`;
+        this.notices.system.type = "warning";
+      }
+
+      //---   Parse Browser Compatibility   ---//
+      this.notices.browser.text = `${this.userInformation.browser.name} ${this.userInformation.browser.version} is supported!`;
+      this.notices.browser.type = "success";
+
+      if (!this.supportedBrowsers.includes(this.userInformation.browser.name)) {
+        this.notices.browser.text = `${this.userInformation.browser.name} is not a supported browser! You may continue to use the extension, but we don't provide official support.`;
+        this.notices.browser.type = "warning";
+      }
+    }, this.stepTime * 4);
   },
 };
 </script>
+
+<style scoped>
+.reportHeader {
+  display: flex;
+  margin-top: 1em;
+}
+</style>

Website/pages/docs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="row wrap justify-center full-width" style="max-width: 100%">
+  <div class="row wrap justify-center full-width mx-auto" style="width: 80vw">
     <!--   Left Section // "Sections" Card   -->
     <v-card
       class="col-xs-12 mx-2 elevation-0"
@@ -8,6 +8,7 @@
         height: max-content;
         position: sticky;
         top: 5.5rem;
+        max-width: 500px;
       "
     >
       <!-- <v-card-title style="padding-bottom: 0 !important; color: #aaa">
@@ -24,12 +25,12 @@
           color="primary"
           style="overflow: hidden; border-radius: 0.75rem"
         >
+          <v-list-item-title style="text-align: right">
+            <v-list-item-title v-text="item.text" />
+          </v-list-item-title>
           <v-list-item-icon>
             <v-icon v-text="item.icon" />
           </v-list-item-icon>
-          <v-list-item-title style="text-align: left">
-            <v-list-item-title v-text="item.text" />
-          </v-list-item-title>
         </v-list-item>
       </v-list>
     </v-card>
@@ -41,7 +42,7 @@
         height: max-content;
         background-color: #222;
         border-radius: 0.75rem;
-        max-width: 90%;
+        width: 90%;
       "
     >
       <NuxtChild />

Website/pages/docs/endpoints.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1 class="primary--text">Available Endpoints</h1>
     List of available endpoints is available here:<br />
     <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />

Website/pages/docs/fetching.vue

@@ -1,51 +1,51 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1 class="primary--text">Basic Fetching Tutorial</h1>
 
     <span>Example to get votes of a given YouTube video ID:</span>
     <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank"
       >kxOuG8jMIgI</a
-    ><br /><br />
+    >
 
     <h2>Example Request:</h2>
-    <span><b>Request URL:</b></span>
+    <span>Request URL:</span>
     <a
       :href="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
       target="_blank"
       v-text="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
-    /><br />
-    <span
-      ><b>Request Method:</b>
+    />
+    <br />
+    <span>
+      Request Method:
       <a
         href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET"
         target="_blank"
         >HTTP/GET</a
-      ></span
-    ><br />
-    <span><b>Headers:</b></span
-    ><br />
-    <code class="code">
+      >
+    </span>
+    <br />
+    <span>Headers:</span>
+    <br />
+    <div class="code pa-4">
       Accept: text/html,application/xhtml+xml,application/xml;q=0.9<br />
       Pragma: no-cache<br />
       Cache-Control: no-cache<br />
-      Connection: keep-alive </code
-    ><br />
-    <span><b>Response:</b></span
-    ><br />
-    <div class="code">
-      <code style="background-color: rgba(0, 0, 0, 0)">
-        {<br />
-        "id": "kxOuG8jMIgI",<br />
-        "dateCreated": "2021-12-20T12:25:54.418014Z",<br />
-        "likes": 27326,<br />
-        "dislikes": 498153,<br />
-        "rating": 1.212014408444885,<br />
-        "viewCount": 3149885,<br />
-        "deleted": false<br />
-        }
-      </code>
+      Connection: keep-alive
+    </div>
+    <span>Response:</span><br />
+    <div class="code pa-4">
+      {
+      <br />
+      &nbsp;"id": "kxOuG8jMIgI",<br />
+      &nbsp;"dateCreated": "2021-12-20T12:25:54.418014Z",<br />
+      &nbsp;"likes": 27326,<br />
+      &nbsp;"dislikes": 498153,<br />
+      &nbsp;"rating": 1.212014408444885,<br />
+      &nbsp;"viewCount": 3149885,<br />
+      &nbsp;"deleted": false<br />
+      }
     </div>
-    <br /><br />
+    <br />
     <v-alert border="left" color="orange" text type="info">
       <span>An invalid YouTube ID will return status code 404 "Not Found".</span
       ><br />
@@ -59,13 +59,6 @@
   </div>
 </template>
 
-<style scoped>
-.code {
-  background: #353535;
-  border-radius: 0.25rem;
-}
-</style>
-
 <script>
 export default {
   data() {
@@ -75,3 +68,13 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.code {
+  color: #aaa;
+  background: #353535;
+  border-radius: 0.5rem;
+  font-family: monospace;
+  line-height: 2rem;
+}
+</style>

Website/pages/docs/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1>
       Welcome to the <span class="primary--text">official RYD docs</span>!
     </h1>
-    <p>&lt;- To get started, select a section on the left.</p>
+    To get started, select a section from the menu.
   </div>
 </template>

Website/pages/docs/url.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1 class="primary--text">URL Information</h1>
     The API is accessible over the following base URL:<br />
     <a :href="apiUrl" target="_blank" v-text="apiUrl" />

Website/pages/docs/usage-rights.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1 class="primary--text">Usage Rights</h1>
     <p>
       Third party use of this open API is allowed with the following

Website/pages/faq.vue

@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div style="width: 90vw" class="mx-auto">
     <h1 class="title-text">Frequently Asked Questions</h1>
     <p style="color: #999; margin-top: 0.5rem; margin-bottom: 1.5rem">
       Still have questions? Feel free to join our Discord!
     </p>
 
-    <v-expansion-panels class="col-xs-12 col-sm-11 col-md-9 col-lg-7">
+    <v-expansion-panels class="col-xs-12 col-sm-11 col-md-9 col-lg-8">
       <v-expansion-panel v-for="(item, i) in items" :key="i">
         <v-expansion-panel-header>
           {{ item.question }}
@@ -49,8 +49,7 @@ export default {
           "The extension collects the video ID of the video you are watching, fetches the dislike (and other fields like views, likes etc) using our API. The extension then displays the dislike count and ratio on the page. If you like or dislike a video, that is recorded and sent to the database so an accurate dislike count can be extrapolated.",
       },
       {
-
-        question:"Can I share my dislike count with you?",
+        question: "Can I share my dislike count with you?",
 
         answer:
           "Coming soon. We are looking into using Oauth or a different read only API with a limited scope so creators can share their dislike counts verifiability. ",

Website/pages/help.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div
+    style="width: 80vw"
+    class="col-xs-12 col-sm-11 col-md-9 col-lg-7 mx-auto"
+  >
     <h1 class="title-text pt-12">Troubleshooting</h1>
-    <ol
-      class="col-xs-12 col-sm-11 col-md-9 col-lg-7 q-mx-auto text-left"
-      style="line-height: 3rem; color: #aaa"
-    >
+    <ol style="line-height: 3rem; color: #aaa" class="text-left">
       <li>
         Make sure you have latest version of extension installed,
         <code style="color: #eee">
@@ -71,7 +71,8 @@
                 >mdi-content-copy</v-icon
               >
               <span style="color: #f44"> Detected: </span>
-              &nbsp;{{ platform }}
+              &nbsp;
+              {{ platform }}
             </v-btn>
           </li>
 
@@ -89,7 +90,7 @@
           <li>
             Take screenshot of extensions page of your browser with extension
             installed. <br />
-            To see extensions put this into adress bar:
+            To see extensions put this into address bar:
             <br />
             <code>about:addons</code> for Firefox
             <br />
@@ -113,11 +114,20 @@ export default {
       ? "swoop-left"
       : "swoop-right";
   },
-  data: () => ({
-    version: "2.0.0.3",
-    platform: "Unknown platform",
-    discordLink: "https://discord.gg/mYnESY4Md5",
-  }),
+  data() {
+    return {
+      platform:
+        this.$ua._parsed.os +
+        " " +
+        this.$ua._parsed.os_version +
+        ", " +
+        this.$ua._parsed.name +
+        " " +
+        this.$ua._parsed.version,
+      version: "loading",
+      discordLink: "https://discord.gg/mYnESY4Md5",
+    };
+  },
   mounted() {
     fetch(
       "https://raw.githubusercontent.com/Anarios/return-youtube-dislike/main/Extensions/combined/manifest-chrome.json"
@@ -127,45 +137,10 @@ export default {
         this.version = json.version;
       });
     // .catch(console.error);
-
-    // This script sets OSName variable as follows:
-    // "Windows"    for all versions of Windows
-    // "MacOS"      for all versions of Macintosh OS
-    // "Linux"      for all versions of Linux
-    // "UNIX"       for all other UNIX flavors
-    // "Unknown OS" indicates failure to detect the OS
-
-    var OSName = "Unknown OS";
-    if (navigator.appVersion.indexOf("Win") != -1) OSName = "Windows";
-    if (navigator.appVersion.indexOf("Mac") != -1) OSName = "MacOS";
-    if (navigator.appVersion.indexOf("X11") != -1) OSName = "UNIX";
-    if (navigator.appVersion.indexOf("Linux") != -1) OSName = "Linux";
-
-    // browser parcer
-    navigator.sayswho = (function () {
-      var ua = navigator.userAgent;
-      var tem;
-      var M =
-        ua.match(
-          /(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i
-        ) || [];
-      if (/trident/i.test(M[1])) {
-        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
-        return "IE " + (tem[1] || "");
-      }
-      if (M[1] === "Chrome") {
-        tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
-        if (tem != null) return tem.slice(1).join(" ").replace("OPR", "Opera");
-      }
-      M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, "-?"];
-      if ((tem = ua.match(/version\/(\d+)/i)) != null) M.splice(1, 1, tem[1]);
-      return M.join(" ");
-    })();
-    this.platform = OSName + ", " + navigator.sayswho;
   },
   methods: {
     copyToClipboard(text) {
-      navigator.clipboard.writeText(text);
+      navigator.clipboard.writeText("```" + text + "```");
     },
   },
 };

Website/pages/index.vue

@@ -64,10 +64,9 @@
       <v-row class="justify-center mx-auto">
         <p v-for="sponsor in sponsors" :key="sponsor.name" class="sponsor">
           <a
-            :style="
-              sponsor.link ? { cursor: 'pointer' } : { cursor: 'default' }
-            "
+            :style="sponsor.link ? { cursor: 'pointer' } : { cursor: 'default' }"
             :href="sponsor.link"
+            rel="sponsored"
           >
             {{ sponsor.name }}
           </a>
@@ -105,6 +104,10 @@ export default {
           name: "Seed4.Me VPN",
           link: "https://www.seed4.me/users/register?gift=ReturnYoutubeDislike",
         },
+        {
+          name: "PocketTube",
+          link: "https://yousub.info/?utm_source=returnyoutubedislike"
+        }
       ],
     };
   },

webpack.config.js

@@ -2,10 +2,20 @@ const path = require("path");
 const CopyPlugin = require("copy-webpack-plugin");
 const FileManagerPlugin = require("filemanager-webpack-plugin");
 
+const entries = ['ryd.content-script', 'ryd.background', 'popup', 'debug'];
+
+const ignorePatterns = [
+  "**/manifest-**",
+  "**/dist/**",
+  "**/src/**",
+  "**/readme.md",
+  ...entries.map(entry => `**/${entry}.js`)
+];
+
 module.exports = {
-  entry: path.join(__dirname, "./Extensions/combined/ryd.content-script.js"),
+  entry: Object.fromEntries(entries.map(entry => [entry, path.join(__dirname, './Extensions/combined/', `${entry}.js`)])),
   output: {
-    filename: "bundled-content-script.js",
+    filename: "[name].js",
     path: path.resolve(__dirname, "Extensions/combined/dist"),
     clean: true,
   },
@@ -23,12 +33,7 @@ module.exports = {
           from: "./Extensions/combined",
           to: "./chrome",
           globOptions: {
-            ignore: [
-              "**/manifest-**",
-              "**/dist/**",
-              "**/src/**",
-              "**/ryd.content-script.js",
-            ],
+            ignore: ignorePatterns,
           },
         },
         {
@@ -39,12 +44,7 @@ module.exports = {
           from: "./Extensions/combined",
           to: "./firefox",
           globOptions: {
-            ignore: [
-              "**/manifest-**",
-              "**/dist/**",
-              "**/src/**",
-              "**/ryd.content-script.js",
-            ],
+            ignore: ignorePatterns,
           },
         },
         {
@@ -58,14 +58,14 @@ module.exports = {
         onEnd: {
           copy: [
             {
-              source: "./Extensions/combined/dist/bundled-content-script.js",
+              source: "./Extensions/combined/dist/**.js",
               destination:
-                "./Extensions/combined/dist/firefox/bundled-content-script.js",
+                "./Extensions/combined/dist/firefox/",
             },
             {
-              source: "./Extensions/combined/dist/bundled-content-script.js",
+              source: "./Extensions/combined/dist/**.js",
               destination:
-                "./Extensions/combined/dist/chrome/bundled-content-script.js",
+                "./Extensions/combined/dist/chrome/",
             },
           ],
         },