Chrome 0.0.0.6 added

Extensions/chrome/background.js

@@ -52,9 +52,60 @@ chrome.runtime.onMessageExternal.addListener(
         }
         toSend = [];
       }
+    } else if (request.message == "fetch_from_youtube") {
+      fetch(`https://www.youtube.com/watch?v=${request.videoId}`, {
+        method: "GET",
+      })
+        .then((response) => response.text())
+        .then((text) => {
+          var result = getDislikesFromYoutubeResponse(text);
+          sendUserSubmittedStatisticsToApi({...result, videoId: request.videoId});
+          sendResponse(result);
+        });
     }
   }
 );
 
 const sentIds = new Set();
 let toSend = [];
+
+function getDislikesFromYoutubeResponse(htmlResponse) {
+  let start =
+    htmlResponse.indexOf('"videoDetails":') + '"videoDetails":'.length;
+  let end =
+    htmlResponse.indexOf('"isLiveContent":false}', start) +
+    '"isLiveContent":false}'.length;
+  if (end < start) {
+    end =
+      htmlResponse.indexOf('"isLiveContent":true}', start) +
+      '"isLiveContent":true}'.length;
+  }
+  let jsonStr = htmlResponse.substring(start, end);
+  let jsonResult = JSON.parse(jsonStr);
+  let rating = jsonResult.averageRating;
+
+  start = htmlResponse.indexOf('"topLevelButtons":[', end);
+  start =
+    htmlResponse.indexOf('"accessibilityData":', start) +
+    '"accessibilityData":'.length;
+  end = htmlResponse.indexOf("}", start);
+  let likes = +htmlResponse.substring(start, end).replace(/\D/g, "");
+  let dislikes = (likes * (5 - rating)) / (rating - 1);
+  let result = {
+    likes,
+    dislikes: Math.round(dislikes),
+    rating,
+    viewCount: +jsonResult.viewCount
+  };
+  return result;
+}
+
+function sendUserSubmittedStatisticsToApi(statistics) {
+  fetch(`${apiUrl}/votes/user-submitted`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(statistics),
+  });
+}

Extensions/chrome/content-style.css

@@ -12,3 +12,35 @@
 [dark] #return-youtube-dislike-bar {
   background: #3ea6ff;
 }
+
+.ryd-tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+  cursor: pointer;
+  height: 10px;
+  margin-bottom: -5px;
+}
+
+/* Tooltip text */
+.ryd-tooltip .ryd-tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: #000000c4;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+  bottom: 15px;
+  left: 10px;
+  font-size: 12px;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.ryd-tooltip:hover .ryd-tooltiptext {
+  visibility: visible;
+}

Extensions/chrome/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Youtube Dislike Button",
   "description": "Returns ability to see dislikes",
-  "version": "0.0.0.5",
+  "version": "0.0.0.6",
   "manifest_version": 3,
   "background": {
     "service_worker": "background.js"

Extensions/chrome/popup.css

@@ -11,3 +11,5 @@ button.current {
     box-shadow: 0 0 0 2px white,
     0 0 0 4px black;
 }
+
+

Extensions/chrome/script.js

@@ -1,4 +1,12 @@
 (function (extensionId) {
+  function cLog(message, writer) {
+    message = `[return youtube dislike]: ${message}`;
+    if (writer) {
+      writer(message);
+    } else {
+      console.log(message);
+    }
+  }
   function getButtons() {
     return document
       .getElementById("menu-container")
@@ -48,6 +56,32 @@
   }
 
   function setState() {
+    let statsSet = false;
+    chrome.runtime.sendMessage(
+      extensionId,
+      {
+        message: "fetch_from_youtube",
+        videoId: getVideoId(window.location.href),
+      },
+      function (response) {
+        if (response != undefined) {
+          cLog("response from youtube:");
+          cLog(JSON.stringify(response));
+          try {
+            if (response.likes || response.dislikes) {
+              const formattedDislike = numberFormat(response.dislikes);
+              setDislikes(formattedDislike);
+              createRateBar(response.likes, response.dislikes);
+              statsSet = true;
+            }
+          } catch (e) {
+            debugger;
+            statsSet = false;
+          }
+        }
+      }
+    );
+
     chrome.runtime.sendMessage(
       extensionId,
       {
@@ -56,7 +90,9 @@
         state: getState(),
       },
       function (response) {
-        if (response != undefined) {
+        cLog("response from api:");
+        cLog(JSON.stringify(response));
+        if (response != undefined && !statsSet) {
           const formattedDislike = numberFormat(response.dislikes);
           // setLikes(response.likes);
           setDislikes(formattedDislike);
@@ -137,11 +173,22 @@
     if (!rateBar) {
       document.getElementById("menu-container").insertAdjacentHTML(
         "beforeend",
-        `<div id="return-youtube-dislike-bar-container" 
-                  style="width: ${widthPx}px; 
-                  height: 3px; margin-left: 6px;">
-                  <div id="return-youtube-dislike-bar" style="width: ${widthPercent}%; height: 100%" ></div>
-                </div>`
+        `
+<div class="ryd-tooltip">
+  <div
+    id="return-youtube-dislike-bar-container"
+    style="width: ${widthPx}px;
+                  height: 3px; margin-left: 6px;"
+  >
+    <div
+      id="return-youtube-dislike-bar"
+      style="width: ${widthPercent}%; height: 100%"
+    ></div>
+  </div>
+
+  <span class="ryd-tooltiptext ryd-tooltip-top">${likes}&nbsp;/&nbsp;${dislikes}</span>
+</div>
+`
       );
     } else {
       document.getElementById(

StaticSite/index.html

@@ -65,6 +65,9 @@
               >Version 0.0.0.5 released - ratio (like/dislike) bar added</strong
             >
           </p>
+          <p>
+            Now <a href="https://addons.mozilla.org/en-US/firefox/addon/return-youtube-dislikes/"> available in official Firefox store</a>
+          </p>
           <img class="img-fluid mb-5" src="images/ratio.jpg" />
           <p>
             This is a Chrome/Firefox/Userscript extension that return dislike
@@ -143,11 +146,11 @@
 
             <h4>Firefox:</h4>
 
-            Install from extension's firefox addon store
-            <a
-              href="https://addons.mozilla.org/en-US/firefox/addon/return-youtube-dislikes/"
-              target="_blank"
-              >page</a
+            Install from extension's official firefox <a
+            href="https://addons.mozilla.org/en-US/firefox/addon/return-youtube-dislikes/"
+            target="_blank"
+          > addon store
+            page</a
             >. Check for updates often - this extension is being actively
             improved Latest version coming out as soon as update is approved by
             Mozilla
@@ -308,7 +311,7 @@
             <br />
             <br />
             <h4>Discord server</h4>
-            <a href="https://discord.gg/HvwXNG4M">Join</a> a discord discussion
+            <a href="https://discord.gg/UMxyMmCgfF">Join</a> a discord discussion
           </section>
           <hr />
           <section id="sources" class="pb-5">