유튜브로 영어 공부할 때 자막을 영어로 켰다 한국어로 켰다 하는 게 불편해서
만들었습니다. 두 줄을 동시에 띄우고, 모르는 단어를 누르면 뜻이 나옵니다.
중학생이 혼자 만들고 있습니다.
■ 만들면서 제일 어려웠던 것
유튜브 자막 파일을 직접 요청하면 HTTP 200 에 빈 응답이 옵니다.
자막 주소가 유튜브 자기 플레이어용으로만 서명되어 있어서입니다.
그래서 플레이어가 실제로 쓴 주소를 가로채는 방식으로 우회했습니다.
document_start 에 fetch 와 XMLHttpRequest.prototype.open/send 를
갈아끼워 두고, 플레이어가 자막을 불러갈 때 그 주소를 받아둡니다.
그 주소의 쿼리만 고쳐 쓰면(fmt=json3, tlang=ko) 두 번째 언어도 받아집니다.
서명이 영상과 트랙에만 걸려 있고 출력 언어에는 안 걸려 있어서 됩니다.
여기서 걸린 것이 몇 개 더 있었습니다.
- getOption("captions", "tracklist") 가 영원히 빈 배열일 때가 있습니다.
자막 모듈이 로드되기 전이면 그렇습니다. 자막 있는 영상을 "없음"으로
오판하던 원인이었습니다. getOption("captions", "track") 은 그때도 답을 줍니다. - 자막이 21종 있는 영상(NASA 같은)에서 두 번째 줄이 안 나왔습니다. 목록에
한국어 트랙이 있으면 그걸 직접 받으러 가는데, 가로채기는 플레이어가 실제로
불러온 파일만 볼 수 있습니다. 21개 중 플레이어가 부르는 건 하나뿐입니다. - 스크립트가 두 세계로 나뉩니다. 자막 데이터를 꺼내는 쪽은 페이지와 같은
세계(MAIN)에 있어야 플레이어에 닿고, chrome.storage 를 쓰는 쪽은
격리된 세계(ISOLATED)에 있어야 합니다. 둘 사이는 DOM 이벤트로 넘깁니다.
■ 지금 되는 것
- 자막 두 줄, 단어 클릭하면 뜻 (위키낱말사전)
- 영상 전체 자막 목록, 누르면 그 자리로 이동
- 자막마다 멈추기, A/S/D/Q 로 한 문장씩 이동
- 아는 단어 표시해두면 흐려짐
- 단어장 CSV 내보내기
- 두 번째 자막 11개 언어
■ 서버가 없습니다
계정도 서버도 없습니다. 저장되는 건 전부 브라우저 안에만 있고 저는
누가 뭘 보는지 모릅니다. 그래서 사용 통계도 없습니다.
코드는 MV3 이고, 브라우저 없이 도는 검사가 108개 있습니다.
(자막 파싱, 현재 시각의 자막 찾기, 사전 파싱, 날짜 계산)
쓰시고 안 되는 영상 있으면 알려주시면 고치겠습니다.