add option to disable vote submission

also change the icon of the extension when voting is disabled
popup.js, content-script, bg-script listenes to storage change event
so that they can all stay in sync without passing messages
icon_hold is addded
advanced setting is enabled in popup.html

add fallback for changing extension icon

refactor stateData

Extensions/combined/popup.html

@@ -23,7 +23,7 @@
       <br>
 
       <br>
-<!--      <button id="advancedToggle">Show Settings</button>-->
+      <button id="advancedToggle">Show Settings</button>
       <br>
 
     </center>
@@ -32,16 +32,17 @@
       <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/popup.js

@@ -3,6 +3,7 @@ const config = {
   advanced: false,
   showAdvancedMessage: "Show Settings",
   hideAdvancedMessage: "Hide Settings",
+  disableVoteSubmission: false,
 
   links: {
     website: "https://returnyoutubedislike.com",
@@ -29,8 +30,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 });
+});
+
 /*   Advanced Toggle   */
-/* Not currently used in this version
 const advancedToggle = document.getElementById("advancedToggle");
 advancedToggle.addEventListener("click", () => {
   const adv = document.getElementById("advancedSettings");
@@ -44,7 +48,31 @@ 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;
+}
 
 /* popup-script.js
 document.querySelector('#login')

Extensions/combined/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/ryd.content-script.js

@@ -18,16 +18,13 @@ import {
   LIKED_STATE,
   DISLIKED_STATE,
   NEUTRAL_STATE,
+  initExtConfig,
 } from "./src/state";
 import { numberFormat, getBrowser, getVideoId, isVideoLoaded, cLog } from "./src/utils";
 import { createRateBar } from "./src/bar";
-import { sendVideoIds, sendVote, likeClicked, dislikeClicked } from "./src/events"
+import { sendVideoIds, sendVote, likeClicked, dislikeClicked, addLikeDislikeEventListener, storageChangeHandler  } from "./src/events"
 
-let storedData = {
-  likes: 0,
-  dislikes: 0,
-  previousState: NEUTRAL_STATE,
-};
+initExtConfig()
 
 let jsInitChecktimer = null;
 
@@ -36,13 +33,9 @@ function setEventListeners(evt) {
     if (getButtons()?.offsetParent && isVideoLoaded()) {
       clearInterval(jsInitChecktimer);
       jsInitChecktimer = null;
-      const buttons = getButtons();
-      if (!window.returnDislikeButtonlistenersSet) {
-        buttons.children[0].addEventListener("click", () => likeClicked(storedData));
-        buttons.children[1].addEventListener("click", () => dislikeClicked(storedData));
-        window.returnDislikeButtonlistenersSet = true;
-      }
-      setInitialState(storedData);
+      addLikeDislikeEventListener();
+      setInitialState();
+      getBrowser().storage.onChanged.addListener(storageChangeHandler);
     }
   }
 

Extensions/combined/src/events.js

@@ -1,14 +1,16 @@
-import { getBrowser, getVideoId, numberFormat } from "./utils"
-import { checkForSignInButton } from "./buttons"
-import { NEUTRAL_STATE, LIKED_STATE, DISLIKED_STATE, setDislikes } from "./state"
+import { getBrowser, getVideoId, numberFormat, cLog } from "./utils"
+import { checkForSignInButton, getButtons } from "./buttons"
+import { NEUTRAL_STATE, LIKED_STATE, DISLIKED_STATE, setDislikes, extConfig, storedData } from "./state"
 import { createRateBar } from "./bar"
 
 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() {
@@ -37,7 +39,7 @@ function sendVideoIds() {
   });
 }
 
-function likeClicked(storedData) {
+function likeClicked() {
   if (checkForSignInButton() === false) {
     if (storedData.previousState === DISLIKED_STATE) {
       sendVote(1);
@@ -60,7 +62,7 @@ function likeClicked(storedData) {
   }
 }
 
-function dislikeClicked(storedData) {
+function dislikeClicked() {
   if (checkForSignInButton() == false) {
     if (storedData.previousState === NEUTRAL_STATE) {
       sendVote(-1);
@@ -85,4 +87,30 @@ function dislikeClicked(storedData) {
   }
 }
 
-export { sendVote, sendVideoIds, likeClicked, dislikeClicked }
+function addLikeDislikeEventListener() {
+  const 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;
+}
+
+export {
+  sendVote,
+  sendVideoIds,
+  likeClicked,
+  dislikeClicked,
+  addLikeDislikeEventListener,
+  storageChangeHandler,
+};

Extensions/combined/src/state.js

@@ -7,6 +7,16 @@ const LIKED_STATE = "LIKED_STATE";
 const DISLIKED_STATE = "DISLIKED_STATE";
 const NEUTRAL_STATE = "NEUTRAL_STATE";
 
+let extConfig = {
+  disableVoteSubmission: false,
+};
+
+let storedData = {
+  likes: 0,
+  dislikes: 0,
+  previousState: NEUTRAL_STATE,
+};
+
 function isMobile() {
   return location.hostname == "m.youtube.com";
 }
@@ -97,13 +107,28 @@ function setState(storedData) {
   );
 }
 
-function setInitialState(storedData) {
+function setInitialState() {
   setState(storedData);
   setTimeout(() => {
     sendVideoIds();
   }, 1500);
 }
 
+function initExtConfig() {
+  initializeDisableVoteSubmission();
+}
+
+function initializeDisableVoteSubmission() {
+  getBrowser().storage.sync.get(['disableVoteSubmission'], (res) => {
+    if (res.disableVoteSubmission === undefined) {
+      getBrowser().storage.sync.set({disableVoteSubmission: false});
+    }
+    else {
+      extConfig.disableVoteSubmission = res.disableVoteSubmission;
+    }
+  });
+}
+
 export {
   isMobile,
   isVideoDisliked,
@@ -117,4 +142,7 @@ export {
   LIKED_STATE,
   DISLIKED_STATE,
   NEUTRAL_STATE,
+  extConfig,
+  initExtConfig,
+  storedData,
 };