크롬의 브라우저 점유율이 매우 큰 시점에서 Chrome Extension에 대한 관심이 높아지고 있다.
특히 가장 유명한 AdBlock의 경우, 2억명이 넘는 사람들이 다운받아서, AdBlock와 Chrome Extension의 원리에 대해 보려 한다.
본 글에서는 Chorme Extension를 사용하여 Naver Sports 영상의 광고를 자동으로 넘기는 시스템을 제작해보려고 한다.
우선 Chrome Extesion을 사용하려면 manifest.json 파일이 필요하다.
폴더를 만들고 mainsfest.json 파일을 생성하여 다음과 같은 코드를 입력한다.
manifest.json
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
{
"manifest_version": 2,
"name": "Naver Player Ad Blocker",
"version": "1.0",
"content_scripts": [
{
"matches": [
],
"js": ["script.js"]
}
],
"permissions": [
"activeTab"
]
}
|
content_scripts는 js 파일이 matches에 있는 url이라면, 항상 실행되도록 하는것이다.
그 다음, script.js 파일을 생성하여 다음과 같은 코드를 입력한다.
script.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var skip = setInterval(function() {
if (document.getElementsByClassName('u_rmc_btn_skip').length === 0) {
}
else{
var button = document.getElementsByClassName('u_rmc_btn_skip')[0];
setTimeout(function(){
}, 1000);
clearInterval(showAlert);
}
}, 1000);
|
skip variable을 생성하여 만약 u_rmc_btn_skip으로 부터 가져온 className의 길이가 0인지 확인
-> 만약 페이지에서 영상재생을 위한 rmcPlayer의 로딩이 완료되지 않았다면 not defined으로 판단되어, 길이가 0으로 반환됨.
만약 로딩이 완료되었다면, skip button variable을 만들어서, button style을 block으로 바꾼다.
광고 영상의 경우 5초가 지났을 때, button style을 none에서 block으로 바꾸는 원리를 이용한 것.
그 다음 button.click()을 통해 버튼 클릭하여 광고를 넘어감
setTimeout을 설정한 이유는, button.click() 이후에 clearInterval을 했더니, 클릭을 안하고, js가 종료된 경우가 있어
1초동안 sleep을 두었다.
이렇게 manifest.json 파일과 script.js 파일을 만들었다면, chrome extension에 등록을 해야한다.
local한 환경에서는, 개발자 모드를 이용하여 바로 테스트가 가능하다.
chrome을 열고, chrome://extensions 주소로 이동한다.
다음과 같은 화면이 뜰것이다.
개발자 모드를 활성화시키고 "압축해제된 확장프로그램을 로드합니다." 버튼을 눌러 manifest.json 과 script.js가 있는 폴더를 선택하면 끝이다!
#교육용_목적으로_제작된_프로그램입니다. #수익을_위한_악용을_금지합니다.