토이프로젝트 [SkipAD]web-1

1. 제작 이유

우선 IOS 환경에서 앱개발을 먼저 시도 해보았으나 홈화면 구현에만 성공하고 본격적인 기능 구현에는 실패하고 말았다.

이에 차순위 계획이었던 웹환경에서 프로그램을 제작해 보았다.

 

제작하기로 마음먹기로 한 것은 이전 직장을 다니면서 였다.

수술실에서 근무하다 보면 유튜브를 틀어 노래를 재생해놓고는 하는데

그럴때 마다 광고가 나와 여간 귀찮은 것이 아니었다.

항상 건너뛰기 버튼을 눌러줘야 흐름이 끊기지 않았기에 다른 선생님들의 귀찮음이 쌓여갔다.

그래서 크롬 확장 프로그램을 만들어 불편함을 줄여보기로 했다.

아마 구글의 수익성에 저촉된다는 이유로 거부가 배포는 거부가 될 지 모르지만.

우선 할 수 있는 것까지 해보려고 한다.

 

2.제작 과정

우선 이 프로그램이 제대로 돌아가기 위해서는 설계를 잘 해야 한다고 생각했다.

간단한 마인드맵으로 설계를 해보았다.

중점적인 기능은 유튜브의 소스코드를 인식해야 했다.

즉, 유튜브 광고 건너뛰기 버튼의 태그값을 인식해야 하는 것이다.

그리고 현재 화면에 광고가 있는지 확인하고 있다면 클릭하는 함수를 실행하는 것

그게 가장 주된 기능이라고 생각하며 제작해 보았다.

 

필요한 코드는 원하는 기능을 구글에 검색하거나

https://developer.mozilla.org/ko/

MDN Web Docs

사이트에서 예제와 함께 이해하면서 써보았다.

 

일단 원하는 코드나 함수는 찾아냈고,

가장 중요한 유튜브의 광고건너뛰기 버튼의 태그값(?)을 알아볼 차례였고

다행히도 구글이 제공하는 개발자모드에서는 간편하게 찾을 수 있었다.

평범한 유튜브 홈화면

평범한 유튜브 광고화면

저 광고 버튼의 태그 값을 알아보려면

개발자 도구

마우스 커서 모양을 클릭하고

태그값을 알아보려는 버튼으로 커서를 가져다 대면 위와 같이 정보를 확인할 수 있다.

이렇게 유튜브 API를 간단하게 확인해 보았다.

 

그리고 이제 코드를 작성해보았다.

// 광고 건너뛰기 버튼 요소를 찾습니다.
const skipButton = document.getElementsByClassName("ytp-ad-skip-button ytp-button");

// 광고가 있는지 확인합니다.
const checkForAd = setInterval(() => {
  const adElement = document.querySelector("div.video-ads ytp-ad-module");
  if (skipButton) {
    // 광고 건너뛰기 버튼이 있는 경우, 광고 건너뛰기 버튼을 클릭합니다.
    skipButton.click();
  }
}, 5000); // 5초마다 광고 여부를 체크합니다.

그리고 크롬 확장프로그램으로 등록하기 위해 파일명을 content.js로 바꿨다.

추가로 manifest.json 파일을 만들어 해당 프로그램의 정보를 입력했다.

위 프로그램의 경우 다음과 같은 양식으로 작성했다.

{
    "name": "SKIPAD",
    "version": "1.0",
    "manifest_version": 3,
    "description": "유튜브 광고를 5초후 자동으로 건너뛰는 확장 프로그램입니다.",
    "permissions": ["activeTab"],
    "content_scripts": [
      {
        "matches": ["https://www.youtube.com/*"],
        "js": ["content.js"]
      }
    ],
    "icons": {
      "16": "icon16.png",
      "32": "icon32.png",
      "48": "icon48.png",
      "128": "icon128.png",
      "256": "icon256.png"
    }
  }

아이콘의 경우 이전에 IOS 앱개발을 위해 만들어 뒀던 것을 재활용했다.

크기는 각 16*16, 32*32...256*256 픽셀로 수정해서 연동했다.

 

그리고 대망의 적용의 시간

....uncaught typeerror: skipButton is not a function

???

잡히지 않는 뭐? 버튼이 함수가 아니라고?🤔

갈고리 수집가

하 아무튼 오류라는 거는 확실히 알았으니 이 오류를 검색해보았다. 

정확하게 이해하지는 못한 것 같지만 함수가 적용될 수 없는 코드라는 것이었다.

애초에 skipbutton은 함수로 지정한 것이 아니라서 그런건가?

그래서 처음부터 다시 함수를 지정하는 방식으로 설계해 보았다.

그리고 검색을 하던 중 일치하는 항목을 찾는 getElementsByClassName 과 비슷한 querySelector를 발견했다.

전자는 클래스 값에 해당하는 DOM객체를 찾아 컬렉션 리턴 하고,

후자는 특정 name, id, class를 제한하지 않고 css선택자를 사용하여 요소를 찾아 첫번째 객체를 리턴한다는 차이가 있다고 한다.

그리고 전자가 조금 더 빠르다고 한다.

이건 좀 더 학습을 하면서 큰 소스코드를 받아 처리해보면서 느껴야 할 것 같고

1mb도 안되는 내 프로그램으로는 해당 사항이 없는 것 같아 후자를 사용하기로 했다.

그래서 다시 작성한 코드는 다음과 같다.

// 광고 스킵 버튼을 클릭하는 함수
function clickSkipButton() {
  const skipButton = document.querySelector(".ytp-ad-skip-button.ytp-button");
  if (skipButton) {
    skipButton.click();
  }
}

// 페이지가 로드되면 광고 스킵 버튼을 5초마다 찾아서 클릭합니다.
window.addEventListener("load", () => {
  setInterval(clickSkipButton, 5000);
});

훨씬 깔끔하고 원하는 방향대로 담긴 것 같다.

구글 유튜브의 수익성에 위반되지 않도록 최소 시간을 5초로 잡고 계속 갱신하면서 모니터링 하는 것 코드로 담는게 생각보다 어려웠다.

아무튼 이제 확장 프로그램에 담아서 실행해 보았다.

확장 프로그램에 담는 것은 간단하게 아래에서도 확인할 수 있다.

https://support.google.com/chrome/a/answer/2714278?hl=ko 

맞춤 Chrome 앱 및 확장 프로그램 만들기 및 게시하기 - Chrome Enterprise and Education 고객센터

간단하게 설명하자면

1.프로그램을 담을 폴더를 만든다.

2.아이콘, contet.js, manifest.json 파일을 만든다.

3.chrome://extensions/ 에 들어간다.

4.압축해제된 확장 프로그램을 로드합니다를 클릭한다.

5.해당 디렉토리 폴더를 선택하고 실험해본다.

6.오류가 나면 수정하고 반복한다.

 

그래서 유튜브를 실행해본 결과 광고가 알아서 넘어가 진다는 결과를 얻었다....여기까지만 해도 좋았겠지만,우선 내가 생각하는 개발은 배포까지 완료해야 비로소 끝이라고 생각하기 때문에 까짓거 시도해보기로 헀다.그런데... 개발자 등록 해야 된다네?흠...어차피 한번 등록하면 계속 쓰니까 $5 내고 등록했다.

등록과정에서 거지 국가에 한국은 없길래 일본을 선택했고

그렇게 임시 망명자가 되었다.

암튼 무사히 개발자 등록을 마쳤고크롬 웹스토어에 등록 절차를 따라 정보를 기입한 후 배포 검토 신청을 해놓은 상태이다.뭔가 부족하거나 부적절하다면 거부가 될 수 있겠지만.까짓거 또 다시 수정해서 무한 신청하면 되니까일단 현생을 살면서 기다리도록 하겠다.