요즘 이것 저것을 공부하며 참 유튜브를 많이 본다.
하지만 내 신경을 거슬리게 하고 손가락을 귀찮게 하는 것이 하나 있었으니...
유튜브 화질이 계속 360p로 고정되어 매 동영상마다 화질 설정을 위해 무려 세 번이나 클릭을 해야 한다.
이것을 크롬 익스텐션을 이용해 해결할 수 있다는 검색 결과가 있었으나 가장 상위에 노출되는 익스텐션의 리뷰를 보니
아마도 불순한 의도가 심어져 있거나 유튜브측에서 이런 꼼수를 막아놓은 듯 하다.
고로 직접 만든다.
# 1차 시도
1. response로부터 유튜브 영상의 화질 정보 리스트를 가져온다.
2. 그 중 가장 높은 화질로 재생되도록 query를 보내 최고 화질로 설정한다.
유튜브 화질 리스트 정보
유튜브의 선택 가능한 품질 정보는 <body> 하위 <script>의 ytInitialPlayerResponse 변수에 담겨있으며, 그 중에서도 responseContext.adaptiveFormats에 있다.
유튜브 화질 바꾸기
구글링했을 땐 query로 vq="화질정보"를 주어 설정이 가능하다 하였으나, 안된다.
아마 이 것이 대다수의 익스텐션이 막힌 이유가 아닌가 싶다.
1차 결론:
# 2차 시도
이렇게 된 이상 직접 매크로 방식으로 짠다.
뭔가 멋드러지게 하려다가 안될 땐 무식하게 하는게 상책이다.
자바스크립트로 클릭에 해당되는 세 번의 이벤트를 직접 발생시켜 화질이 설정되도록 한다.
1. 설정 메뉴 구조 확인
설정 메뉴 div는 'ytp-id-18'의 id를 가지고 있다. 따라서 해당 div는 항상 getElementById로 확실하게 찾을 수 있다.
2. 화질 메뉴 구조 확인
화질 메뉴는 'ytp-id-18' div의 .lastChild.lastChild이다.
3. 최고 화질 버튼 구조 확인
최고화질 버튼은 'ytp-id-18' div의 .firstChild.firstChild.nextSibling.firstChild이다.
4. 동작 테스트
아래 코드를 크롬 개발자 도구에서 실행하였다.
// 설정 메뉴 화질 버튼 클릭
document.getElementById('ytp-id-18').lastChild.lastChild.lastChild.click()
// 최고 화질 버튼 클릭
document.getElementById('ytp-id-18').firstChild.firstChild.nextSibling.firstChild.click()
성공이다!
이 다음으론 크롬 익스텐션으로 해당 동작을 구현해보도록 하겠다.
'Projects > Chrome extension' 카테고리의 다른 글
| Youtube web 화질 고정 Chrome Extension 개발기 - 3 (完) (1) | 2023.07.04 |
|---|---|
| Youtube web 화질 고정 Chrome Extension 개발기 - 2 (0) | 2023.07.01 |
