Merge pull request #433 from Frontesque/main

Reworked Debug Page

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;

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/fetching.vue

@@ -59,13 +59,6 @@
   </div>
 </template>
 
-<style scoped>
-.code {
-  background: #353535;
-  border-radius: 0.25rem;
-}
-</style>
-
 <script>
 export default {
   data() {
@@ -75,3 +68,10 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.code {
+  background: #353535;
+  border-radius: 0.25rem;
+}
+</style>

Website/pages/faq.vue

@@ -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. ",