Write a chrome plugin that blocks Baidu search ads

Work and life are more than Baidu, after all, it is so far the best domestic PC search engine. Although I have almost become an eye filter advertising eyesight, but always feel an eyesore, feel or write a plugin to block it. This plug-in development of the threshold is actually very low, just do not know where to check the plug-in development of data just toss a half day.

First, find a Baidu page out analysis.

1, the promotion link has three kinds: the upper has no background, the upper has the base color and the bottom has the undertone; usually the advertisement at the beginning of the upper part has no background, and after several times it will become a background color;

2, look at the CSS can see, the main search results and ads are in an ID content_left div container (see the upper left red box); Each search result is a div, and the ad's di will go from 3000 onwards, And the normal search results of the ID is starting from 1, and the lower part of the promotion ID of the background is clone, it seems that the ID is not very good to identify ads, and then look at class, each ad's div will have a few random name of the class, and normal search results have C-container such a class, this should be a good breakthrough;

3, then think about the shielding method, a scheme is JS, a scheme is CSS. If it is JS, the page does not load completely before the ad will still show a certain amount of time, but also to deal with the Point Search button Ajax page does not refresh the screen and possibly other situations, it is a bit cumbersome and the main use of the experience is not good enough. Another scenario Css,css rendering speed quickly, then see what can be used CSS, Baidu page in order to prevent ads are hidden itself has set up two !important level of inline CSS(the highest priority).

CSS Properties	Pros and Cons analysis	Page itself CSS	Results
Display:none;	The most direct and ideal hiding	Display:block!important;	X doesn't work.
Visibility:hidden;	is also very ideal.	Visibility:visible!important;	X doesn't work.
opacity:0;	Invisible but the placeholder is still there, and you can click		乄 not ideal
Transform:rotatex (90DEG);	Invisible but placeholder still, not clickable		乄 is fine.
height:0; Overflow:hidden;	There's no place to be seen.		Yes, it is.

Take down the webpage and test

Ctrl+s save a single page to local and open it directly in the browser. Then edit the page code with notepad++ and insert the following code

<style>#Content_left>div:not (. C-container) {    0;    Overflow:hidden;} </style>

Sure enough to block, but there are some gaps, the original is each ad and 20px of Margin-bottom, plus a set of 0 is good.

Third, packaged as a plug-in

In the degree Niang and blog Park to find a few write chrome plug-in, but still see foggy, make all kinds of error, after all, the first time, and Chrome plug-in Official document webpage actually can't open (Fq also can't open). Toss an afternoon can not make, night in some see said a digital company browser plug-in development document, finally is understood, 32 under. A total of two code files, an icon file (not required). Put the code on the line to see it all:

Manifest.json

{    "manifest_version": 2,    "name": "Clear BD",    "description": "Baidu Search No AD ",    " version ":" 1.0 ",    " icons ": {" $ ":" Icon.png "},    " Permissions "  :        ["*://www.baidu.com/*"    ],    "content_scripts": [{        "matches": ["* ://www.baidu.com/* "],        " css ": [" Noad.css "]    }]}

Noad.css

{    height: 0;     Overflow: hidden;     margin-bottom: 0;}  {    height: auto;  /*    Overflow:auto    ; Margin-bottom:auto; */}

Benefits →_→ Plug-in installation package download (after decompression for the *.CRX format, the same applies to all the chrome core of the domestic browser, not for Firefox, the installation method of self-Niang)

Write a chrome plugin that blocks Baidu search ads