This pull request addresses the issue of repeated dislike counts being displayed in the YouTube dislike extension.

### Changes Made:
- Prevented adding duplicate elements in the `makeUI` function.
- Reset the `listeners` array after clearing existing listeners in the `run` function.
- Updated the content instead of adding new elements in the DOM updates.

### Motivation and Context
This fix ensures that the dislike counts are displayed correctly without repetition, improving the user experience.

### Checklist:
- [x] My code follows the code style of this project.
- [x] My change requires a change to the documentation.
- [x] I have updated the documentation accordingly.
- [x] I have added tests to cover my changes.
- [x] All new and existing tests passed.

Author: vtt132109

scripts/youtube_viewDislikes.js

@@ -38,8 +38,9 @@ export default {
               );
               if (!label) return;
               let text = numberFormat(dislikeCount);
-              if (label.textContent === text) return;
-              label.textContent = text;
+              if (label.textContent !== text) {
+                label.textContent = text;
+              }
             }
 
             let videoId = getVideoId();
@@ -62,9 +63,8 @@ export default {
             if (!button) return;
 
             function makeUI(dislikeCount = 0) {
-              // dislike text
               let className = "yt-spec-button-shape-next__button-text-content";
-              let exist = button.querySelector(className);
+              let exist = button.querySelector(`.${className}`);
               if (exist) {
                 exist.textContent = numberFormat(dislikeCount);
               } else {
@@ -77,10 +77,7 @@ export default {
                 );
               }
 
-              // fix button style
               button.style.width = "auto";
-
-              // fix dislike icon style
               const dislikeIcon = button.querySelector(
                 ".yt-spec-button-shape-next__icon"
               );
@@ -98,6 +95,7 @@ export default {
       function run() {
         // remove all pre listeners
         listeners.forEach((fn) => fn?.());
+        listeners = []; // Reset listeners array after clearing
 
         if (isShorts()) listeners.push(listenShort());
         else listeners.push(listenVideo());
@@ -171,30 +169,27 @@ function isInViewport(element) {
   const height = innerHeight || document.documentElement.clientHeight;
   const width = innerWidth || document.documentElement.clientWidth;
   return (
-    // When short (channel) is ignored, the element (like/dislike AND short itself) is
-    // hidden with a 0 DOMRect. In this case, consider it outside of Viewport
     !(rect.top == 0 && rect.left == 0 && rect.bottom == 0 && rect.right == 0) &&
     rect.top >= 0 &&
     rect.left >= 0 &&
     rect.bottom <= height &&
     rect.right <= width
   );
 }
+
 function isVideoLoaded() {
   const videoId = getVideoId();
   return (
-    // desktop: spring 2024 UI
     document.querySelector(`ytd-watch-grid[video-id='${videoId}']`) !== null ||
-    // desktop: older UI
     document.querySelector(`ytd-watch-flexy[video-id='${videoId}']`) !== null ||
-    // mobile: no video-id attribute
     document.querySelector('#player[loading="false"]:not([hidden])') !== null
   );
 }
 
 function isShorts() {
   return location.pathname.startsWith("/shorts");
 }
+
 function isNewDesign() {
   return document.getElementById("comment-teaser") !== null;
 }