유튜브 자막 표시기 리팩토링 - content_script.js

🔨 content_script.js 뜯어 고치기

출처 : developer.chrome.com

content_script는 웹 페이지 컨텍스트에서 실행되는 스트립트 파일이다.

DOM에 직접 접근할 수 있다. 때문에 핵심 기능이 이 곳에 들어간다.

 

이 확장 프로그램의 content_script.js은 MutationObserver로 유튜브 DOM이 업데이트 되는 것을 탐지하고,

popup.js에서 설정을 바꾸면 chrome.runtime에서 바꾼 설정값을 받는다.

 

이 모든게 하나의 스크립트 파일에 있다. 이번에도 분리를 잘 해서 깔끔하게 수정하고 싶다.

그리고 MutationObserver사용에 문제가 있는데, 이건 리팩토링 이후 수정해보겠다.

 

🧩 MVP 패턴 도입

content script는 popup과는 다르게 HTMLElement에서 입력이 들어오고 HTMLElement로 출력을 내보내지 않는다.

HTMLElement는 출력을 내보내는 것만 수행하고 입력은 chrome.runtime(MessageManager)과 MutationObserver(YtObserver)에서 받아온다.

 

그래서 이번엔 Model로 입력이 들어오고 View로 출력을 하는 구조로 설계를 해보았다.

아래와 같다.

여기서 눈여겨봐야 할 점은 View의 생성을 Context에서 하지 않고 Presenter에서 담당한다는 것이다.

View는 유튜브 페이지에 따라 생성되고, 삭제되야 하기 때문에 프로그램 초기에 준비할 수 없다.

게다가 메모리 이슈도 있어 View객체를 어딘가에 저장하면 안된다. (업데이트 할 때마다 DOM에서 가져와야 함)

 

- Views

CcTagView는  CcTagFinder와 CcTagFactory의해 생성되고

YtThumbnailView는 YtThumbnailViewManager에 의해 생성된다.

뷰들은 여러개 생성될 수 있다.

각 뷰는 DOM에서 가져온 HTMLElement에 1:1 대응되고 생성자 주입으로 Element를 받는다.

 

유튜브 페이지는 썸네일을 한번에 로드하지 않는다.

먼저 썸네일 컨테이너 엘리먼트를 띄운 후 비동기적으로 안의 overlays (이미지, 재생시간 등)을 로딩하는데,

이를 기다리는 특별한 로직이 필요했다.

 

그래서 YtThumbnailView에서 overlays가 필요한 작업(overlays안에 cc태그가 달려있는지, cc태그 달기)들은 overlays가 로딩된 후에 처리하도록 했다. (비동기적으로 수행한다)

이때 원래는 setInterval로 1초 간격으로 overlays의 로드를 체크했지만 이번에는 MutationObserver를 적용해 더 깔끔하게 처리했다.

(참고 : https://stackoverflow.com/questions/34863788/how-to-check-if-an-element-has-been-loaded-on-a-page-before-running-a-script)

 

-  Presenter

사실상 CcTagFinder와 CcTagFactory, YtThumbnailViewManager는 Presenter 영역에 속한다고 할 수 있다.

이 두개는 뷰들을 생성한다. (CcTagFactory는 HTMLElement도 생성한다; 엘리먼트 생성후 뷰에 주입)

 

CcTagPresenter에서 위 세개를 이용해 뷰를 가져온 후, 사용한다. 또, CcTagModel에 접근해 설정 정보를 읽어온다.

 

- Model

CcTagModel은 단순히 데이터 저장용도로 사용했다.

뷰와 분리 적용할 수 있는 로직이 딱히 없기도 했다.

특별한건 지역통합 기능을 사용할때 언어코드를 배열로 던져주는 것 뿐?

 

- 나머지 것들

YtObserver는 MutationObserver을 이용해 유튜브 내 썸네일 추가를 감시한다.

(썸네일이 발견되면 CcTagPresenter에게 이벤트를 던진다)

ContentMessageManager는 chrome.runtime을 이용해 popup의 설정 변경을 감시한다.

(설정이 변경되면 CcTagPresenter에게 이벤트를 던진다)

 

YtObserver는 화면과 관련이 깊어 View영역에 속하지만 ContentMessageManager와 사용법이 유사해 나머지로 뺐다.

🇯🇵 일본어 번역 추가

_locale 폴더에 일본어로 번역된 메시지를 추가했다.

물론 본인은 일본어를 전혀 못해서 다른 분의 도움을 받았다.

add: japanese translation by Aiuces · Pull Request #18 · 2jun0/yt-caption-checker

👏 마무리

이번에도 MVP 패턴을 이용해 코드를 수정해보았다.

사랑해요 GPT!

그리고 이번에는 GPT에게 많은 도움을 받았다.

예제를 참고하기도 했고 MVP 패턴의 개념에 대해 조금은 알아간것 같다.

(GPT가 말을 번복하기도 해서 좀 곤란했다)