troubleshooter

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

@@ -0,0 +1,219 @@
+<template>
+  <div>
+    <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 v-text="notices.browser.text" :type="notices.browser.type" />
+        <span><b>BROWSER-</b> {{ userInformation.browser.name }}</span><br>
+        <span><b>VENDOR-</b> {{ userInformation.browser.vendor }} </span><br>
+        <span><b>VERSION-</b> {{ userInformation.browser.version }}</span><br>
+
+        <div class="reportHeader"><h1>System</h1><v-divider style="transform: translateY(1.5em)" /></div>
+        <v-alert dense outlined v-text="notices.system.text" :type="notices.system.type" />
+        <span><b>OS-</b> {{ userInformation.system.os }}</span><br>
+        <span><b>VERSION-</b> {{ userInformation.system.version }} </span><br>
+        <span><b>TYPE-</b> {{ userInformation.system.type }}</span><br>
+
+        <div class="reportHeader"><h1>Extension</h1><v-divider style="transform: translateY(1.5em)" /></div>
+        <v-alert dense outlined v-text="notices.extension.text" :type="notices.extension.type" />
+        <span><b>RUNNING-</b> {{ userInformation.extension.running ? "Yes" : "Failed to connect"}}</span><br>
+        <span><b>VERSION-</b> {{ userInformation.extension.version || "Failed to connect"}} </span><br>
+        <span><b>SERVER CONNECTION-</b> {{ userInformation.extension.serverConnection ? "Working" : "Failed to connect" }}</span><br>
+      </v-stepper-content>
+
+    </v-stepper>
+  </div>
+</template>
+
+<style scoped>
+.reportHeader {
+  display: flex;
+  margin-top: 1em;
+}
+</style>
+
+<script>
+  export default {
+    data () {
+      return {
+        stepTime: 1000,
+        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: {
+            running: null,
+            version: null,
+            serverConnection: null
+          },
+        },
+
+          notices: {
+            system: {
+              text: null,
+              type: null
+            },
+            browser: {
+              text: null,
+              type: null
+            },
+            extension: {
+              text: null,
+              type: null
+            }
+          }
+
+      }
+    },
+
+    mounted() {
+      //---   Wait   ---//
+      setTimeout(() => { 
+        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(res => { this.userInformation.extension.serverConnection = true; })
+        .catch(err => { 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 = `Everything is running normally!`;
+        this.notices.extension.type = "success";
+
+        if (this.userInformation.extension.running != true) {
+          this.notices.extension.text = `The extension doesn't appear to be running!`;
+          this.notices.extension.type = "error";
+        }
+
+        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>