*ウィル* CSSは、広告に行きます〜
<！ - 以上 - >
広告の伝統的な方法の＃欠点
たちを助けるが、広告コンテンツの多様性を見ることができないことが多いWebブラウジング表示したくない、最も簡単な解決策は、このような有名なAdBlockをプラグインして、様々な国内の広告ブロックとして、ブラウザプラグインによって解決されます助手。
しかし、これらのプラグインを迎撃する能力はAdBlockをは、CSSセレクタを経由してDOM要素の一部を遮蔽するために必要な文法規則のセットのその定義では何もできない、いくつかの特別な状況に遭遇したよう度合いが、高くないカスタマイズすることができます。
広告のページにジャンプしますクリックしたときにそのようなイベントなど、ページ上のいくつかの重要な要素は、この時期ではない達成するためのDOM要素を保護するための簡単な方法、バインドされています。
カスタマイズする＃シンプルかつ効率的な方法
我々は強力なブラウザプラグイン--Greasemonkeyを使用することができ、これらの例を、一般に「グリースモンキー」として知られているGM、中国と呼ばれ、FirefoxとChromeブラウザではサポートしています。
グリースモンキーは、特に広告に差し込むように設計されたのではなく、ツールのJavaScriptコードのこのような形態、ディスプレイネットワークディスクファイルのダウンロードリンクを自動入力としてページを変更、またはいくつかの機能を追加するために使用するページインプラント、にされていません。
開発は非常に簡単で、唯一のJSでAPI関数呼び出しに対応する必要があります。
コードのいくつかのシンプルなライン、あなたは、広告ページの大部分を除去することができます。
＃GMスクリプト入門
グリースモンキーは、我々はJSスクリプトを書き、その後、対応するURLを設定し、使用することは非常に簡単です。
ブラウザはURLのマッチにアクセスする際、グリースモンキーはjsのスクリプトをロードするように、我々は、コード内で実行されている、書きました。
短い二つのステップで。
1.設定スクリプト。約20で構成項目は、ここでは3つの構成項目の中で最も重要なを紹介します。
2.スクリプトを作成します。プラグが提供するAPI関数を呼び出して、ページまたはCSSスタイルjsのコードの実行を追加します。
* @includeスクリプト一致するURLは、サポートアスタリスク「*」は、任意の文字に一致します。あなたは、繰り返し使用することができ、複数のURLと一致しました。
* API関数@grant文が使用されます。
* @実行時にスクリプトを実行する際、5つの可能な値は、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セレクタ** ** +表示属性のようにしてマスクすることができます。しかし、いくつかの広告契約は、多くの問題になります。
このような検索エンジン広告として、我々はにいくつかの方法を使用し、「保護。」
「チケット」の検索エンジンの検索では、次の広告メッセージを見ることができます。
あなたは最高の重量表示、可視2つのプロパティを使用して広告スタイル要素のプロパティを参照してくださいので、上記の隠された道は確かに有効で使用することができます。
あなただけの私たちは、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)