☰

YouTube Similar Comments Hider

Ensure originality in YouTube's comment section by hiding all sorts of repeated comments, copy-paste comments, repeated quotes from the video and saturated memes.

目前为 2021-12-25 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name            YouTube Similar Comments Hider
  3. // @version         1.7.0
  4. // @description     Ensure originality in YouTube's comment section by hiding all sorts of repeated comments, copy-paste comments, repeated quotes from the video and saturated memes.
  5. // @author          BLBC (github.com/hjk789, greasyfork.org/users/679182-hjk789)
  6. // @copyright       2021+, BLBC (github.com/hjk789, greasyfork.org/users/679182-hjk789)
  7. // @homepage        https://github.com/hjk789/Userscripts/tree/master/YouTube-Similar-Comments-Hider
  8. // @license         https://github.com/hjk789/Userscripts/tree/master/YouTube-Similar-Comments-Hider#license
  9. // @include         https://www.youtube.com*
  10. // @grant           GM.getValue
  11. // @grant           GM.setValue
  12. // @grant           GM.listValues
  13. // @namespace https://greasyfork.org/users/679182
  14. // ==/UserScript==
  15.  
  16.  
  17. //--------------- SETTINGS ---------------
  18.  
  19. const tolerance = 3
  20. // 1 - Loosely similar: Pretty much all similar comments will be detected, but there will be many false positives. False positives are comments that are *worded* similarly but have two totally different subjects.
  21. // 2 - Significantly similar: Most similar comments will be detected, but with some or few false positives.
  22. // 3 - Very similar: A moderate detection with few to no false positives, but several comments that are similar, but worded differently, won't be detected.
  23. // 4 - Mostly similar: Detects comments that are close variations of another, such as several comments repeating the same quote from the video with few differences.
  24. // 5 - Almost identical: Detects only comments that are mostly copy-pasted with little to no variation.
  25. // 6 - Custom (advanced): Use a specific minimum threshold, in the 2-90 range. Set the customThreshold variable below to the value you want.
  26.  
  27. const customThreshold = 20
  28.  
  29. let lightenSimilarComments = false           // If set to true, all similar comments will be dimmed (faded) instead of completely hidden.
  30.  
  31. const rememberFilteredComments = true        // Whether the script should store locally every filtered comment from past videos to use them as a second layer of filtering.
  32.                                              // This impacts performance over time. If set to false, only the comments in the current video are considered.
  33. //----------------------------------------
  34.  
  35.  
  36.  
  37. let threshold
  38. let currentSamples, storedSamples
  39. let blockedUsers, selectedUser, blockUserContainer
  40. let currentPage, currentVideoId
  41. let loadedCommentsObserver
  42.  
  43. const waitForURLchange = setInterval(function()             // Because YouTube is a single-page web app, everything happens in the same page, only changing the URL.
  44. {                                                           // So the script needs to check when the URL changes so it can be reassigned to the page and be able to work.
  45.     if (location.href == currentPage)
  46.         return
  47.  
  48.     currentPage = location.href
  49.  
  50.     if (!location.href.includes("watch"))
  51.         return
  52.  
  53.     constructor()
  54.  
  55. }, 500)
  56.  
  57.  
  58.  
  59.  
  60.  
  61. function constructor()
  62. {
  63.     threshold = getThreshold(tolerance)
  64.  
  65.     currentSamples = []
  66.     storedSamples = []
  67.  
  68.     blockedUsers = selectedUser = undefined
  69.  
  70.     currentVideoId = cleanVideoUrl(location.href).split("=")[1]
  71.  
  72.  
  73.     if (rememberFilteredComments)
  74.     {
  75.         GM.listValues().then(function(GmList)
  76.         {
  77.             storedSamples = GmList
  78.  
  79.             storedSamples.splice(storedSamples.indexOf("blockedUsers"),1)
  80.  
  81.             main()
  82.         })
  83.     }
  84.     else main()
  85. }
  86.  
  87. async function main()
  88. {
  89.     const waitForCommentSection = setInterval(async function()
  90.     {
  91.         let commentSection = document.getElementById("comments")?.querySelector("#contents")
  92.  
  93.         if (!commentSection)
  94.             return
  95.  
  96.         clearInterval(waitForCommentSection)
  97.  
  98.  
  99.         let value = await GM.getValue("blockedUsers")
  100.  
  101.         if (!value)
  102.         {
  103.             value = "[]"
  104.             GM.setValue("blockedUsers", value)
  105.         }
  106.  
  107.         blockedUsers = JSON.parse(value)
  108.  
  109.  
  110.         /* Attach a mutation observer to the comments section to detect when more comments are loaded, and process them */
  111.         {
  112.             if (!loadedCommentsObserver)
  113.             {
  114.                 loadedCommentsObserver = new MutationObserver(function(mutations)
  115.                 {
  116.                     for (let i=0; i < mutations.length; i++)
  117.                     {
  118.                         if (!!mutations[i].addedNodes)
  119.                             processComments(mutations[i].addedNodes)
  120.                     }
  121.                 })
  122.  
  123.                 loadedCommentsObserver.observe(commentSection, {childList: true})
  124.             }
  125.         }
  126.  
  127.  
  128.         const waitForCommentSectionHeader = setInterval(function()
  129.         {
  130.             if (!document.getElementById("sort-menu"))
  131.                 return
  132.  
  133.             clearInterval(waitForCommentSectionHeader)
  134.  
  135.  
  136.             if (document.getElementById("toleranceMenu"))
  137.                 return
  138.  
  139.  
  140.             /* Create the hover styles for the menu items */
  141.             {
  142.                 const style = document.createElement("style")
  143.                 style.innerHTML = "#toleranceMenu div div div:hover, #blockUser:hover { background-color: #e7e7e7 !important; }"
  144.                 document.head.appendChild(style)
  145.             }
  146.  
  147.             /* Create the "Filter tolerance" dropdown menu */
  148.             {
  149.                 const toleranceMenuContainer = document.createElement("div")
  150.                 toleranceMenuContainer.id = "toleranceMenu"
  151.                 toleranceMenuContainer.innerHTML = "FILTER TOLERANCE"
  152.                 toleranceMenuContainer.style = "width: 130px; height: 24px; margin-left: 50px; font-size: 14px; font-weight: 500; z-index: 99; cursor: pointer;"
  153.                 toleranceMenuContainer.onclick = function() { this.lastChild.style.visibility = this.lastChild.style.visibility ? "" : "hidden"; event.stopPropagation() }
  154.  
  155.                 const dropdownContainer = document.createElement("div")
  156.                 dropdownContainer.style = "background-color: white; width: max-content; margin-left: -15px; margin-top: 16px; border: lightgray 1px solid; border-radius: 3px; visibility: hidden;"
  157.  
  158.                 var dropdownItemsContainer = document.createElement("div")
  159.                 dropdownItemsContainer.style = "font-weight: initial; letter-spacing: 0.3px; padding-top: 7px;"
  160.  
  161.                 createToleranceDropdownItem("Loosely similar", 1, dropdownItemsContainer, "Pretty much all similar comments will be detected, but there will be many false positives.")
  162.                 createToleranceDropdownItem("Significantly similar", 2, dropdownItemsContainer, "Most similar comments will be detected, but with some or few false positives.")
  163.                 createToleranceDropdownItem("Very similar", 3, dropdownItemsContainer, "A moderate detection with few to no false positives, but several comments that are similar, but worded differently, won't be detected.")
  164.                 createToleranceDropdownItem("Mostly similar", 4, dropdownItemsContainer, "Detects comments that are close variations of another.")
  165.                 createToleranceDropdownItem("Almost indentical", 5, dropdownItemsContainer, "Detects only comments that are mostly copy-pasted with little to no variation.")
  166.                 createToleranceDropdownItem("Custom (advanced)", 6, dropdownItemsContainer, "Use a specific minimum threshold, in the 2-90 range.")
  167.  
  168.                 dropdownContainer.appendChild(dropdownItemsContainer)
  169.  
  170.                 toleranceMenuContainer.appendChild(dropdownContainer)
  171.  
  172.                 document.getElementById("sort-menu").parentElement.appendChild(toleranceMenuContainer)
  173.  
  174.                 document.body.onclick = function() { document.getElementById("toleranceMenu").lastChild.style.visibility = "hidden" }               // Make the dropdown be dismissed when clicked outside of it.
  175.  
  176.  
  177.                 /* Create the "Hide comments" checkbox */
  178.                 {
  179.                     const hideCommentsCheckbox = document.createElement("input")
  180.                     hideCommentsCheckbox.id = "hideComments"
  181.                     hideCommentsCheckbox.type = "checkbox"
  182.                     hideCommentsCheckbox.style = "margin-top: 10px; margin-bottom: 10px;"
  183.                     hideCommentsCheckbox.checked = !lightenSimilarComments
  184.                     hideCommentsCheckbox.onchange = function()
  185.                     {
  186.                         lightenSimilarComments = !this.checked
  187.  
  188.                         if (this.checked)
  189.                         {
  190.                             const comments = document.getElementById("comments").querySelectorAll("ytd-comment-thread-renderer[style^='opacity']")
  191.  
  192.                             for (let i=0; i < comments.length; i++)
  193.                                 comments[i].style = "display: none;"
  194.                         }
  195.                         else
  196.                         {
  197.                             const comments = document.getElementById("comments").querySelectorAll("ytd-comment-thread-renderer[style^='display']")
  198.  
  199.                             for (let i=0; i < comments.length; i++)
  200.                                 comments[i].style = "opacity: 0.5;"
  201.                         }
  202.  
  203.                     }
  204.  
  205.                     const hideCommentsLabel = document.createElement("label")
  206.                     hideCommentsLabel.for = "hideComments"
  207.                     hideCommentsLabel.style = "padding: 8px 19px; border-top: 1px solid; user-select: none;"
  208.                     hideCommentsLabel.innerHTML = "Hide comments"
  209.  
  210.                     hideCommentsLabel.insertBefore(hideCommentsCheckbox, hideCommentsLabel.firstChild)
  211.  
  212.                     dropdownItemsContainer.appendChild(hideCommentsLabel)
  213.                 }
  214.             }
  215.  
  216.             /* Create the "Block this user" option in the comment's side-menu */
  217.             {
  218.                 blockUserContainer = document.createElement("div")
  219.                 blockUserContainer.id = "blockUser"
  220.                 blockUserContainer.style = "background-color: white; font-size: 14px; text-align: center; padding: 8px 0px 8px 0px; cursor: pointer; margin-bottom: 8px;"
  221.                 blockUserContainer.innerHTML = "Block this user"
  222.                 blockUserContainer.onclick = function()
  223.                 {
  224.                     if (confirm("This will hide all comments from ''"+selectedUser.innerText.trim()+"'' in any video. Are you sure?"))
  225.                     {
  226.                         blockedUsers.push(selectedUser.href)
  227.                         GM.setValue("blockedUsers", JSON.stringify(blockedUsers))
  228.                         reprocessComments()
  229.                         document.body.click()     // Dismiss the menu.
  230.                     }
  231.                 }
  232.  
  233.                 const blockUserIcon = document.createElement("span")
  234.                 blockUserIcon.innerHTML = "🚫"
  235.                 blockUserIcon.style = "margin-right: 17px; margin-left: 10px;"
  236.  
  237.                 blockUserContainer.insertBefore(blockUserIcon, blockUserContainer.firstChild)
  238.  
  239.                 const commentMenuButton = commentSection.querySelector("ytd-menu-renderer yt-icon")
  240.  
  241.                 if (commentMenuButton)
  242.                 {
  243.                     commentMenuButton.click()
  244.                     commentMenuButton.click()      // The comment menu doesn't exist in the HTML before it's clicked for the first time. This forces it to be created and dismisses it immediately.
  245.  
  246.                     const blockUserParent = document.querySelector("ytd-menu-popup-renderer")
  247.                     blockUserParent.style = "max-height: max-content !important; max-width: max-content !important;"                // Change the max width and height so that the new item fits in the menu.
  248.                 }
  249.             }
  250.  
  251.             document.body.onclick = function()
  252.             {
  253.                 document.getElementById("blockUser")?.remove()                // Remove the "Block this user" option when not used.
  254.  
  255.                 const toleranceMenu = document.getElementById("toleranceMenu")
  256.                 if (toleranceMenu)  toleranceMenu.firstElementChild.style.visibility = "hidden"              // Dismiss the Filter Tolerance menu when clicked outside.
  257.             }
  258.  
  259.         }, 100)
  260.  
  261.     }, 100)
  262. }
  263.  
  264. function getThreshold(tolerance)
  265. {
  266.     // Return the minimum threshold to treat the comment as similar, depending on the tolerance level. The final threshold can be higher than that, but not lower.
  267.     return tolerance == 1 ? 14 : tolerance == 2 ? 24 : tolerance == 3 ? 35 : tolerance == 4 ? 45 : tolerance == 5 ? 65 :
  268.         customThreshold < 2 ? 2 : customThreshold > 90 ? 90 : customThreshold
  269. }
  270.  
  271. function createToleranceDropdownItem(text, toleranceLevel, container, title)
  272. {
  273.     const item = document.createElement("div")
  274.     item.innerHTML = text
  275.     item.title = title
  276.     item.style.padding = "15px"
  277.     item.onclick = function()
  278.     {
  279.         this.parentElement.querySelector("[style*='background-color']").style.backgroundColor = ""              // Remove the selection style from the previous selected item.
  280.         this.style.backgroundColor = "#e7e7e7"
  281.         this.parentElement.parentElement.style.visibility = "hidden !important"             // Hide the dropdown list when an item is selected.
  282.  
  283.         reprocessComments(getThreshold(toleranceLevel))
  284.     }
  285.  
  286.     if (tolerance == toleranceLevel)
  287.         item.style.backgroundColor = "#e7e7e7"
  288.  
  289.     container.appendChild(item)
  290. }
  291.  
  292. function reprocessComments(thresholdValue = 0)
  293. {
  294.     if (thresholdValue)
  295.         threshold = thresholdValue
  296.  
  297.     const comments = document.getElementById("comments").querySelector("#contents").children
  298.  
  299.     processComments(comments, true)
  300. }
  301.  
  302. function processComments(comments, reprocess = false)
  303. {
  304.     let isSimilar = false
  305.  
  306.     for (let i=0; i < comments.length; i++)
  307.     {
  308.         const commentBody = comments[i].querySelector("#content-text")
  309.         if (!commentBody)               // Sometimes the comments list includes an empty object. When it's such a case, skip to the next one.
  310.             continue
  311.  
  312.         // Because the comment's side-menu is separated from the comments section, this listens to clicks on each three-dot
  313.         // button and store in a variable in what comment it was clicked, to then be used by the "Block this user" button.
  314.         const commentMenuButton = comments[i].querySelector("ytd-menu-renderer")
  315.         if (commentMenuButton)
  316.         {
  317.             commentMenuButton.onclick = function()
  318.             {
  319.                 event.stopPropagation()             // Prevent the "Block this user" option from being removed by clicking the comment menu.
  320.  
  321.                 selectedUser = this.parentElement.parentElement.querySelector("#author-text")
  322.  
  323.                 document.querySelector("ytd-menu-popup-renderer").appendChild(blockUserContainer)               // YouTube reuses the same menu element for every menu in the site. This adds the "Block this user" option
  324.             }                                                                                                   // to the menu only when the comment menu is opened. It's then removed whenever any other menu is opened.
  325.         }
  326.  
  327.         // Standardize the comments for the processing by making them lowercase and without punctuation marks, diacritics, linebreaks, commonly used emojis or repeated characters,
  328.         // so that the differences between comments are in the words used instead of the characters. Also long comments are trimmed to 400 characters, to make the processing lighter.
  329.         const comment = commentBody.textContent.toLocaleLowerCase().replace(/[.,!\-\s]+/g, " ").replace(/(.)\1+|(\W\W)\2+/gu, "$1$2").replace(/(👏|🤩|😁|😂|🤣|😍|❤️|👍🏼|💯|👊🏻)+/g, "#").normalize("NFD").replace(/[\u0300-\u036f*"'’“”]/g, "").substring(0,400).trim()
  330.  
  331.         if (!reprocess)             // If it's a reprocess, don't add the comment again to the samples list, otherwise the list would get duplicated.
  332.         {
  333.             currentSamples.push(comment)
  334.  
  335.             if (rememberFilteredComments)
  336.                 GM.setValue(currentVideoId +"::"+ comment, "")
  337.         }
  338.  
  339.         // Reset the style of the comments, if any.
  340.         if (comments[i].style.opacity || comments[i].style.display)
  341.             comments[i].removeAttribute("style")
  342.  
  343.  
  344.         if (blockedUsers.includes(comments[i].querySelector("#author-text").href))              // The check need to be made *after* the push, otherwise the comments list and the samples list get out of sync.
  345.         {
  346.             comments[i].style.display = "none"
  347.             continue
  348.         }
  349.  
  350.         let n = currentSamples.length
  351.         if (!reprocess)  n--                // The first time the processing is done, the comment should not be compared to the sample added last, as it would be comparing to itself ...
  352.  
  353.         /* Compare the comment with the previous ones of this video */
  354.  
  355.         for (let j=0; j < n; j++)
  356.         {
  357.             if (reprocess && i == j)       // ... On the other hand, in the reprocessings, the comparison should stop on equal indexes to not compare to itself.
  358.                 break
  359.  
  360.             isSimilar = calculateAndCheckThreshold(comment, comments[i], currentSamples[j], "This video")
  361.  
  362.             if (isSimilar)
  363.                 break
  364.         }
  365.  
  366.         /* Compare the comment with the stored ones */
  367.  
  368.         if (rememberFilteredComments && !isSimilar)             // If the comment is already detected as similar, skip the stored samples.
  369.         {
  370.             for (let j=0; j < storedSamples.length; j++)
  371.             {
  372.                 const sampleSplit = storedSamples[j].split("::")
  373.  
  374.                 if (location.search.includes(sampleSplit[0]))             // If the sample came from the same video, skip it, otherwise each comment would be compared to itself.
  375.                     continue
  376.  
  377.                 if (calculateAndCheckThreshold(comment, comments[i], sampleSplit[1], "Other video", threshold + 10))
  378.                     break
  379.             }
  380.         }
  381.     }
  382. }
  383.  
  384. function calculateAndCheckThreshold(comment, commentNode, sample, sampleSource, pthreshold = threshold)
  385. {
  386.     const lengthSum = comment.length + sample.length
  387.  
  388.     let tmpthreshold = lengthSum * pthreshold/100              // The length of both comments is connected to the minimum threshold, this way the threshold is adapted to each comparison.
  389.  
  390.     if (lengthSum/100 < 1)
  391.         tmpthreshold /= lengthSum/100
  392.  
  393.     if (tmpthreshold > 90)
  394.         tmpthreshold = 90
  395.  
  396.  
  397.     const similarity1 = calculateSimilarity(sample, comment)
  398.  
  399.     if (similarity1 >= tmpthreshold)
  400.     {
  401.         const similarity2 = calculateSimilarity(comment, sample)                // Recalculate the other way round to ensure that the two comments are similar to each other in both ways.
  402.  
  403.         if (similarity2 >= tmpthreshold)
  404.         {
  405.             console.log("Similarity C->S: "+similarity1.toFixed(2)
  406.                        +"   ###   Similarity S->C: "+similarity2.toFixed(2)
  407.                        +"   ###   Threshold: "+tmpthreshold.toFixed(2)
  408.                        +"   ###   C+S length: "+(comment.length+sample.length)
  409.                        +"   ###   Sample source: "+sampleSource
  410.                        +"   ###   Sample: "+sample
  411.                        +"   ###   Comment: "+comment)
  412.  
  413.             if (lightenSimilarComments)
  414.                 commentNode.style.opacity = 0.5
  415.             else
  416.                 commentNode.style.display = "none"
  417.  
  418.             return true
  419.         }
  420.     }
  421. }
  422.  
  423. function calculateSimilarity(a, b)
  424. {
  425.     let hits = 0
  426.     let string = ""
  427.     const length = b.length > 400 ? 400 : b.length      // Calculate only the first 400 characters of the comments, otherwise comments that are exaggeratedly long can cause hangs and slow down the processing.
  428.                                                         // Also, long comments are practically never similar, and when they do, they are identical, so 400 chacters are more than enough to detect these cases.
  429.  
  430.     for (let i=0; i < length; i++)                      // For each character of the comment ...
  431.     {
  432.         string += b[i]                                  // ... append it to a string ...
  433.  
  434.         if (a.includes(string))                         // ... and check if the resulting string can be found in the sample comment, and if so, continue appending the characters.
  435.         {
  436.             if (string.length > 3)                      // When the sample comment contains the string, when it's at least 4 characters long ...
  437.             {
  438.                 hits++                                  // ... start counting the number of hits for each character.
  439.  
  440.                 if (string.length == 4)                 // If the string has three characters, recover the two uncounted hits.
  441.                     hits += 3
  442.             }
  443.         }
  444.         else string = ""                                // If the comment doesn't contain the string, clear the string and start building it again with the rest of the characters.
  445.     }
  446.  
  447.     const similarity = hits/length*100                  // Get the proportion of hits out of the total of characters of the comment.
  448.  
  449.     return similarity
  450. }
  451.  
  452. function cleanVideoUrl(fullUrl)
  453. {
  454.     const urlSplit = fullUrl.split("?")                 // Separate the page path from the parameters.
  455.     const paramsSplit = urlSplit[1].split("&")          // Separate each parameter.
  456.  
  457.     for (let i=0; i < paramsSplit.length; i++)
  458.     {
  459.         if (paramsSplit[i].includes("v="))              // Get the video's id.
  460.             return urlSplit[0]+"?"+paramsSplit[i]       // Return the cleaned video URL.
  461.     }
  462. }