* * CSS 광고로 이동합니다 것입니다 ~
<! - 더 ->
에 광고의 전통적인 방법의 # 단점
우리에게 도움이되지만 광고 콘텐츠의 다양성을 볼 수 없습니다 종종 웹 브라우징보고 싶지 않아, 가장 쉬운 솔루션은 유명한 AdBlock을 플러그인 및 다양한 국내 광고 차단과 같은 브라우저 플러그인에 의해 해결 될 것입니다 조수.
그러나 이러한 플러그인을 차단하는 기능 AdBlock을가, CSS 선택기를 통해 DOM 요소의 일부를 보호하기 위해 필요한 문법 규칙의 집합의 정의에 의해 아무것도 할 수없는 특별한 상황 발생과 같은 정도가 높지 않은 사용자 정의 할 수 있습니다.
광고 페이지로 이동합니다 클릭 할 때와 같은 이벤트와 페이지에 몇 가지 중요한 요소는,이 시간이 아니다 달성하기 위해 DOM 요소를 보호하는 간단한 방법, 바인딩됩니다.
사용자 정의 할 수 # 간단하고 효율적인 방법
우리는 강력한 브라우저가 --Greasemonkey를 연결 사용할 수 있습니다 이러한 경우는 일반적으로 "그리스 원숭이"로 알려진 GM, 중국어로, 파이어 폭스와 크롬 브라우저를 지원 언급.
그리스 몽키는 특히 광고에 연결하도록 설계하지만, 페이지를 수정하거나 같은 일부 기능을 추가하는 데 사용되는 페이지 임플란트에 오히려 도구 자바 스크립트 코드 형태의 디스플레이 네트워크 디스크 파일 다운로드 링크를 자동 채우기되지 않습니다.
개발은 매우 간단 만 JS로 API 함수 호출에 해당해야합니다.
코드의 몇 가지 간단한 라인, 당신은 광고 페이지의 대부분을 제거 할 수 있습니다.
# 시작하기 GM 스크립트
그리스 몽키는 우리가 JS 스크립트를 작성하고 해당 URL을 구성, 사용이 매우 간단합니다.
브라우저가 URL 일치에 액세스 할 때, 그리스 원숭이의 js 스크립트를로드 할 수 있도록 우리는 코드 내에서 실행 썼다.
짧은 두 단계에서.
1. 구성 스크립트. 약 20의 구성 항목, 우리가 세 가지 구성 항목의 가장 중요한을 소개합니다.
2. 스크립트를 작성합니다. 플러그가 제공하는 API 함수를 호출 페이지 나 CSS 스타일 JS 코드 실행을 추가합니다.
* @include 스크립트 일치하는 URL은 지원 별표 "*"는 모든 문자와 일치합니다. 당신은 반복적으로 말했다 일치하는 여러 URL을 사용할 수 있습니다.
* API 기능 @grant 문을 사용합니다.
* @ 런타임에 스크립트의 실행시, 다섯 개 가지 값은 CSS 스타일은 우리가 페이지 렌더링 전에로드 "문서 시작", 페이지 렌더링이 완료된 후 "문서 엔드"부하를 선택할 수 있습니다 JS 스크립트에 선택이있다.
그것은 구성 매개 변수,`== UserScript == '로 시작하기에 있음을 주목해야한다`== / UserScript ==`주석의 끝에서.
다음과 같이 완전한 예는 다음과 같습니다
```
// == UserScript ==
// @name XX广告过滤
// @version 0.1
// @icon https://www.xxx.com/favicon.ico
// 세계를 정복하려고 @description!
// @author 당신
// @include HTTP * : //xx.com/*
// @grant GM_addStyle
// @ 실행-에서 문서를 시작
// == / UserScript ==
```
구체적인 지침은 공식 문서를 참조 할 수 있습니다 :
[https://www.tampermonkey.net/documentation.php?ext=dhdg&show=dhdg](https://www.tampermonkey.net/documentation.php?ext=dhdg&show=dhdg)
# 2 일반적인 시나리오의 종류 및 해당 운영
## 스타일 수정
이 라인에 구성된 규칙, 광고의 80 % 이상을 보호 할 수만큼 광고를 차단하는 가장 쉬운 방법입니다.
포럼 광고 촬영,이 포럼의 광고는 이동 지점에 착륙, 단어 표시 광고 아래 약간, 그 (것)들의 사이에서, 포스트에 직접 혼합한다.
그리고 중간 포스트는 관련이없는 광고, 상당한 영향력 경험과 혼합.
이 광고 차단은 스타일 규칙, 라인에 none` to` 설정된`display` 속성 쓰기, 아주 간단합니다.
```
.home 장소 항목 {
디스플레이 :! 없음 중요한;
}
```
적용되지 않도록하기 위해, 우리는`추가 할 수 있습니다! Important`는 권한을 상승.
대부분의 광고는 위의 CSS 선택기 ** ** + 표시 속성 방식에 의해 마스크 될 수있다. 그러나 일부 광고 계약이 더 문제가 될 것입니다.
이러한 검색 엔진 광고로, 우리는에있는 몇 가지 방법을 사용하여 "보호."
"티켓"에 대한 검색 엔진의 검색은 다음과 같은 광고 메시지를 볼 수 있습니다.
당신은 가장 높은 체중 디스플레이, 가시성이 속성을 사용하여 광고 스타일 요소 속성을 볼 수 있으므로 위의 숨겨진 방법은 확실히 유효 사용할 수 있습니다.
우리는 CSS의 기본 실력을 테스트하기 위해 필요로하는 곳에 당신은, 다른 방법을 선택할 수 있습니다.
숨겨진 옵션의 요소를 보자?
다음은 구현입니다 :
``
[cmatchid {
높이 : 0;
오버 플로우 : 숨겨진;
}
```
JS 파일을 방지 ##은로드입니다
还有一类广告并不是以静态元素的方式呈现，甚至你在页面上都看不到它，它只在你第一次点击某个功能的时候弹出来。
这种处理起来就相对麻烦，因为直接对元素进行修改可能会影响到正常功能使用。
但是这种广告的事件绑定一般都是单独写在某个js文件中的，细心查找，然后阻止对应的js文件加载就可以从根本上解决问题。
浏览器其实为插件提供了API用来阻止资源加载，但是油猴却没有主动提供。
后来在issue中找到了一个隐藏API来实现这个功能。
以阻止 `https://xx.com` 下的文件为例，可以在脚本开头引用`webRequest`功能：
```
// @webRequest [{"selector":"https://xx.com/*","action":"cancel"}]
```
# 更多
只要你懂web前端，只要你肯动手，你的网页都可以变成你想象的样子。
装上插件，去自定义你的页面吧！
示例脚本地址：
[https://github.com/yalishizhude/block-ad-scripts](https://github.com/yalishizhude/block-ad-scripts)