[JS] Chrome Extension 제작 - 한국인 있나요? 유튜브 한글 댓글만 보기

유튜브를 보다 보면 한국인이 올린 영상에 아무리 스크롤을 해도 한글로 작성된 댓글이 나오지 않는 경우가 많았다.

그래서 올해 초부터 '기회가 된다면 한글로 작성된 댓글만 필터링해서 보여주는 크롬 확장을 만들어보자.'라고 생각만 하고 만드는 방법도 제대로 모르겠고 귀찮기도 해서 만들지 않았었다.

 

이제 회사를 9개월 정도 다니다 보니 대충 어떤 식으로 뭘 찾아서 응용하면 되는지 알 수 있는 능력이 생긴 것 같았고 계속 생각만 했던 한글 댓글만 보여주는 확장 프로그램을 만들기로 하였다.

 

만들어서 올려보자! 라고 결심하였지만 이미 만들어져 있는 확장 프로그램이 많았다...

 

우선 생각한 게 댓글을 불러오는 ajax가 있을 거라 생각하였고 무작정 유튜브에 들어가 관리자 도구를 열었다. 그런 다음 댓글을 불러온 뒤 네트워크 탭에서 확인을 해보니

 

누가 봐도 댓글을 불러오는 ajax인 comment_service_ajax

 

알기 쉽게 comment라고 붙어있는 ajax가 바로 보였다.

그다음 어떻게 해야 할지 고민을 하면서 유튜브의 JS 코드를 봤는데 난독화가 되어있어 퇴근 후 설렁설렁 만들면서 분석할만한 코드가 아니었다.

 

이런 코드들은 나같은 초보 개발자에게는 어울리지 않아...

 

그래서 생각한 게 XMLHttpRequest의 send가 완료된 후 댓글 중에서 한글이 포함되어있지 않은 요소들을 제거하는 방법이었다.

prototype.send를 재정의해 URL에 "comment_service_ajax"가 포함되어있으면 한글이 포함되지 않은 요소를 제거하기로 하였다.

 

let send = XMLHttpRequest.prototype.send;

XMLHttpRequest.prototype.send = function() {
  send.apply(this, arguments);

  this.addEventListener('load', e => {
    if (e.currentTarget.responseURL.includes('comment_service_ajax')) {
      // 한글이 포함되지 않은 댓글 제거
    }
  }, false);
}

 

대충 이런 식으로 작성하고 테스트했는데 놀랍게도 제대로 작동하였다. 신나서 바로 크롬 확장으로 만들어 테스트를 했다.

 

 

 

그런데 아무런 일도 일어나지 않았다. 그래서 유튜브에서 댓글을 요청하는 XHLHttpRequest에 디버그를 걸어 확인해보니 오른쪽처럼 재정의한 send가 아닌 그냥 기존의 send를 이용하고 있었다.

 

바로 끝낼 수 있을 줄 알았는데...

찾아보니 크롬 확장 프로그램의 자바스크립트는 독립된 공간에서 작업을 한다고 했다.

그래서 나는 script 태그를 만든 다음 src에 해당 작업을 하는 코드들을 넣어 로드가 끝나면 head에 넣어주기로 하였다.

 

let injectScript = document.createElement('script');
injectScript.src = '경로'
document.head.appendChild(injectScript);

만들고 나서 생각해보니 평소 회사에서는 IE 호환성을 위해 appendChild를 써서 습관적으로 사용했는데 크롬 확장은 크롬에서만 쓸 수 있으니 append를 쓰는 게 좋았을 것 같다.

 

이렇게 하고 나니 정상적으로 필터링을 해줬는데 문제는 ajax load가 완료될 때 있는 댓글들만 필터링을 하였다. 유튜브가 ajax load가 끝나자마자 댓글을 모두 뿌려주는 게 아니라 동적으로 하나씩 불러오고 있었다.

 

 

그냥 한 번에 뿌려버리면 안되나

 

이 문제는 comment 부분에 이전 포스팅에서 공부한 Mutation Observer를 이용하여 쉽게 해결하였다.

그리고 대충 이런저런 코드를 추가한다.

 

 

포스팅하기 귀찮아서 생략한거 아님 정말 쓸모 없는 이런저런 코드들이라 생략 함

 

 

 

확장 프로그램을 이용해 한글 댓글만 보이게 하기

 

확장 프로그램을 실행하면 사진처럼 나타나게 된다. 그래도 나름 유튜브 스타일을 망치지 않도록 만들어보려고 노력했다.

외국인이 한글로 작성한 댓글까지 거르지는 못한다...

 

테스트하면서 느꼈는데 BTS 영상에서 한글 댓글 찾는건 포기하는게 좋다... 

 

첫 번째 댓글 의도치 않은 악플이 되었는데...

 

 

유튜브에서 한글 댓글이 보이지 않아 답답했던 분은 크롬 확장 프로그램을 이용하시면 한글로 작성된 댓글들만 골라볼 수 있습니다.

제가 만든 확장 프로그램을 이용해 보고 싶으신 분은 크롬 웹 스토어에서 '한국인 있나요?'를 검색하시면 됩니다.

 

처음으로 혼자 생각하고 만들어본 거라 기분이 좋았다.