설명
- 웹 브라우저의 유저 스크립트 기능을 이용하여, 공감이 많은 댓글부터 보여 줍니다.
대댓글이 있는 경우, 댓글과 대댓글 중 제일 많은 공감수를 기준으로 합니다.
- 공감수 옆에 공감수를 문자 그래프(?)로 보여 줍니다.
(아래의 실행 예를 보시면 이해하기 쉬울 겁니다)
실행 예
적용 전:
적용 후:
사용법
(파이어폭스 기준이고, 사용방법을 아주 친절하게 알려 드리지는 않습니다 - 죄송합니다)
1. Violentmonkey, Tampermonkey 등의 유저 스크립트 확장 기능을 설치합니다.
2. 아래 스크립트를 복사 & 붙여넣기 합니다.
// ==UserScript== // @name 클리앙 clien.net // @namespace Violentmonkey Scripts // @match https://www.clien.net/service/board/* // @version 1.0 // @author deth // @description 2022. 9. 20. 오전 9:37:12 // ==/UserScript== const comments = [...document.querySelectorAll("div.comment_row")]; const get_likes = (x) => parseInt(x?.querySelector("strong")?.innerText) || 0; comments.forEach((x) => x.likes = get_likes(x)); { // https://en.wikipedia.org/wiki/Braille_Patterns const box_chars = ["","⡀","⡄","⡆","⡇","⣇","⣧","⣷","⣿"]; const max_top_comment = 1024; [...comments] .sort((x, y) => y.likes - x.likes) .slice(0, max_top_comment) .filter((x) => x.likes > 1) .forEach((x, i) => { const top = document.createElement("span"); top.classList.add("top"); const len = box_chars.length - 1; top.innerText = box_chars[len].repeat(x.likes / len) + box_chars[x.likes % len]; top.style.color = `hsl(${Math.min(i, 15) / 16.0 * 270.0}deg 100% 50%)`; x.querySelector("div.comment_content_symph")?.appendChild(top); }); } { const max_likes = (xs) => xs.reduce((acc, x) => Math.max(acc, x.likes), 0); const sorted = comments .reduce( (acc, x) => { if (x.classList.contains("re") && acc.length > 0) { acc[acc.length - 1].push(x); } else { acc.push([x]); } return acc; }, [] ) .sort((xs, ys) => max_likes(ys) - max_likes(xs)) .flat(); sorted[0]?.parentNode?.append(...sorted); }
제작 동기
크롬에서 "클리앙 UI 확장"을 고맙게 잘 쓰고 있었는데, 파이어폭스로 오면서 사용할 수가 없게 되었습니다. 그래서 비슷한 걸 만들면서, 아예 레딧처럼 댓글 순서를 바꾸면 어떨까 싶었습니다.
PC에서 크롬 안쓰고 파폭만 예전부터 계속 써오는데,
개꿀 기능이네요 ㅎㅎ
잘쓰겠습니다~
오~ 신세계입니다.