YouTube 광고, 멈춰!! 🖐🏻

[0] TL;DR

setInterval 을 통해 "Skip ad" 버튼을 강제로 trigger하는 chrome extension 개발

[1] 도입 계기

youtube 광고 출현 빈도가 높아지고, 광고 하나당 실질적으로 5초 이상의 시간이 소요

[2] Chrome Extension - getting started

chrome extension은 여러 component로 구성(html, css, js)

• background scripts
• content scripts
• options page
• UI elements
• chrome API

manifest.json

Extensions tab 에서 관리 가능

content script

web page(youtube.com)의 context 에서 동작하는 script. manifest.json에 선언된 js파일을 적절한 타이밍에 실행한다. 

여기서 뭔가 할 수 있을 것 같다. ad skip에 필요한 로직 작성 예정

[3] 구현

Main idea

"Skip ad" 버튼을 content script를 통해 강제로 클릭 해보자
버튼이 보이지 않아도 css hidden처리만 되어있을 뿐이지 클릭가능하며, 광고 skip이 동작한다

Code 

skip 버튼의 DOM을 querySelector로 잡아 일정 주기로 skipButton.click() 호출

const skipBtnSelector = "div.ytp-ad-text.ytp-ad-skip-button-text"
const trigger = () => {
  const skipBtn = document.querySelector(skipBtnSelector);
  if (!skipBtn) return; // Not advertising now
  skipBtn.click();
  console.log("당신의 5초 절약되었다");
}
setInterval(trigger, 1000);

최종 구현된 코드는 링크 참고

중앙 하단에 뜨는 팝업 배너

display: none 처리

div#player-ads,
div.video-ads.ytp-ad-module,
div.ytp-ad-overlay-slot {
    display: none !important;
}

[4] 생각해 볼 거리

Result

• 5초후 skip 버튼이 뜨는 광고 ✅
• 무조건 볼수밖에 없는 5초짜리 광고 ☑️
• 10분 간격으로 뜨는 광고(긴 영상) ☑️
• 동영상 시청 중에 하단에 뜨는 팝업 ✅
• iframe 에 embeded된 youtube page ☑️

TODO를 다섯가지 정도로 정리해보았는데 아직 안 되는 케이스가 있다.

다른 extension 은 어떻게 하는지

대개 skip ad 버튼을 trigger하는 방식으로 이루어지는 듯. DOM에 "skip ad"버튼이 있는지 감지하는 기법이 여러가지 있는데

1) setInterval & querySelector
2) mutationObesrver
3) onPageChanged API (extension에서 제공하는 page변경)
4) DOMSubtreeModified (deprecated)
(참조 링크)

https://github.com/squgeim/yt-ad-autoskipper/blob/master/skipad.js
https://github.com/pasupulaphani/adblock-youtube/blob/master/app/scripts/contentscript.js
https://github.com/nirojsapkota/youtube-skip-add/blob/master/skip.js

다른 방법은 없는지

skip ad trigger 말고 광고를 넘기는 함수를 debugger를 통해 찾아 직접 호출

P.S.

광고가 언제 뜰지 몰라서 skip 기능 확인 힘듬(생각보다 광고가 잘 안뜬다)

YouTube premium🥳