* Will * CSS will go to ad ~
<!-- more -->
# Drawbacks of traditional methods of advertising to
us when browsing the web often can not help but see a variety of advertising content do not want to see, the easiest solution is to be solved by browser plug-ins, such as the famous AdBlock plug-ins and various domestic ad blocking assistant.
But the ability to intercept these plug-ins can be customized degree is not high, like AdBlock need to shield some of the DOM element via CSS selectors, encounter some special circumstances can not do anything by its definition of a set of grammatical rules.
Some important elements on a page, such as the event is bound, when clicked will jump to pages of ads, this time not a simple way to shield the DOM element to achieve.
# Simple and efficient way to customize
these cases we can use a powerful browser plug --Greasemonkey, referred to as GM, Chinese commonly known as "Grease Monkey", supports Firefox and Chrome browsers.
Grease Monkey is not specifically designed to plug to advertising, but rather a tool JavaScript code into the page implants, used to modify the page, or add some features, such as auto-fill forms, display network disk file download links.
Development is very simple, only need to correspond to the API function calls by js.
A few simple lines of code, you can remove most of the advertising page.
# Getting Started GM script
Grease Monkey is very simple to use, we write a js script, and then configure the corresponding URL.
So that when a browser to access the URL matches, Grease Monkey will load js script we wrote, running inside the code.
In short two steps.
1. configuration script. Configuration Items in about 20, here we introduce the most important of the three configuration items.
2. Write the script. Call the API functions provided by the plug, add a page or CSS style js code execution.
* @Include script matching URLs, support asterisk "*" to match any character. You can use repeatedly said match multiple URLs.
* API function @grant statement to be used.
* @ Run-at the time of execution of the script, there are five possible values, CSS style we choose to "document-start" loaded before the page rendering, and js script can select the "document-end" load after the page rendering is complete.
It should be noted that the configuration parameters are in to begin with `== UserScript ==`, `== / UserScript ==` at the end of the comment.
Complete examples are as follows:
```
// ==UserScript==
// @name XX广告过滤
// @version 0.1
// @icon https://www.xxx.com/favicon.ico
// @description try to take over the world!
// @author You
// @include http*://xx.com/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
```
Specific instructions can refer to the official document:
[https://www.tampermonkey.net/documentation.php?ext=dhdg&show=dhdg](https://www.tampermonkey.net/documentation.php?ext=dhdg&show=dhdg)
# 2 kinds of common scenarios and the corresponding operating
## Modify Style
This is the easiest way to block ads, as long as the rules configured on the line, can shield more than 80% of the advertising.
Taking a forum advertisement, the advertisement of this forum is mixed directly in the post, among them, a little below the word mark ads, landing on the points go.
And the middle posts mixed with irrelevant advertising, considerable influence experience.
This ad blocking is pretty simple, write a style rules, its `display` attribute set to` none` on the line.
```
.home-place-item {
display: none!important;
}
```
To avoid being covered, we can add `! Important` elevated privileges.
Most advertising can be masked by the above CSS selectors ** ** + display attribute manner. But some advertising deal would be more trouble.
Such as search engine advertising, we use some of the ways to "protection."
A search engine search for "ticket" can see the following advertising messages.
You can see the ad style element properties using the highest weight display, visibility two properties, so use the above hidden way is certainly valid.
You can only choose the other way, where we need to test the basic skills of css.
Let an element of hidden options?
The following is an implementation:
```
[cmatchid] {
height: 0;
overflow: hidden;
}
```
## prevent js file is loaded
还有一类广告并不是以静态元素的方式呈现，甚至你在页面上都看不到它，它只在你第一次点击某个功能的时候弹出来。
这种处理起来就相对麻烦，因为直接对元素进行修改可能会影响到正常功能使用。
但是这种广告的事件绑定一般都是单独写在某个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)