Merge issues fixed, core reformatted with prettier

Extensions/UserScript/Return Youtube Dislike.user.js

@@ -30,7 +30,7 @@ let likesvalue = 0;
 let dislikesvalue = 0;
 
 let isMobile = location.hostname == "m.youtube.com";
-let isShorts = () => location.pathname.startsWith("/shorts")
+let isShorts = () => location.pathname.startsWith("/shorts");
 let mobileDislikes = 0;
 function cLog(text, subtext = "") {
   subtext = subtext.trim() === "" ? "" : `(${subtext})`;
@@ -42,18 +42,22 @@ function isInViewport(element) {
   const height = innerHeight || document.documentElement.clientHeight;
   const width = innerWidth || document.documentElement.clientWidth;
   return (
-      rect.top >= 0 &&
-      rect.left >= 0 &&
-      rect.bottom <= height &&
-      rect.right <= width
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= height &&
+    rect.right <= width
   );
 }
 
 function getButtons() {
-  if(isShorts()) {
-    let elements=document.querySelectorAll(isMobile ? "ytm-like-button-renderer" : "#like-button > ytd-like-button-renderer");
-    for(let element of elements) {
-      if(isInViewport(element)) {
+  if (isShorts()) {
+    let elements = document.querySelectorAll(
+      isMobile
+        ? "ytm-like-button-renderer"
+        : "#like-button > ytd-like-button-renderer"
+    );
+    for (let element of elements) {
+      if (isInViewport(element)) {
         return element;
       }
     }
@@ -116,10 +120,10 @@ function checkForUserAvatarButton() {
   if (isMobile) {
     return;
   }
-  if (document.querySelector('#avatar-btn')) {
-    return true
+  if (document.querySelector("#avatar-btn")) {
+    return true;
   } else {
-    return false
+    return false;
   }
 }
 
@@ -235,7 +239,6 @@ function createRateBar(likes, dislikes) {
   }
 }
 
-
 function setState() {
   cLog("Fetching votes...");
   let statsSet = false;
@@ -262,17 +265,17 @@ function likeClicked() {
       likesvalue--;
       createRateBar(likesvalue, dislikesvalue);
       setDislikes(numberFormat(dislikesvalue));
-      previousState = 3
+      previousState = 3;
     } else if (previousState == 2) {
       likesvalue++;
       dislikesvalue--;
-      setDislikes(numberFormat(dislikesvalue))
+      setDislikes(numberFormat(dislikesvalue));
       createRateBar(likesvalue, dislikesvalue);
-      previousState = 1
+      previousState = 1;
     } else if (previousState == 3) {
       likesvalue++;
-      createRateBar(likesvalue, dislikesvalue)
-      previousState = 1
+      createRateBar(likesvalue, dislikesvalue);
+      previousState = 1;
     }
   }
 }
@@ -283,18 +286,18 @@ function dislikeClicked() {
       dislikesvalue++;
       setDislikes(numberFormat(dislikesvalue));
       createRateBar(likesvalue, dislikesvalue);
-      previousState = 2
+      previousState = 2;
     } else if (previousState == 2) {
       dislikesvalue--;
       setDislikes(numberFormat(dislikesvalue));
       createRateBar(likesvalue, dislikesvalue);
-      previousState = 3
+      previousState = 3;
     } else if (previousState == 1) {
       likesvalue--;
       dislikesvalue++;
       setDislikes(numberFormat(dislikesvalue));
       createRateBar(likesvalue, dislikesvalue);
-      previousState = 2
+      previousState = 2;
     }
   }
 }
@@ -359,7 +362,7 @@ function setEventListeners(evt) {
 
   function checkForJS_Finish(check) {
     console.log();
-    if (isShorts() || getButtons()?.offsetParent && isVideoLoaded()) {
+    if (isShorts() || (getButtons()?.offsetParent && isVideoLoaded())) {
       const buttons = getButtons();
 
       if (!window.returnDislikeButtonlistenersSet) {
@@ -369,7 +372,9 @@ function setEventListeners(evt) {
           buttons.children[1].addEventListener("click", dislikeClicked);
           buttons.children[0].addEventListener("touchstart", likeClicked);
           buttons.children[1].addEventListener("touchstart", dislikeClicked);
-        } catch { return } //Don't spam errors into the console
+        } catch {
+          return;
+        } //Don't spam errors into the console
         window.returnDislikeButtonlistenersSet = true;
       }
       setInitialState();

Extensions/combined/manifest-chrome.json

@@ -2,7 +2,7 @@
   "name": "__MSG_extensionName__",
   "description": "__MSG_extensionDesc__",
   "default_locale": "en",
-  "version": "2.1.0.4",
+  "version": "2.1.0.3",
   "manifest_version": 3,
   "background": {
     "service_worker": "ryd.background.js"

Extensions/combined/manifest-firefox.json

@@ -2,7 +2,7 @@
   "name": "__MSG_extensionName__",
   "description": "__MSG_extensionDesc__",
   "default_locale": "en",
-  "version": "2.1.0.4",
+  "version": "2.1.0.3",
   "manifest_version": 2,
   "background": {
     "scripts": ["ryd.background.js"]

Extensions/combined/popup.css

@@ -43,7 +43,7 @@ button:hover {
 }
 
 #ext-version {
-  padding: .25rem .5rem;
+  padding: 0.25rem 0.5rem;
 }
 
 #ext-update {
@@ -51,21 +51,21 @@ button:hover {
   color: var(--white);
   text-decoration: none;
   background: var(--primary);
-  border-radius: .25rem;
+  border-radius: 0.25rem;
 }
 #ext-update:hover {
   text-decoration: underline;
 }
 
 #ext {
-  padding: .25rem 0;
+  padding: 0.25rem 0;
   z-index: 69;
   position: fixed;
   background: var(--secondary);
   margin: 0;
   bottom: 1.15rem;
   right: 1.15rem;
-  border-radius: .25rem;
+  border-radius: 0.25rem;
 }
 
 .switch:before {
@@ -73,8 +73,8 @@ button:hover {
   visibility: hidden;
   width: 250px;
   background-color: var(--secondary);
-  border-radius: .5rem;
-  padding: .5rem;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
 
   position: absolute;
   z-index: 1;

Extensions/combined/popup.html

@@ -20,16 +20,32 @@
         />
         <path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff" />
       </svg>
-      <h1 style="margin-bottom: 0.75rem" title="__MSG_extensionName__">__MSG_extensionName__</h1>
-      <p style="color: var(--lightGrey)" title="__MSG_textDeveloper__">__MSG_textDeveloper__</p>
+      <h1 style="margin-bottom: 0.75rem" title="__MSG_extensionName__">
+        __MSG_extensionName__
+      </h1>
+      <p style="color: var(--lightGrey)" title="__MSG_textDeveloper__">
+        __MSG_textDeveloper__
+      </p>
 
-      <button id="link_website" title="__MSG_linkWebsite__">__MSG_linkWebsite__</button>
-      <button id="link_github" >GitHub</button>
+      <button id="link_website" title="__MSG_linkWebsite__">
+        __MSG_linkWebsite__
+      </button>
+      <button id="link_github">GitHub</button>
       <button id="link_discord">Discord</button>
       <br />
-      <button style="margin-top: 0.3rem" id="link_faq" title="__MSG_linkFAQ__">__MSG_linkFAQ__</button>
-      <button style="margin-top: 0.3em" id="link_donate" title="__MSG_linkDonate__">__MSG_linkDonate__</button>
-      <button style="margin-top: 0.3em" id="link_help" title="__MSG_linkHelp__">__MSG_linkHelp__</button>
+      <button style="margin-top: 0.3rem" id="link_faq" title="__MSG_linkFAQ__">
+        __MSG_linkFAQ__
+      </button>
+      <button
+        style="margin-top: 0.3em"
+        id="link_donate"
+        title="__MSG_linkDonate__"
+      >
+        __MSG_linkDonate__
+      </button>
+      <button style="margin-top: 0.3em" id="link_help" title="__MSG_linkHelp__">
+        __MSG_linkHelp__
+      </button>
 
       <br />
       <br />
@@ -64,18 +80,26 @@
 
     <!-- bottom-right -->
     <div id="ext">
-      <a href="https://returnyoutubedislike.com/install" target="_blank" id="ext-update"></a>
+      <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" title="__MSG_legendSettings__">__MSG_legendSettings__</legend>
+      <legend id="advancedLegend" title="__MSG_legendSettings__">
+        __MSG_legendSettings__
+      </legend>
 
       <label class="switch" data-hover="__MSG_textSettingsHover__">
         <input type="checkbox" id="disable_vote_submission" />
         <span class="slider" />
-        <span class="switchLabel" title="__MSG_textSettings__">__MSG_textSettings__</span>
+        <span class="switchLabel" title="__MSG_textSettings__"
+          >__MSG_textSettings__</span
+        >
       </label>
       <br />
       <label class="switch" data-hover="Use custom colors in new pages.">
@@ -119,7 +143,7 @@
         <span id="color_theme_example_like" style="display: inline-block; vertical-align: text-top; width: 1em; height: 1em;">&nbsp;</span>
         <span id="color_theme_example_dislike"  style="display: inline-block; vertical-align: text-top; width: 1em; height: 1em;">&nbsp;</span>
       </div>
-      
+
       <!-- <br />
       <label class="switch">
         <input type="checkbox" id="star_ratio" />

Extensions/combined/popup.js

@@ -5,10 +5,12 @@ const config = {
   coloredThumbs: false,
   coloredBar: false,
   colorTheme: "classic",
-  numberDisplayFormat: 'compactShort',
+  numberDisplayFormat: "compactShort",
   numberDisplayRoundDown: true,
-  showAdvancedMessage: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>',
-  hideAdvancedMessage: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm4.3 14.3c-.39.39-1.02.39-1.41 0L12 13.41 9.11 16.3c-.39.39-1.02.39-1.41 0-.39-.39-.39-1.02 0-1.41L10.59 12 7.7 9.11c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L12 10.59l2.89-2.89c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41z"/></svg>',
+  showAdvancedMessage:
+    '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>',
+  hideAdvancedMessage:
+    '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm4.3 14.3c-.39.39-1.02.39-1.41 0L12 13.41 9.11 16.3c-.39.39-1.02.39-1.41 0-.39-.39-.39-1.02 0-1.41L10.59 12 7.7 9.11c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L12 10.59l2.89-2.89c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41z"/></svg>',
 
   links: {
     website: "https://returnyoutubedislike.com",
@@ -16,67 +18,57 @@ const config = {
     discord: "https://discord.gg/mYnESY4Md5",
     donate: "https://returnyoutubedislike.com/donate",
     faq: "https://returnyoutubedislike.com/faq",
-    help: "https://returnyoutubedislike.com/help"
+    help: "https://returnyoutubedislike.com/help",
   },
 };
 
 /*   Change language   */
-function localizeHtmlPage()
-{
-    //Localize by replacing __MSG_***__ meta tags
-    var objects = document.getElementsByTagName('html');
-    for (var j = 0; j < objects.length; j++)
-    {
-        var obj = objects[j];
-
-        var valStrH = obj.innerHTML.toString();
-        var valNewH = valStrH.replace(/__MSG_(\w+)__/g, function(match, v1)
-        {
-            return v1 ? chrome.i18n.getMessage(v1) : "";
-        });
-
-        if(valNewH != valStrH)
-        {
-            obj.innerHTML = valNewH;
-        }
+function localizeHtmlPage() {
+  //Localize by replacing __MSG_***__ meta tags
+  var objects = document.getElementsByTagName("html");
+  for (var j = 0; j < objects.length; j++) {
+    var obj = objects[j];
+
+    var valStrH = obj.innerHTML.toString();
+    var valNewH = valStrH.replace(/__MSG_(\w+)__/g, function (match, v1) {
+      return v1 ? chrome.i18n.getMessage(v1) : "";
+    });
+
+    if (valNewH != valStrH) {
+      obj.innerHTML = valNewH;
     }
+  }
 }
 
 localizeHtmlPage();
 
 /*   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})
-  })
+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) => {
     chrome.storage.sync.set({ disableVoteSubmission: ev.target.checked });
   });
-document
-  .getElementById("colored_thumbs")
-  .addEventListener("click", (ev) => {
-    chrome.storage.sync.set({ coloredThumbs: ev.target.checked });
-  });
-document
-  .getElementById("colored_bar")
-  .addEventListener("click", (ev) => {
-    chrome.storage.sync.set({ coloredBar: ev.target.checked });
-  });
-document
-  .getElementById("color_theme")
-  .addEventListener("click", (ev) => {
-    chrome.storage.sync.set({ colorTheme: ev.target.value });
-  });
+document.getElementById("colored_thumbs").addEventListener("click", (ev) => {
+  chrome.storage.sync.set({ coloredThumbs: ev.target.checked });
+});
+document.getElementById("colored_bar").addEventListener("click", (ev) => {
+  chrome.storage.sync.set({ coloredBar: ev.target.checked });
+});
+document.getElementById("color_theme").addEventListener("click", (ev) => {
+  chrome.storage.sync.set({ colorTheme: ev.target.value });
+});
 
 document.getElementById("number_round_down").addEventListener("click", (ev) => {
   chrome.storage.sync.set({ numberDisplayRoundDown: ev.target.checked });
@@ -120,7 +112,7 @@ function initConfig() {
 
 function initializeVersionNumber() {
   const version = chrome.runtime.getManifest().version;
-  document.getElementById('ext-version').innerHTML = 'v' + version;
+  document.getElementById("ext-version").innerHTML = "v" + version;
 
   fetch(
     "https://raw.githubusercontent.com/Anarios/return-youtube-dislike/main/Extensions/combined/manifest-chrome.json"
@@ -128,12 +120,12 @@ function initializeVersionNumber() {
     .then((response) => response.json())
     .then((json) => {
       if (version !== json.version) {
-        document.getElementById('ext-update').innerHTML = chrome.i18n.getMessage("textUpdate") +' v' + json.version;
-        document.getElementById('ext-update').style.padding = '.25rem .5rem';
+        document.getElementById("ext-update").innerHTML =
+          chrome.i18n.getMessage("textUpdate") + " v" + json.version;
+        document.getElementById("ext-update").style.padding = ".25rem .5rem";
       }
     });
   // .catch(console.error);
-
 }
 
 function initializeDisableVoteSubmission() {
@@ -142,7 +134,6 @@ function initializeDisableVoteSubmission() {
   });
 }
 
-
 function initializeColoredThumbs() {
   chrome.storage.sync.get(["coloredThumbs"], (res) => {
     handleColoredThumbsChangeEvent(res.coloredThumbs);
@@ -159,7 +150,8 @@ function initializeColorTheme() {
   chrome.storage.sync.get(["colorTheme"], (res) => {
     handleColorThemeChangeEvent(res.colorTheme);
   });
-  
+}
+
 function initializeNumberDisplayRoundDown() {
   chrome.storage.sync.get(["numberDisplayRoundDown"], (res) => {
     handleNumberDisplayRoundDownChangeEvent(res.numberDisplayRoundDown);
@@ -180,12 +172,12 @@ function updateNumberDisplayFormatContent(roundDown) {
   } else {
     testValue = 123456;
   }
-  document.getElementById('number_format_compactShort').innerHTML =
-    getNumberFormatter('compactShort').format(testValue);
-  document.getElementById('number_format_compactLong').innerHTML =
-    getNumberFormatter('compactLong').format(testValue);
-  document.getElementById('number_format_standard').innerHTML =
-    getNumberFormatter('standard').format(testValue);
+  document.getElementById("number_format_compactShort").innerHTML =
+    getNumberFormatter("compactShort").format(testValue);
+  document.getElementById("number_format_compactLong").innerHTML =
+    getNumberFormatter("compactLong").format(testValue);
+  document.getElementById("number_format_standard").innerHTML =
+    getNumberFormatter("standard").format(testValue);
 }
 
 chrome.storage.onChanged.addListener(storageChangeHandler);
@@ -197,19 +189,14 @@ function storageChangeHandler(changes, area) {
     );
   }
   if (changes.coloredThumbs !== undefined) {
-    handleColoredThumbsChangeEvent(
-      changes.coloredThumbs.newValue
-    );
+    handleColoredThumbsChangeEvent(changes.coloredThumbs.newValue);
   }
   if (changes.coloredBar !== undefined) {
-    handleColoredBarChangeEvent(
-      changes.coloredBar.newValue
-    );
+    handleColoredBarChangeEvent(changes.coloredBar.newValue);
   }
   if (changes.colorTheme !== undefined) {
-    handleColorThemeChangeEvent(
-      changes.colorTheme.newValue
-    );
+    handleColorThemeChangeEvent(changes.colorTheme.newValue);
+  }
   if (changes.numberDisplayRoundDown !== undefined) {
     handleNumberDisplayRoundDownChangeEvent(
       changes.numberDisplayRoundDown.newValue
@@ -225,7 +212,6 @@ function handleDisableVoteSubmissionChangeEvent(value) {
   document.getElementById("disable_vote_submission").checked = value;
 }
 
-
 function handleColoredThumbsChangeEvent(value) {
   config.coloredThumbs = value;
   document.getElementById("colored_thumbs").checked = value;
@@ -245,8 +231,11 @@ function handleColorThemeChangeEvent(value) {
 }
 
 function updateColorThemePreviewContent(themeName) {
-  document.getElementById("color_theme_example_like").style.backgroundColor = getColorFromTheme(themeName, true);
-  document.getElementById("color_theme_example_dislike").style.backgroundColor = getColorFromTheme(themeName, false);
+  document.getElementById("color_theme_example_like").style.backgroundColor =
+    getColorFromTheme(themeName, true);
+  document.getElementById("color_theme_example_dislike").style.backgroundColor =
+    getColorFromTheme(themeName, false);
+}
 function handleNumberDisplayRoundDownChangeEvent(value) {
   config.numberDisplayRoundDown = value;
   document.getElementById("number_round_down").checked = value;
@@ -262,20 +251,20 @@ function handleNumberDisplayFormatChangeEvent(value) {
 function getNumberFormatter(optionSelect) {
   let formatterNotation;
   let formatterCompactDisplay;
-  
+
   switch (optionSelect) {
-    case 'compactLong':
-      formatterNotation = 'compact';
-      formatterCompactDisplay = 'long';
+    case "compactLong":
+      formatterNotation = "compact";
+      formatterCompactDisplay = "long";
       break;
-    case 'standard': 
-      formatterNotation = 'standard';
-      formatterCompactDisplay = 'short';
+    case "standard":
+      formatterNotation = "standard";
+      formatterCompactDisplay = "short";
       break;
-    case 'compactShort':
+    case "compactShort":
     default:
-      formatterNotation = 'compact';
-      formatterCompactDisplay = 'short';
+      formatterNotation = "compact";
+      formatterCompactDisplay = "short";
   }
   const formatter = Intl.NumberFormat(
     document.documentElement.lang || userLocales || navigator.language,
@@ -307,37 +296,34 @@ function getNumberFormatter(optionSelect) {
   }
 })();
 
-
 function getColorFromTheme(colorTheme, voteIsLike) {
   let colorString;
-  switch(colorTheme) {
-    case 'accessible':
+  switch (colorTheme) {
+    case "accessible":
       if (voteIsLike === true) {
-        colorString = 'dodgerblue';
+        colorString = "dodgerblue";
       } else {
-        colorString = 'gold';
+        colorString = "gold";
       }
       break;
-    case 'neon':
+    case "neon":
       if (voteIsLike === true) {
-        colorString = 'aqua';
+        colorString = "aqua";
       } else {
-        colorString = 'magenta';
+        colorString = "magenta";
       }
       break;
-    case 'classic':
+    case "classic":
     default:
       if (voteIsLike === true) {
-        colorString = 'lime';
+        colorString = "lime";
       } else {
-        colorString = 'red';
+        colorString = "red";
       }
   }
   return colorString;
 }
 
-
-
 /* popup-script.js
 document.querySelector('#login')
 .addEventListener('click', function () {

Extensions/combined/readme.md

@@ -1,7 +1,9 @@
 # Extension Source
+
 ## Guide to Compiling
 
 ## Compiling to Development (Testing)
+
 <ol>
     <li>Go to the root directory of the project</li>
     <li>Run <code>npm i</code> to install all project dependancies (if not done so already)</li>
@@ -9,6 +11,7 @@
 </ol>
 
 ## Compiling to Production (Final Release)
+
 <ol>
     <li>Go to the root directory of the project</li>
     <li>Run <code>npm i</code> to install all project dependancies (if not done so already)</li>

Extensions/combined/ryd.background.js

@@ -1,6 +1,6 @@
 const apiUrl = "https://returnyoutubedislikeapi.com";
-const voteDisabledIconName = 'icon_hold128.png';
-const defaultIconName = 'icon128.png';
+const voteDisabledIconName = "icon_hold128.png";
+const defaultIconName = "icon128.png";
 let api;
 
 /** stores extension's global config */
@@ -11,14 +11,14 @@ let extConfig = {
   colorTheme: "classic", // classic, accessible, neon
   // coloredThumbs: false,
   // coloredBar: false,
-  numberDisplayFormat: 'compactShort', // compactShort, compactLong, standard
+  numberDisplayFormat: "compactShort", // compactShort, compactLong, standard
   numberDisplayRoundDown: true, // locale 'de' shows exact numbers by default
 };
 
 if (isChrome()) api = chrome;
 else if (isFirefox()) api = browser;
 
-initExtConfig()
+initExtConfig();
 
 api.runtime.onMessage.addListener((request, sender, sendResponse) => {
   if (request.message === "get_auth_token") {
@@ -97,7 +97,7 @@ async function sendVote(videoId, vote) {
           await sendVote(videoId, vote);
           return;
         }
-        return response.json()
+        return response.json();
       })
       .then((response) => {
         solvePuzzle(response).then((solvedPuzzle) => {
@@ -238,7 +238,9 @@ function generateUserID(length = 36) {
 
 function storageChangeHandler(changes, area) {
   if (changes.disableVoteSubmission !== undefined) {
-    handleDisableVoteSubmissionChangeEvent(changes.disableVoteSubmission.newValue);
+    handleDisableVoteSubmissionChangeEvent(
+      changes.disableVoteSubmission.newValue
+    );
   }
   if (changes.coloredThumbs !== undefined) {
     handleColoredThumbsChangeEvent(changes.coloredThumbs.newValue);
@@ -248,10 +250,11 @@ function storageChangeHandler(changes, area) {
   }
   if (changes.colorTheme !== undefined) {
     handleColorThemeChangeEvent(changes.colorTheme.newValue);
+  }
   if (changes.numberDisplayRoundDown !== undefined) {
     handleNumberDisplayRoundDownChangeEvent(
       changes.numberDisplayRoundDown.newValue
-      );
+    );
   }
   if (changes.numberDisplayFormat !== undefined) {
     handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue);
@@ -276,9 +279,11 @@ function handleNumberDisplayRoundDownChangeEvent(value) {
 }
 
 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');
+  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");
 }
 
 function handleColoredThumbsChangeEvent(value) {
@@ -305,61 +310,59 @@ function initExtConfig() {
 }
 
 function initializeDisableVoteSubmission() {
-  api.storage.sync.get(['disableVoteSubmission'], (res) => {
+  api.storage.sync.get(["disableVoteSubmission"], (res) => {
     if (res.disableVoteSubmission === undefined) {
-      api.storage.sync.set({disableVoteSubmission: false});
-    }
-    else {
+      api.storage.sync.set({ disableVoteSubmission: false });
+    } else {
       extConfig.disableVoteSubmission = res.disableVoteSubmission;
       if (res.disableVoteSubmission) changeIcon(voteDisabledIconName);
     }
   });
 }
 
-
 function initializeColoredThumbs() {
-  api.storage.sync.get(['coloredThumbs'], (res) => {
+  api.storage.sync.get(["coloredThumbs"], (res) => {
     if (res.coloredThumbs === undefined) {
-      api.storage.sync.set({coloredThumbs: false});
-    }
-    else {
+      api.storage.sync.set({ coloredThumbs: false });
+    } else {
       extConfig.coloredThumbs = res.coloredThumbs;
     }
-    
+  });
+}
+
 function initializeNumberDisplayRoundDown() {
-  api.storage.sync.get(['numberDisplayRoundDown'], (res) => {
+  api.storage.sync.get(["numberDisplayRoundDown"], (res) => {
     if (res.numberDisplayRoundDown === undefined) {
-      api.storage.sync.set({numberDisplayRoundDown: true});
+      api.storage.sync.set({ numberDisplayRoundDown: true });
     } else {
       extConfig.numberDisplayRoundDown = res.numberDisplayRoundDown;
     }
   });
 }
 
-
 function initializeColoredBar() {
-  api.storage.sync.get(['coloredBar'], (res) => {
+  api.storage.sync.get(["coloredBar"], (res) => {
     if (res.coloredBar === undefined) {
-      api.storage.sync.set({coloredBar: false});
-    }
-    else {
+      api.storage.sync.set({ coloredBar: false });
+    } else {
       extConfig.coloredBar = res.coloredBar;
     }
   });
 }
 
 function initializeColorTheme() {
-  api.storage.sync.get(['colorTheme'], (res) => {
+  api.storage.sync.get(["colorTheme"], (res) => {
     if (res.colorTheme === undefined) {
-      api.storage.sync.set({colorTheme: false});
-    }
-    else {
+      api.storage.sync.set({ colorTheme: false });
+    } else {
       extConfig.colorTheme = res.colorTheme;
     }
+  });
+}
 function initializeNumberDisplayFormat() {
-  api.storage.sync.get(['numberDisplayFormat'], (res) => {
+  api.storage.sync.get(["numberDisplayFormat"], (res) => {
     if (res.numberDisplayFormat === undefined) {
-      api.storage.sync.set({ numberDisplayFormat: 'compactShort' });
+      api.storage.sync.set({ numberDisplayFormat: "compactShort" });
     } else {
       extConfig.numberDisplayFormat = res.numberDisplayFormat;
     }
@@ -371,5 +374,7 @@ function isChrome() {
 }
 
 function isFirefox() {
-  return typeof browser !== "undefined" && typeof browser.runtime !== "undefined";
+  return (
+    typeof browser !== "undefined" && typeof browser.runtime !== "undefined"
+  );
 }

Extensions/combined/ryd.content-script.js

@@ -25,18 +25,30 @@ import {
 } from "./src/state";
 
 //---   Import Video & Browser Functions   ---//
-import { numberFormat, getBrowser, getVideoId, isVideoLoaded, cLog } from "./src/utils";
+import {
+  numberFormat,
+  getBrowser,
+  getVideoId,
+  isVideoLoaded,
+  cLog,
+} from "./src/utils";
 import { createRateBar } from "./src/bar";
-import { sendVideoIds, sendVote, likeClicked, dislikeClicked, addLikeDislikeEventListener, storageChangeHandler  } from "./src/events"
-
+import {
+  sendVideoIds,
+  sendVote,
+  likeClicked,
+  dislikeClicked,
+  addLikeDislikeEventListener,
+  storageChangeHandler,
+} from "./src/events";
 
-initExtConfig()
+initExtConfig();
 
 let jsInitChecktimer = null;
 
 function setEventListeners(evt) {
   function checkForJS_Finish() {
-    if (isShorts() || getButtons()?.offsetParent && isVideoLoaded()) {
+    if (isShorts() || (getButtons()?.offsetParent && isVideoLoaded())) {
       addLikeDislikeEventListener();
       setInitialState();
       getBrowser().storage.onChanged.addListener(storageChangeHandler);

Extensions/combined/src/bar.js

@@ -1,9 +1,6 @@
 import { getButtons } from "./buttons";
 import { likesDisabledState, extConfig } from "./state";
-import {
-  cLog,
-  getColorFromTheme,
-} from "./utils";
+import { cLog, getColorFromTheme } from "./utils";
 import { isMobile, likesDisabledState } from "./state";
 import { cLog } from "./utils";
 function createRateBar(likes, dislikes) {
@@ -18,22 +15,21 @@ function createRateBar(likes, dislikes) {
     const widthPercent =
       likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
 
-
     if (!rateBar) {
-      let colorLikeStyle = '';
-      let colorDislikeStyle = '';
+      let colorLikeStyle = "";
+      let colorDislikeStyle = "";
       if (extConfig.coloredBar) {
-        colorLikeStyle = '; background-color: ' + getColorFromTheme(true);
-        colorDislikeStyle = '; background-color: ' + getColorFromTheme(false);
+        colorLikeStyle = "; background-color: " + getColorFromTheme(true);
+        colorDislikeStyle = "; background-color: " + getColorFromTheme(false);
       }
 
-    if (!rateBar && !isMobile()) {
-      (
-        document.getElementById("menu-container") ||
-        document.querySelector("ytm-slim-video-action-bar-renderer")
-      ).insertAdjacentHTML(
-        "beforeend",
-        `
+      if (!rateBar && !isMobile()) {
+        (
+          document.getElementById("menu-container") ||
+          document.querySelector("ytm-slim-video-action-bar-renderer")
+        ).insertAdjacentHTML(
+          "beforeend",
+          `
             <div class="ryd-tooltip" style="width: ${widthPx}px">
             <div class="ryd-tooltip-bar-container">
                <div
@@ -51,22 +47,26 @@ function createRateBar(likes, dislikes) {
             </tp-yt-paper-tooltip>
             </div>
     `
-      );
-    } else {
-      document.getElementById("ryd-bar-container").style.width = widthPx + "px";
-      document.getElementById("ryd-bar").style.width = widthPercent + "%";
-      document.querySelector(
-        "#ryd-dislike-tooltip > #tooltip"
-      ).innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
-      if (extConfig.coloredBar) {
-        document.getElementById("ryd-bar-container").style.backgroundColor = getColorFromTheme(false);
-        document.getElementById("ryd-bar").style.backgroundColor = getColorFromTheme(true);
+        );
+      } else {
+        document.getElementById("ryd-bar-container").style.width =
+          widthPx + "px";
+        document.getElementById("ryd-bar").style.width = widthPercent + "%";
+        document.querySelector(
+          "#ryd-dislike-tooltip > #tooltip"
+        ).innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
+        if (extConfig.coloredBar) {
+          document.getElementById("ryd-bar-container").style.backgroundColor =
+            getColorFromTheme(false);
+          document.getElementById("ryd-bar").style.backgroundColor =
+            getColorFromTheme(true);
+        }
       }
+    } else {
+      cLog("removing bar");
+      let ratebar = document.getElementById("ryd-bar-container");
+      ratebar.parentNode.removeChild(ratebar);
     }
-  } else {
-    cLog("removing bar");
-    let ratebar = document.getElementById("ryd-bar-container");
-    ratebar.parentNode.removeChild(ratebar);
   }
 }
 

Extensions/combined/src/buttons.js

@@ -3,12 +3,16 @@ import { isInViewport } from "./utils";
 
 function getButtons() {
   //---   If Watching Youtube Shorts:   ---//
-  if(isShorts()) {
-    let elements=document.querySelectorAll(isMobile() ? "ytm-like-button-renderer" : "#like-button > ytd-like-button-renderer"); 
-    for(let element of elements) {
+  if (isShorts()) {
+    let elements = document.querySelectorAll(
+      isMobile()
+        ? "ytm-like-button-renderer"
+        : "#like-button > ytd-like-button-renderer"
+    );
+    for (let element of elements) {
       //Youtube Shorts can have multiple like/dislike buttons when scrolling through videos
       //However, only one of them should be visible (no matter how you zoom)
-      if(isInViewport(element)) {
+      if (isInViewport(element)) {
         return element;
       }
     }

Extensions/combined/src/events.js

@@ -111,20 +111,17 @@ function storageChangeHandler(changes, area) {
     handleDisableVoteSubmissionChangeEvent(
       changes.disableVoteSubmission.newValue
     );
+  }
   if (changes.coloredThumbs !== undefined) {
-    handleColoredThumbsChangeEvent(
-      changes.coloredThumbs.newValue
-    );
+    handleColoredThumbsChangeEvent(changes.coloredThumbs.newValue);
   }
   if (changes.coloredBar !== undefined) {
-    handleColoredBarChangeEvent(
-      changes.coloredBar.newValue
-    );
+    handleColoredBarChangeEvent(changes.coloredBar.newValue);
   }
   if (changes.colorTheme !== undefined) {
-    handleColorThemeChangeEvent(
-      changes.colorTheme.newValue
-    );
+    handleColorThemeChangeEvent(changes.colorTheme.newValue);
+  }
+
   if (changes.numberDisplayRoundDown !== undefined) {
     handleNumberDisplayRoundDownChangeEvent(
       changes.numberDisplayRoundDown.newValue
@@ -139,7 +136,6 @@ function handleDisableVoteSubmissionChangeEvent(value) {
   extConfig.disableVoteSubmission = value;
 }
 
-
 function handleColoredThumbsChangeEvent(value) {
   extConfig.coloredThumbs = value;
 }
@@ -151,7 +147,7 @@ function handleColoredBarChangeEvent(value) {
 function handleColorThemeChangeEvent(value) {
   extConfig.colorTheme = value;
 }
-    
+
 function handleNumberDisplayFormatChangeEvent(value) {
   extConfig.numberDisplayFormat = value;
 }

Extensions/combined/src/state.js

@@ -1,6 +1,6 @@
 import { getLikeButton, getDislikeButton, getButtons } from "./buttons";
 import { createRateBar } from "./bar";
-import { 
+import {
   getBrowser,
   getVideoId,
   cLog,
@@ -22,7 +22,7 @@ let extConfig = {
   coloredThumbs: false,
   coloredBar: false,
   colorTheme: "classic",
-  numberDisplayFormat: 'compactShort',
+  numberDisplayFormat: "compactShort",
   numberDisplayRoundDown: true,
 };
 
@@ -39,7 +39,7 @@ function isMobile() {
 }
 
 function isShorts() {
-  return location.pathname.startsWith("/shorts")
+  return location.pathname.startsWith("/shorts");
 }
 
 function isVideoLiked() {
@@ -100,7 +100,7 @@ function setDislikes(dislikesCount) {
 }
 
 function getLikeCountFromButton() {
-  if(isShorts()) {
+  if (isShorts()) {
     //Youtube Shorts don't work with this query. It's not nessecary; we can skip it and still see the results.
     //It should be possible to fix this function, but it's not critical to showing the dislike count.
     return 0;
@@ -183,26 +183,26 @@ function initializeDisableVoteSubmission() {
   });
 }
 
-
 function initializeColoredThumbs() {
-  getBrowser().storage.sync.get(['coloredThumbs'], (res) => {
+  getBrowser().storage.sync.get(["coloredThumbs"], (res) => {
     if (res.coloredThumbs === undefined) {
-      getBrowser().storage.sync.set({coloredThumbs: false});
-    }
-    else {
+      getBrowser().storage.sync.set({ coloredThumbs: false });
+    } else {
       extConfig.coloredThumbs = res.coloredThumbs;
     }
   });
 }
 
 function initializeColoredBar() {
-  getBrowser().storage.sync.get(['coloredBar'], (res) => {
+  getBrowser().storage.sync.get(["coloredBar"], (res) => {
     if (res.coloredBar === undefined) {
-      getBrowser().storage.sync.set({coloredBar: false});
-    }
-    else {
+      getBrowser().storage.sync.set({ coloredBar: false });
+    } else {
       extConfig.coloredBar = res.coloredBar;
     }
+  });
+}
+
 function initializeNumberDisplayRoundDown() {
   getBrowser().storage.sync.get(["numberDisplayRoundDown"], (res) => {
     if (res.numberDisplayRoundDown === undefined) {
@@ -213,22 +213,21 @@ function initializeNumberDisplayRoundDown() {
   });
 }
 
-
 function initializeColorTheme() {
-  getBrowser().storage.sync.get(['colorTheme'], (res) => {
+  getBrowser().storage.sync.get(["colorTheme"], (res) => {
     if (res.colorTheme === undefined) {
-      getBrowser().storage.sync.set({colorTheme: false});
-    }
-    else {
+      getBrowser().storage.sync.set({ colorTheme: false });
+    } else {
       extConfig.colorTheme = res.colorTheme;
     }
-  }
+  });
+}
+
 function initializeNumberDisplayFormat() {
-  getBrowser().storage.sync.get(['numberDisplayFormat'], (res) => {
+  getBrowser().storage.sync.get(["numberDisplayFormat"], (res) => {
     if (res.numberDisplayFormat === undefined) {
-      getBrowser().storage.sync.set({ numberDisplayFormat: 'compactShort' });
-    }
-    else {
+      getBrowser().storage.sync.set({ numberDisplayFormat: "compactShort" });
+    } else {
       extConfig.numberDisplayFormat = res.numberDisplayFormat;
     }
   });

Extensions/combined/src/utils.js

@@ -1,6 +1,4 @@
-import {
-  extConfig,
-} from "./state";
+import { extConfig } from "./state";
 
 function roundDown(num) {
   if (num < 1000) return num;
@@ -19,35 +17,37 @@ function numberFormat(numberState) {
         ?.getAttribute("href")
     )?.searchParams?.get("locale");
   } catch {}
-  
+
   let numberDisplay;
   if (extConfig.numberDisplayRoundDown === false) {
     numberDisplay = numberState;
   } else {
     numberDisplay = roundDown(numberState);
   }
-  return getNumberFormatter(extConfig.numberDisplayFormat).format(numberDisplay);
+  return getNumberFormatter(extConfig.numberDisplayFormat).format(
+    numberDisplay
+  );
 }
 
 function getNumberFormatter(optionSelect) {
   let formatterNotation;
   let formatterCompactDisplay;
-  
-  switch(optionSelect) {
-    case 'compactLong':
-      formatterNotation = 'compact';
-      formatterCompactDisplay = 'long';
+
+  switch (optionSelect) {
+    case "compactLong":
+      formatterNotation = "compact";
+      formatterCompactDisplay = "long";
       break;
-    case 'standard': 
-      formatterNotation = 'standard';
-      formatterCompactDisplay = 'short';
+    case "standard":
+      formatterNotation = "standard";
+      formatterCompactDisplay = "short";
       break;
-    case 'compactShort':
+    case "compactShort":
     default:
-      formatterNotation = 'compact';
-      formatterCompactDisplay = 'short';
+      formatterNotation = "compact";
+      formatterCompactDisplay = "short";
   }
-  
+
   const formatter = Intl.NumberFormat(
     document.documentElement.lang || userLocales || navigator.language,
     {
@@ -90,10 +90,10 @@ function isInViewport(element) {
   const height = innerHeight || document.documentElement.clientHeight;
   const width = innerWidth || document.documentElement.clientWidth;
   return (
-      rect.top >= 0 &&
-      rect.left >= 0 &&
-      rect.bottom <= height &&
-      rect.right <= width
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= height &&
+    rect.right <= width
   );
 }
 
@@ -115,30 +115,29 @@ function cLog(message, writer) {
   }
 }
 
-
 function getColorFromTheme(voteIsLike) {
   let colorString;
-  switch(extConfig.colorTheme) {
-    case 'accessible':
+  switch (extConfig.colorTheme) {
+    case "accessible":
       if (voteIsLike === true) {
-        colorString = 'dodgerblue';
+        colorString = "dodgerblue";
       } else {
-        colorString = 'gold';
+        colorString = "gold";
       }
       break;
-    case 'neon':
+    case "neon":
       if (voteIsLike === true) {
-        colorString = 'aqua';
+        colorString = "aqua";
       } else {
-        colorString = 'magenta';
+        colorString = "magenta";
       }
       break;
-    case 'classic':
+    case "classic":
     default:
       if (voteIsLike === true) {
-        colorString = 'lime';
+        colorString = "lime";
       } else {
-        colorString = 'red';
+        colorString = "red";
       }
   }
   return colorString;
@@ -151,5 +150,12 @@ export {
   isVideoLoaded,
   cLog,
   getColorFromTheme,
-}
-export { numberFormat, getBrowser, getVideoId, isInViewport, isVideoLoaded, cLog }
+};
+export {
+  numberFormat,
+  getBrowser,
+  getVideoId,
+  isInViewport,
+  isVideoLoaded,
+  cLog,
+};