added a UI for a user to see if the api is online or offline

Extensions/combined/dist/chrome/bundled-content-script.js

@@ -96,11 +96,13 @@ function cLog(message, writer) {
 
 
 function sendVote(vote) {
-  getBrowser().runtime.sendMessage({
-    message: "send_vote",
-    vote: vote,
-    videoId: getVideoId(window.location.href)
-  });
+  if (extConfig.disableVoteSubmission !== true) {
+    getBrowser().runtime.sendMessage({
+      message: "send_vote",
+      vote: vote,
+      videoId: getVideoId(window.location.href)
+    });
+  }
 }
 
 function sendVideoIds() {
@@ -118,7 +120,7 @@ function sendVideoIds() {
   });
 }
 
-function likeClicked(storedData) {
+function likeClicked() {
   if (checkForSignInButton() === false) {
     if (storedData.previousState === DISLIKED_STATE) {
       sendVote(1);
@@ -141,7 +143,7 @@ function likeClicked(storedData) {
   }
 }
 
-function dislikeClicked(storedData) {
+function dislikeClicked() {
   if (checkForSignInButton() == false) {
     if (storedData.previousState === NEUTRAL_STATE) {
       sendVote(-1);
@@ -166,6 +168,26 @@ function dislikeClicked(storedData) {
   }
 }
 
+function addLikeDislikeEventListener() {
+  var buttons = buttons_getButtons();
+
+  if (!window.returnDislikeButtonlistenersSet) {
+    buttons.children[0].addEventListener("click", likeClicked);
+    buttons.children[1].addEventListener("click", dislikeClicked);
+    window.returnDislikeButtonlistenersSet = true;
+  }
+}
+
+function storageChangeHandler(changes, area) {
+  if (changes.disableVoteSubmission !== undefined) {
+    handleDisableVoteSubmissionChangeEvent(changes.disableVoteSubmission.newValue);
+  }
+}
+
+function handleDisableVoteSubmissionChangeEvent(value) {
+  extConfig.disableVoteSubmission = value;
+}
+
 
 ;// CONCATENATED MODULE: ./Extensions/combined/src/state.js
 
@@ -175,6 +197,14 @@ function dislikeClicked(storedData) {
 var LIKED_STATE = "LIKED_STATE";
 var DISLIKED_STATE = "DISLIKED_STATE";
 var NEUTRAL_STATE = "NEUTRAL_STATE";
+var extConfig = {
+  disableVoteSubmission: false
+};
+var storedData = {
+  likes: 0,
+  dislikes: 0,
+  previousState: NEUTRAL_STATE
+};
 
 function isMobile() {
   return location.hostname == "m.youtube.com";
@@ -262,13 +292,29 @@ function setState(storedData) {
   });
 }
 
-function setInitialState(storedData) {
+function setInitialState() {
   setState(storedData);
   setTimeout(function () {
     sendVideoIds();
   }, 1500);
 }
 
+function initExtConfig() {
+  initializeDisableVoteSubmission();
+}
+
+function initializeDisableVoteSubmission() {
+  getBrowser().storage.sync.get(['disableVoteSubmission'], function (res) {
+    if (res.disableVoteSubmission === undefined) {
+      getBrowser().storage.sync.set({
+        disableVoteSubmission: false
+      });
+    } else {
+      extConfig.disableVoteSubmission = res.disableVoteSubmission;
+    }
+  });
+}
+
 
 ;// CONCATENATED MODULE: ./Extensions/combined/src/buttons.js
 
@@ -313,11 +359,7 @@ function checkForSignInButton() {
 
 
 
-var storedData = {
-  likes: 0,
-  dislikes: 0,
-  previousState: NEUTRAL_STATE
-};
+initExtConfig();
 var jsInitChecktimer = null;
 
 function setEventListeners(evt) {
@@ -327,19 +369,9 @@ function setEventListeners(evt) {
     if ((_getButtons = buttons_getButtons()) !== null && _getButtons !== void 0 && _getButtons.offsetParent && isVideoLoaded()) {
       clearInterval(jsInitChecktimer);
       jsInitChecktimer = null;
-      var buttons = buttons_getButtons();
-
-      if (!window.returnDislikeButtonlistenersSet) {
-        buttons.children[0].addEventListener("click", function () {
-          return likeClicked(storedData);
-        });
-        buttons.children[1].addEventListener("click", function () {
-          return dislikeClicked(storedData);
-        });
-        window.returnDislikeButtonlistenersSet = true;
-      }
-
-      setInitialState(storedData);
+      addLikeDislikeEventListener();
+      setInitialState();
+      getBrowser().storage.onChanged.addListener(storageChangeHandler);
     }
   }
 

Extensions/combined/dist/chrome/popup.css

@@ -17,7 +17,7 @@ body {
   color: var(--white);
   min-width: 300px;
   padding: 0.5em;
-  font-family: 'Roboto', Arial, Helvetica, sans-serif;
+  font-family: "Roboto", Arial, Helvetica, sans-serif;
   font-size: 14px;
 }
 
@@ -33,8 +33,9 @@ button {
   border: none;
   border-radius: 4px;
   font-weight: 500;
-  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
-  transition: .4s;
+  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
+    0 1px 10px 0 rgb(0 0 0 / 12%);
+  transition: 0.4s;
 }
 
 button:hover {

Extensions/combined/dist/chrome/popup.html

@@ -4,44 +4,56 @@
     <meta content="text/html; charset=utf-8" />
     <title>Return YouTube Dislike</title>
     <link rel="stylesheet" href="popup.css" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <center>
-      <svg width="48" viewBox="0 0 24 24"><path d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z" fill="red"/><path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff"/></svg>
+      <svg width="48" viewBox="0 0 24 24">
+        <path
+          d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"
+          fill="red"
+        />
+        <path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff" />
+      </svg>
       <h1>Return YouTube Dislike</h1>
+      <img width="80px" height="70px" src="./icons/server.png" alt="" />
+      <p>API Status: <span id="status"></span></p>
       <p>by Dmitrii Selivanov & Community</p>
 
       <button id="link_website">Website</button>
       <button id="link_github">GitHub</button>
       <button id="link_discord">Discord</button>
 
-      <br><br>
+      <br /><br />
+      <button id="link_faq">FAQ</button>
       <button id="link_donate">Donate</button>
-      <br>
-
-      <br>
-<!--      <button id="advancedToggle">Show Settings</button>-->
-      <br>
+      <br />
 
+      <br />
+      <button id="advancedToggle">Show Settings</button>
+      <br />
     </center>
 
     <fieldset id="advancedSettings">
       <legend id="advancedLegend">Settings</legend>
 
       <label class="switch">
-        <input type="checkbox" id="disable_ratio_bar" />
+        <input type="checkbox" id="disable_vote_submission" />
         <span class="slider" />
-        <span class="switchLabel">Lorem ipsum dolor sit amet</span> </label
-      ><br />
+        <span class="switchLabel">Disable like/dislike submission</span>
+      </label>
+      <br />
 
-      <label class="switch">
+      <!-- <label class="switch">
         <input type="checkbox" id="disable_api_unlisted" />
         <span class="slider" />
         <span class="switchLabel">Lorem ipsum dolor sit amet</span> </label
-      ><br />
+      ><br /> -->
     </fieldset>
   </body>
   <script src="popup.js"></script>

Extensions/combined/dist/chrome/popup.js

@@ -3,12 +3,14 @@ const config = {
   advanced: false,
   showAdvancedMessage: "Show Settings",
   hideAdvancedMessage: "Hide Settings",
+  disableVoteSubmission: false,
 
   links: {
     website: "https://returnyoutubedislike.com",
     github: "https://github.com/Anarios/return-youtube-dislike",
     discord: "https://discord.gg/mYnESY4Md5",
-    donate: 'https://returnyoutubedislike.com/donate'
+    donate: "https://returnyoutubedislike.com/donate",
+    faq: "https://returnyoutubedislike.com/faq",
   },
 };
 
@@ -25,14 +27,21 @@ 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 });
 });
 
+document
+  .getElementById("disable_vote_submission")
+  .addEventListener("click", (ev) => {
+    chrome.storage.sync.set({ disableVoteSubmission: ev.target.checked });
+  });
 
-chrome.runtime.sendMessage({ message: 'get_auth_token' });
 /*   Advanced Toggle   */
-/* Not currently used in this version
 const advancedToggle = document.getElementById("advancedToggle");
 advancedToggle.addEventListener("click", () => {
   const adv = document.getElementById("advancedSettings");
@@ -46,7 +55,48 @@ advancedToggle.addEventListener("click", () => {
     config.advanced = true;
   }
 });
-*/
+
+initConfig();
+
+function initConfig() {
+  initializeDisableVoteSubmission();
+}
+
+function initializeDisableVoteSubmission() {
+  chrome.storage.sync.get(["disableVoteSubmission"], (res) => {
+    handleDisableVoteSubmissionChangeEvent(res.disableVoteSubmission);
+  });
+}
+
+chrome.storage.onChanged.addListener(storageChangeHandler);
+
+function storageChangeHandler(changes, area) {
+  if (changes.disableVoteSubmission !== undefined) {
+    handleDisableVoteSubmissionChangeEvent(
+      changes.disableVoteSubmission.newValue
+    );
+  }
+}
+
+function handleDisableVoteSubmissionChangeEvent(value) {
+  config.disableVoteSubmission = value;
+  document.getElementById("disable_vote_submission").checked = value;
+}
+
+(async function getStatus() {
+  let status = document.getElementById("status");
+  let resp = await fetch(
+    "https://returnyoutubedislikeapi.com/votes?videoId=YbJOTdZBX1g"
+  );
+  let result = await resp.status;
+  if (result === 200) {
+    status.innerText = "Online";
+    status.style.color = "green";
+  } else {
+    status.innerText = "Offline";
+    status.style.color = "red";
+  }
+})();
 
 /* popup-script.js
 document.querySelector('#login')

Extensions/combined/dist/chrome/ryd.background.js

@@ -1,12 +1,17 @@
 const apiUrl = "https://returnyoutubedislikeapi.com";
+const voteDisabledIconName = 'icon_hold128.png';
+const defaultIconName = 'icon128.png';
 let api;
-if (typeof chrome !== "undefined" && typeof chrome.runtime !== "undefined")
-  api = chrome;
-else if (
-  typeof browser !== "undefined" &&
-  typeof browser.runtime !== "undefined"
-)
-  api = browser;
+
+/** stores extension's global config */
+let extConfig = {
+  disableVoteSubmission: false
+}
+
+if (isChrome()) api = chrome;
+else if (isFirefox()) api = browser;
+
+initExtConfig()
 
 api.runtime.onMessage.addListener((request, sender, sendResponse) => {
   if (request.message === "get_auth_token") {
@@ -218,3 +223,50 @@ function generateUserID(length = 36) {
     return result;
   }
 }
+
+function storageChangeHandler(changes, area) {
+  if (changes.disableVoteSubmission !== undefined) {
+    handleDisableVoteSubmissionChangeEvent(changes.disableVoteSubmission.newValue);
+  }
+}
+
+function handleDisableVoteSubmissionChangeEvent(value) {
+  extConfig.disableVoteSubmission = value;
+  if (value === true) {
+    changeIcon(voteDisabledIconName);
+  } else {
+    changeIcon(defaultIconName);
+  }
+}
+
+function changeIcon(iconName) {
+  if (api.action !== undefined) api.action.setIcon({path: "/icons/" + iconName});
+  else if (api.browserAction !== undefined) api.browserAction.setIcon({path: "/icons/" + iconName});
+  else console.log('changing icon is not supported');
+}
+
+api.storage.onChanged.addListener(storageChangeHandler);
+
+function initExtConfig() {
+  initializeDisableVoteSubmission();
+}
+
+function initializeDisableVoteSubmission() {
+  api.storage.sync.get(['disableVoteSubmission'], (res) => {
+    if (res.disableVoteSubmission === undefined) {
+      api.storage.sync.set({disableVoteSubmission: false});
+    }
+    else {
+      extConfig.disableVoteSubmission = res.disableVoteSubmission;
+      if (res.disableVoteSubmission) changeIcon(voteDisabledIconName);
+    }
+  });
+}
+
+function isChrome() {
+  return typeof chrome !== "undefined" && typeof chrome.runtime !== "undefined";
+}
+
+function isFirefox() {
+  return typeof browser !== "undefined" && typeof browser.runtime !== "undefined";
+}

Extensions/combined/dist/firefox/bundled-content-script.js

@@ -96,11 +96,13 @@ function cLog(message, writer) {
 
 
 function sendVote(vote) {
-  getBrowser().runtime.sendMessage({
-    message: "send_vote",
-    vote: vote,
-    videoId: getVideoId(window.location.href)
-  });
+  if (extConfig.disableVoteSubmission !== true) {
+    getBrowser().runtime.sendMessage({
+      message: "send_vote",
+      vote: vote,
+      videoId: getVideoId(window.location.href)
+    });
+  }
 }
 
 function sendVideoIds() {
@@ -118,7 +120,7 @@ function sendVideoIds() {
   });
 }
 
-function likeClicked(storedData) {
+function likeClicked() {
   if (checkForSignInButton() === false) {
     if (storedData.previousState === DISLIKED_STATE) {
       sendVote(1);
@@ -141,7 +143,7 @@ function likeClicked(storedData) {
   }
 }
 
-function dislikeClicked(storedData) {
+function dislikeClicked() {
   if (checkForSignInButton() == false) {
     if (storedData.previousState === NEUTRAL_STATE) {
       sendVote(-1);
@@ -166,6 +168,26 @@ function dislikeClicked(storedData) {
   }
 }
 
+function addLikeDislikeEventListener() {
+  var buttons = buttons_getButtons();
+
+  if (!window.returnDislikeButtonlistenersSet) {
+    buttons.children[0].addEventListener("click", likeClicked);
+    buttons.children[1].addEventListener("click", dislikeClicked);
+    window.returnDislikeButtonlistenersSet = true;
+  }
+}
+
+function storageChangeHandler(changes, area) {
+  if (changes.disableVoteSubmission !== undefined) {
+    handleDisableVoteSubmissionChangeEvent(changes.disableVoteSubmission.newValue);
+  }
+}
+
+function handleDisableVoteSubmissionChangeEvent(value) {
+  extConfig.disableVoteSubmission = value;
+}
+
 
 ;// CONCATENATED MODULE: ./Extensions/combined/src/state.js
 
@@ -175,6 +197,14 @@ function dislikeClicked(storedData) {
 var LIKED_STATE = "LIKED_STATE";
 var DISLIKED_STATE = "DISLIKED_STATE";
 var NEUTRAL_STATE = "NEUTRAL_STATE";
+var extConfig = {
+  disableVoteSubmission: false
+};
+var storedData = {
+  likes: 0,
+  dislikes: 0,
+  previousState: NEUTRAL_STATE
+};
 
 function isMobile() {
   return location.hostname == "m.youtube.com";
@@ -262,13 +292,29 @@ function setState(storedData) {
   });
 }
 
-function setInitialState(storedData) {
+function setInitialState() {
   setState(storedData);
   setTimeout(function () {
     sendVideoIds();
   }, 1500);
 }
 
+function initExtConfig() {
+  initializeDisableVoteSubmission();
+}
+
+function initializeDisableVoteSubmission() {
+  getBrowser().storage.sync.get(['disableVoteSubmission'], function (res) {
+    if (res.disableVoteSubmission === undefined) {
+      getBrowser().storage.sync.set({
+        disableVoteSubmission: false
+      });
+    } else {
+      extConfig.disableVoteSubmission = res.disableVoteSubmission;
+    }
+  });
+}
+
 
 ;// CONCATENATED MODULE: ./Extensions/combined/src/buttons.js
 
@@ -313,11 +359,7 @@ function checkForSignInButton() {
 
 
 
-var storedData = {
-  likes: 0,
-  dislikes: 0,
-  previousState: NEUTRAL_STATE
-};
+initExtConfig();
 var jsInitChecktimer = null;
 
 function setEventListeners(evt) {
@@ -327,19 +369,9 @@ function setEventListeners(evt) {
     if ((_getButtons = buttons_getButtons()) !== null && _getButtons !== void 0 && _getButtons.offsetParent && isVideoLoaded()) {
       clearInterval(jsInitChecktimer);
       jsInitChecktimer = null;
-      var buttons = buttons_getButtons();
-
-      if (!window.returnDislikeButtonlistenersSet) {
-        buttons.children[0].addEventListener("click", function () {
-          return likeClicked(storedData);
-        });
-        buttons.children[1].addEventListener("click", function () {
-          return dislikeClicked(storedData);
-        });
-        window.returnDislikeButtonlistenersSet = true;
-      }
-
-      setInitialState(storedData);
+      addLikeDislikeEventListener();
+      setInitialState();
+      getBrowser().storage.onChanged.addListener(storageChangeHandler);
     }
   }
 

Extensions/combined/dist/firefox/popup.css

@@ -17,7 +17,7 @@ body {
   color: var(--white);
   min-width: 300px;
   padding: 0.5em;
-  font-family: 'Roboto', Arial, Helvetica, sans-serif;
+  font-family: "Roboto", Arial, Helvetica, sans-serif;
   font-size: 14px;
 }
 
@@ -33,8 +33,9 @@ button {
   border: none;
   border-radius: 4px;
   font-weight: 500;
-  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
-  transition: .4s;
+  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
+    0 1px 10px 0 rgb(0 0 0 / 12%);
+  transition: 0.4s;
 }
 
 button:hover {

Extensions/combined/dist/firefox/popup.html

@@ -4,44 +4,56 @@
     <meta content="text/html; charset=utf-8" />
     <title>Return YouTube Dislike</title>
     <link rel="stylesheet" href="popup.css" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <center>
-      <svg width="48" viewBox="0 0 24 24"><path d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z" fill="red"/><path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff"/></svg>
+      <svg width="48" viewBox="0 0 24 24">
+        <path
+          d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"
+          fill="red"
+        />
+        <path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff" />
+      </svg>
       <h1>Return YouTube Dislike</h1>
+      <img width="80px" height="70px" src="./icons/server.png" alt="" />
+      <p>API Status: <span id="status"></span></p>
       <p>by Dmitrii Selivanov & Community</p>
 
       <button id="link_website">Website</button>
       <button id="link_github">GitHub</button>
       <button id="link_discord">Discord</button>
 
-      <br><br>
+      <br /><br />
+      <button id="link_faq">FAQ</button>
       <button id="link_donate">Donate</button>
-      <br>
-
-      <br>
-<!--      <button id="advancedToggle">Show Settings</button>-->
-      <br>
+      <br />
 
+      <br />
+      <button id="advancedToggle">Show Settings</button>
+      <br />
     </center>
 
     <fieldset id="advancedSettings">
       <legend id="advancedLegend">Settings</legend>
 
       <label class="switch">
-        <input type="checkbox" id="disable_ratio_bar" />
+        <input type="checkbox" id="disable_vote_submission" />
         <span class="slider" />
-        <span class="switchLabel">Lorem ipsum dolor sit amet</span> </label
-      ><br />
+        <span class="switchLabel">Disable like/dislike submission</span>
+      </label>
+      <br />
 
-      <label class="switch">
+      <!-- <label class="switch">
         <input type="checkbox" id="disable_api_unlisted" />
         <span class="slider" />
         <span class="switchLabel">Lorem ipsum dolor sit amet</span> </label
-      ><br />
+      ><br /> -->
     </fieldset>
   </body>
   <script src="popup.js"></script>

Extensions/combined/dist/firefox/popup.js

@@ -3,12 +3,14 @@ const config = {
   advanced: false,
   showAdvancedMessage: "Show Settings",
   hideAdvancedMessage: "Hide Settings",
+  disableVoteSubmission: false,
 
   links: {
     website: "https://returnyoutubedislike.com",
     github: "https://github.com/Anarios/return-youtube-dislike",
     discord: "https://discord.gg/mYnESY4Md5",
-    donate: 'https://returnyoutubedislike.com/donate'
+    donate: "https://returnyoutubedislike.com/donate",
+    faq: "https://returnyoutubedislike.com/faq",
   },
 };
 
@@ -25,14 +27,21 @@ 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 });
 });
 
+document
+  .getElementById("disable_vote_submission")
+  .addEventListener("click", (ev) => {
+    chrome.storage.sync.set({ disableVoteSubmission: ev.target.checked });
+  });
 
-chrome.runtime.sendMessage({ message: 'get_auth_token' });
 /*   Advanced Toggle   */
-/* Not currently used in this version
 const advancedToggle = document.getElementById("advancedToggle");
 advancedToggle.addEventListener("click", () => {
   const adv = document.getElementById("advancedSettings");
@@ -46,7 +55,48 @@ advancedToggle.addEventListener("click", () => {
     config.advanced = true;
   }
 });
-*/
+
+initConfig();
+
+function initConfig() {
+  initializeDisableVoteSubmission();
+}
+
+function initializeDisableVoteSubmission() {
+  chrome.storage.sync.get(["disableVoteSubmission"], (res) => {
+    handleDisableVoteSubmissionChangeEvent(res.disableVoteSubmission);
+  });
+}
+
+chrome.storage.onChanged.addListener(storageChangeHandler);
+
+function storageChangeHandler(changes, area) {
+  if (changes.disableVoteSubmission !== undefined) {
+    handleDisableVoteSubmissionChangeEvent(
+      changes.disableVoteSubmission.newValue
+    );
+  }
+}
+
+function handleDisableVoteSubmissionChangeEvent(value) {
+  config.disableVoteSubmission = value;
+  document.getElementById("disable_vote_submission").checked = value;
+}
+
+(async function getStatus() {
+  let status = document.getElementById("status");
+  let resp = await fetch(
+    "https://returnyoutubedislikeapi.com/votes?videoId=YbJOTdZBX1g"
+  );
+  let result = await resp.status;
+  if (result === 200) {
+    status.innerText = "Online";
+    status.style.color = "green";
+  } else {
+    status.innerText = "Offline";
+    status.style.color = "red";
+  }
+})();
 
 /* popup-script.js
 document.querySelector('#login')

Extensions/combined/dist/firefox/ryd.background.js

@@ -1,12 +1,17 @@
 const apiUrl = "https://returnyoutubedislikeapi.com";
+const voteDisabledIconName = 'icon_hold128.png';
+const defaultIconName = 'icon128.png';
 let api;
-if (typeof chrome !== "undefined" && typeof chrome.runtime !== "undefined")
-  api = chrome;
-else if (
-  typeof browser !== "undefined" &&
-  typeof browser.runtime !== "undefined"
-)
-  api = browser;
+
+/** stores extension's global config */
+let extConfig = {
+  disableVoteSubmission: false
+}
+
+if (isChrome()) api = chrome;
+else if (isFirefox()) api = browser;
+
+initExtConfig()
 
 api.runtime.onMessage.addListener((request, sender, sendResponse) => {
   if (request.message === "get_auth_token") {
@@ -218,3 +223,50 @@ function generateUserID(length = 36) {
     return result;
   }
 }
+
+function storageChangeHandler(changes, area) {
+  if (changes.disableVoteSubmission !== undefined) {
+    handleDisableVoteSubmissionChangeEvent(changes.disableVoteSubmission.newValue);
+  }
+}
+
+function handleDisableVoteSubmissionChangeEvent(value) {
+  extConfig.disableVoteSubmission = value;
+  if (value === true) {
+    changeIcon(voteDisabledIconName);
+  } else {
+    changeIcon(defaultIconName);
+  }
+}
+
+function changeIcon(iconName) {
+  if (api.action !== undefined) api.action.setIcon({path: "/icons/" + iconName});
+  else if (api.browserAction !== undefined) api.browserAction.setIcon({path: "/icons/" + iconName});
+  else console.log('changing icon is not supported');
+}
+
+api.storage.onChanged.addListener(storageChangeHandler);
+
+function initExtConfig() {
+  initializeDisableVoteSubmission();
+}
+
+function initializeDisableVoteSubmission() {
+  api.storage.sync.get(['disableVoteSubmission'], (res) => {
+    if (res.disableVoteSubmission === undefined) {
+      api.storage.sync.set({disableVoteSubmission: false});
+    }
+    else {
+      extConfig.disableVoteSubmission = res.disableVoteSubmission;
+      if (res.disableVoteSubmission) changeIcon(voteDisabledIconName);
+    }
+  });
+}
+
+function isChrome() {
+  return typeof chrome !== "undefined" && typeof chrome.runtime !== "undefined";
+}
+
+function isFirefox() {
+  return typeof browser !== "undefined" && typeof browser.runtime !== "undefined";
+}

Extensions/combined/popup.css

@@ -17,7 +17,7 @@ body {
   color: var(--white);
   min-width: 300px;
   padding: 0.5em;
-  font-family: 'Roboto', Arial, Helvetica, sans-serif;
+  font-family: "Roboto", Arial, Helvetica, sans-serif;
   font-size: 14px;
 }
 
@@ -33,8 +33,9 @@ button {
   border: none;
   border-radius: 4px;
   font-weight: 500;
-  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
-  transition: .4s;
+  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
+    0 1px 10px 0 rgb(0 0 0 / 12%);
+  transition: 0.4s;
 }
 
 button:hover {

Extensions/combined/popup.html

@@ -4,29 +4,39 @@
     <meta content="text/html; charset=utf-8" />
     <title>Return YouTube Dislike</title>
     <link rel="stylesheet" href="popup.css" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <center>
-      <svg width="48" viewBox="0 0 24 24"><path d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z" fill="red"/><path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff"/></svg>
+      <svg width="48" viewBox="0 0 24 24">
+        <path
+          d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"
+          fill="red"
+        />
+        <path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff" />
+      </svg>
       <h1>Return YouTube Dislike</h1>
+      <img width="80px" height="70px" src="./icons/server.png" alt="" />
+      <p>API Status: <span id="status"></span></p>
       <p>by Dmitrii Selivanov & Community</p>
 
       <button id="link_website">Website</button>
       <button id="link_github">GitHub</button>
       <button id="link_discord">Discord</button>
 
-      <br><br>
-       <button id="link_faq">FAQ</button>
+      <br /><br />
+      <button id="link_faq">FAQ</button>
       <button id="link_donate">Donate</button>
-      <br>
+      <br />
 
-      <br>
+      <br />
       <button id="advancedToggle">Show Settings</button>
-      <br>
-
+      <br />
     </center>
 
     <fieldset id="advancedSettings">
@@ -37,7 +47,7 @@
         <span class="slider" />
         <span class="switchLabel">Disable like/dislike submission</span>
       </label>
-      <br/>
+      <br />
 
       <!-- <label class="switch">
         <input type="checkbox" id="disable_api_unlisted" />

Extensions/combined/popup.js

@@ -9,8 +9,8 @@ const config = {
     website: "https://returnyoutubedislike.com",
     github: "https://github.com/Anarios/return-youtube-dislike",
     discord: "https://discord.gg/mYnESY4Md5",
-    donate: 'https://returnyoutubedislike.com/donate',
-    faq: 'https://returnyoutubedislike.com/faq'
+    donate: "https://returnyoutubedislike.com/donate",
+    faq: "https://returnyoutubedislike.com/faq",
   },
 };
 
@@ -35,10 +35,11 @@ document.getElementById("link_donate").addEventListener("click", () => {
   chrome.tabs.create({ url: config.links.donate });
 });
 
-
-document.getElementById("disable_vote_submission").addEventListener("click", (ev) => {
-  chrome.storage.sync.set({ disableVoteSubmission: ev.target.checked });
-});
+document
+  .getElementById("disable_vote_submission")
+  .addEventListener("click", (ev) => {
+    chrome.storage.sync.set({ disableVoteSubmission: ev.target.checked });
+  });
 
 /*   Advanced Toggle   */
 const advancedToggle = document.getElementById("advancedToggle");
@@ -62,7 +63,7 @@ function initConfig() {
 }
 
 function initializeDisableVoteSubmission() {
-  chrome.storage.sync.get(['disableVoteSubmission'], (res) => {
+  chrome.storage.sync.get(["disableVoteSubmission"], (res) => {
     handleDisableVoteSubmissionChangeEvent(res.disableVoteSubmission);
   });
 }
@@ -71,7 +72,9 @@ chrome.storage.onChanged.addListener(storageChangeHandler);
 
 function storageChangeHandler(changes, area) {
   if (changes.disableVoteSubmission !== undefined) {
-    handleDisableVoteSubmissionChangeEvent(changes.disableVoteSubmission.newValue);
+    handleDisableVoteSubmissionChangeEvent(
+      changes.disableVoteSubmission.newValue
+    );
   }
 }
 
@@ -80,6 +83,21 @@ function handleDisableVoteSubmissionChangeEvent(value) {
   document.getElementById("disable_vote_submission").checked = value;
 }
 
+(async function getStatus() {
+  let status = document.getElementById("status");
+  let resp = await fetch(
+    "https://returnyoutubedislikeapi.com/votes?videoId=YbJOTdZBX1g"
+  );
+  let result = await resp.status;
+  if (result === 200) {
+    status.innerText = "Online";
+    status.style.color = "green";
+  } else {
+    status.innerText = "Offline";
+    status.style.color = "red";
+  }
+})();
+
 /* popup-script.js
 document.querySelector('#login')
 .addEventListener('click', function () {

package-lock.json

@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "return-youtube-dislike",
       "version": "2.0.0",
       "devDependencies": {
         "@babel/core": "^7.16.5",
@@ -2142,6 +2141,8 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.8.2.tgz",
       "integrity": "sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -2157,7 +2158,9 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/ajv-keywords": {
       "version": "3.5.2",
@@ -5571,15 +5574,14 @@
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "dev": true,
-      "requires": {
-        "ajv": "^8.0.0"
-      },
+      "requires": {},
       "dependencies": {
         "ajv": {
-          "version": "8.8.2",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.8.2.tgz",
+          "version": "https://registry.npmjs.org/ajv/-/ajv-8.8.2.tgz",
           "integrity": "sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -5591,7 +5593,9 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
           "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },