YouTube 광고, 멈춰!! 🖐🏻(2)

trevor.ph·2021년 6월 20일

Chrome Extension youtube

의식의흐름대로

목록 보기

2/4

[0] TL;DR

광고가 뜨는 <video> element를 잡아 currentTime=1000 값을 준다

[1] 도입 계기

지난 번에 만든 chrome extension은 잘 동작했으나 다음과 같은 경우 그저 광고를 시청할수 밖에 없었다

무조건 볼수밖에 없는 5+초짜리 광고
10분 간격으로 뜨는 광고(긴 영상)

그리고 setInterval() 을 통해 1초마다 polling하는 방식은 구현하기에는 편하나 좀 구린 느낌이 들었다. 아직 좀 더 잘 할수 있다...

[2] 시도했던 방법⛏️

developer tool 을 통해 youtube 소스코드를 디버깅하며 skip() 같은 개꿀😋 함수가 있는지 탐색

skip버튼에 달려있는 onclick event handler

breakpoint 설정

performance tab에서 call stack을 함께 보며 분석

base.js 를 prettify할 경우 9만줄에 달하는데, 의심가는 부분을 한줄한줄 따라가며 분석해보았다.
uglify가 너무 잘돼있고 일반적인 웹앱과 달리 콜스택이 잘 안나와서 디버깅이 쉽지 않았다. 추가적으로 youtube-dl github에 공개된 youtube쪽 소스코드도 같이 봤으나 큰 도움은 되지 않았다. 심해를 탐사하는 기분이었고 몇 시간쯤 보다보니 정신나갈거같다는 생각이 들어, 그만 다른 방법을 알아보기로 했다

[3] AdBlock은 어떻게 하는가

github에 public 공개된 chrome extension들도 마찬가지로 skip 버튼을 trigger하는 불완전한 방식이라 skip 버튼이 없는 광고의 경우 속수무책이었다. 그런데 AdBlock extension은 모든 종류의 YouTube 광고를 skip한다. 좀 더 좋은 방법을 쓰는 모양인데 안타깝게도 오픈소스가 아니었다. 아쉬운대로 adblock의 소스코드를 까보고자 https://robwu.nl/crxviewer 를 이용하여 extension 파일을 얻을수 있었다. 다행히 uglify가 안돼있고 친절하게 주석도 달려있다 갸꿀~😋

500줄 정도의 짧은 content script였고, 주로 두 가지 경우에 대해 다음과 같이 처리한다
1. skip ad 버튼이 있는 광고 -> hidden처리된 버튼을 클릭
2. skip ad 버튼이 없는 광고 -> <video> 태그를 잡아 currentTime = 10000 처리

첫번째 경우는 이미 알고있고, 궁금했던 두번째 경우는 헛웃음이 나올 정도로 간단한 방법을 사용하고있다. "이게 된다고?" 라는 생각이 바로 들었으나 새 탭을 열어 실험해본 결과 잘 동작하였다. 오만가지 생각이 스쳐갔으나 뒤에 적기로 하고 일단 내 chrome extension에 적용부터 해보기로 했다.

[4] 구현

영상 재생에 사용되는 <video> Element는 HTMLMediaElement 의 구현체로서 currentTime 속성을 가지고 있다. 이 값은 현재 보고있는 영상의 보고있는 영상의 현재 시간을 초단위로 표현하는데, 이 값을 변경할 경우 변경된 시간으로 이동(seek)하게 된다. 이 속성을 이용하여 광고가 뜰 경우 1000초 뒤로 이동시켜버리면 광고가 끝나게 된다. 비겁한 수법이지만 고맙게도 다음과 같이 구현이 매우 간단하다는 장점이 있다.

const timeWarp = () => {
  const video = document.querySelector("html5-video-player video");
  video.currenTime = 10000;
}

학교나 회사에서 의무수강해야하는 교육 동영상도 이런 방법으로 강제 skip이 가능한 경우가 많다. 기존 코드에 위의 코드를 추가하여 다음과 같이 광고가 2연타로 뜨더라도 광고를 잘 넘길수 있다.

하지만 잘 보면 광고가 연속으로 뜨는 경우에는 1초정도 광고를 보게된다. setInterval을 1초마다 걸어놓은 탓인데, 그렇다고 interval값을 1초보다 줄이면 브라우저에 부하가 늘어나게 된다. 아예 polling 방식을 버리고 좀더 고급스러운 방법을 써보기로 한다.

[5] 추가 개선

지난번 포스트에서 mutationObserver를 잠깐 언급하였는데, DOM의 변화를 감지할수 있는 API이다. 광고가 떠있을 때는 DOM 어딘가 표시가 날 것이고 이를 감지하여 광고를 skip하도록 하면 브라우저에 부하를 적게 줄수 있을것이다.
<video> 를 감싸고있는 div.html5-video-player를 보니 광고가 떠있을 때 "ad-showing"이라는 class가 존재하여 이를 감지하여 광고를 skip하도록 구현해본다. trigger()는 지난 포스팅에서 구현한 강제 버튼 클릭 함수, timeWarp()는 이번에 구현한 함수.

const checkAdsPlaying = (mutationsList) => {
  for (const mutation of mutationsList) {
    if (mutation.target.classList.contains("ad-showing")) {
      const videoWrapper = mutation.target;
      trigger(videoWrapper) || timeWarp(videoWrapper)
    }
  }
};
const observer = new MutationObserver(checkAdsPlaying);
observer.observe(target, { attributes: true, attributeFilter: ["class"] });

물론 이것 만으로 잘 동작하지는 않는데