iOS 9 업데이트 Safari 광고 차단기(Content Blocker)개발 강좌

다음은 그림 과 글 이 모두 훌륭 한 방식 으로 이 분야 의 지식 을 공유 하고 구체 적 인 내용 은 다음 과 같다.
구 글 의 광고 차단 금지 에 비해 애플 은 이와 반대로 맥 판 사 파리 가 광고 차단 도 구 를 추가 한 데 이 어 다가 오 는 iOS 9 대 사 파리 에 도 콘 텐 츠 차단 플러그 인-Content Blocker 를 도입 했다.또한 개발 자 들 은 최신 Xcode 7 개발 과 iOS 9 시 뮬 레이 터 를 사용 하여 디 버 깅 을 할 수 있다.필 자 는 Content Blocker 를 어떻게 개발 하 는 지 간단 한 실례 를 들 어 설명 할 것 이다.
      Google 검색 을 사용 할 때 상위 권 의 몇 가 지 는 항상 광고 항목 입 니 다.예 를 들 어'iPhone 6'을 검색 하면 다음 과 같은 결 과 를 얻 을 수 있 습 니 다.
     
그림 1 Google 검색 iPhone 6 광고 차단 예시 없 음
    오늘 의 목 표 는 광고 항목 을 차단 하 는 것 입 니 다.앞으로 구 글 검색 을 사용 할 때 이런 눈 에 거 슬 리 는 광고 가 앞 에 서지 않 을 것 입 니 다.
     우선 건설 프로젝트 입 니 다.iOS Single View Application 을 만 들 고 이 어 프로젝트 에 iOS Content Blocker Extension target 을 만 듭 니 다.그리고 프로젝트 가 블록 리스트.json 파일 과 Action RequestHandler 클래스 를 자동 으로 만 드 는 것 을 볼 수 있 습 니 다.Action RequestHandler 류 의 구현 코드 를 보면 BlockerList.json 파일 을 Safari 에 삽입 하 는 것 을 알 수 있 습 니 다.사실 이 json 파일 은 Content Blocker 의 핵심 입 니 다.이 파일 을 사용 하면 가장 간단 한 설정 방식 으로 콘 텐 츠 차단 을 실현 할 수 있 습 니 다.다음은 제 가 이 json 파일 의 작성 규칙 을 설명 하 겠 습 니 다.

그림 2 광고 차단기 구축(Content Blocker)프로젝트
BlockerList.json 파일 에 몇 줄 의 코드 가 자동 으로 생 성 되 었 습 니 다.코드 에는 하나의 action 과 하나의 trigger 가 포함 되 어 있 습 니 다.모든 action 과 trigger 의 조합 은 하나의 규칙 을 구성 합 니 다.

[[
 {
  "action": {
   "type": "block"
  },
  "trigger": {
   "url-filter": "webkit.org/images/icon-gold.png"
  }
 }
]]

1.action 은 이 규칙 이 사용 하 는 차단 방식 을 지정 합 니 다.type 은'block','block-cookies','css-display-none'으로 자원 파일(예 를 들 어 css 파일,js 파일,이미지 자원)을 차단 하고 cookies 를 차단 하 며 html 요소 css 의 display 속성 을 none 으로 설정 합 니 다.type 이 css-display-none 일 때 action 에"selector"의 키 값 을 추가 해 야 합 니 다.selector 는 css selector 입 니 다.html 요소 의 display 속성 을 none(즉 숨 김)으로 지정 해 야 합 니 다.물론 css selector 에 익숙 하지 않 으 면 빨리 공부 하 세 요.
2.trigger 는 이 규칙 에 적용 되 는 사이트 url 을 지정 합 니 다.정규 표현 식 을 사용 할 수 있 습 니 다.물론 가능 한 한 정확 한 표현 식 은 웹 브 라 우 저 효율 에 영향 을 주지 마 십시오.왜냐하면 Content Blocker 는 전체 브 라 우 저 와 모든 사이트 에 응용 되 기 때 문 입 니 다.
     이러한 것들 을 알 게 되 었 습 니 다.우 리 는 BlockList.json 의 의 미 를 이해 하기 어렵 지 않 습 니 다.type 은 block 입 니 다.이것 은 webkit.org/images/icon-gold.png 라 는 그림 의 불 러 오 는 것 을 막 고 있 음 을 나타 냅 니 다.물론 오늘 의 목 표 는 Google 검색 결과 의 광고 항목 을 차단 하 는 것 입 니 다.
     우선,action type 에 대한 선택 은 웹 페이지 내용 을 차단 하 는 것 이 분명 합 니 다.우리 가 선택 한 type 값 은 css-display-none 입 니 다.그 다음 에 우리 가 숨 길 html 요 소 를 가 져 옵 니 다.여기 서 우 리 는 Mac 판 Safari 의 웹 페이지 소스 분석 도 구 를 통 해 Mac 판 Safari 를 열 고 Develop menu 의 simulator 를 선택 한 다음 에 탐색 하고 있 는www.Google.com.hk페이지 를 선택 합 니 다.웹 Inspector 도 구 는 즉시 simulator 에서 Safari 가 탐색 하고 있 는 웹 페이지 소스 코드 를 진열 합 니 다.뭐?Develop menu 없어?Mac Safari preference 에서 advance 옵션 을 선택 하고 Show Develop menu in menu bar 옵션 을 선택 하면 됩 니 다.그 다음 에 우 리 는 광고 에 대응 하 는 div 와 이에 대응 하 는 id 를 쉽게 찾 았 다.

 그림 3 플러그 인 요소 설명도 가 져 오기
div 의 id 가 있 으 면 selector 속성 을 div\#taw 로 설정 하고 id 를 taw 의 div 로 지정 한 다음 trigger 의 url-filter 를 google.com.hk/로 설정 합 니 다.

[
 {
  "action": {
    "type": "css-display-none",
    "selector":"div#taw"
  },
  "trigger": {
   "url-filter": "google.com.hk/"
  }
 }
]

     감동적인 순간 이 왔 습 니 다.다음은 성 패 를 보 여 줍 니 다.프로젝트 를 실행 합 니 다.Content Blocker 의 target 을 선택 하지 마 세 요.그러면 제 이 슨 을 Safari 에 끼 워 넣 을 수 있 지만 사 활 은 무효 입 니 다.베타 버 전의 bug 일 수도 있 습 니 다.

그림 4 광고 차단 후 설명도 검색
     실행 중인 프로그램 이 공백 상태 입 니 다.다음 에 시스템 설정 인터페이스 에 가서 Safari->Content Blockers(콘 텐 츠 차단기)->플러그 인 을 엽 니 다(열 렸 다 면 끄 고 다시 엽 니 다).브 라 우 저 로 돌아 가 방금 Google 검색 페이지 를 새로 고침 합 니 다.광고 항목 이 없 으 며 Google 에서 어떤 내용 을 검색 하 더 라 도 앞 에 있 는 광 고 를 볼 수 없습니다.
이상 이 바로 본문의 전체 내용 이 니 여러분 이 좋아 하 시 기 를 바 랍 니 다.