Clear page ads? As a front end, make a simple chrome extension yourself

We must have such an experience, when browsing the web, the two ends of the ads, such as "Dragon Blades, click on the Send", as well as the recent fire of the Woods Cong 37 legendary br What "BR mask, br pendant" The magic of the ads are always flooded our eyeballs.

Of course there are ready-made plug-ins to clear the page ads, but since being a program ape, especially Feder, why not try to write a clear ad plugin. In fact, writing a browser plug-in is very simple, especially the chrome plugin, you can completely use the front-end technology (HTML/CSS/JS) to complete a self-written plug-in. Let's take a step-by-step study on how to write a simple plugin to clear ads, say goodbye with annoying page ads.

Chrome Plugin Introduction

The first thing to make clear is that it's not difficult to write a chrome extension, and it's easy to get started, so you don't have to think the threshold is particularly high.

An application (extension) is actually a set of files that are compressed together, including html,css,javascript scripts, picture files, and any other required files. Apps (extensions) are essentially web pages that can use all the browser-provided APIs, from XMLHttpRequest to JSON to HTML5.

Actually understand this point, then our purpose is very clear, to do a clear page ads plug-in, the core is to write a script file, injected into the page we visit, by matching the elements of the DOM node of the ad, kill it to clear.

To create an extended directory:

Each plug-in extension should contain the following files:

• A manifest file
• One or more HTML files
• One or more JavaScript files that are optional
• Optional any other files needed, example slices
• Plugin icons icon ...

Manifest.json:

The first file that our extension directory needs to create is a manifest file that contains basic information about the application (extension), such as the extension name, the version number, and the most important file list, the permissions required to apply (extend), and so on. At a higher level, we'll use it to declare to Chrome what the Extender will do, and the permissions needed to accomplish these tasks:

{ "Name": "Clear Page Ads", "Version": "2.0", "Manifest_version": 2, "description": "Easy-to-create chrome plugin for clear page ads", "Permissions": [ "Http://*/" ], "Icons": { "+": "Icon-16-coco.png", "$": "Icon-128-coco.png" }, "Browser_action": { "Default_icon": "Icon-16-coco.png", "Default_popup": "Popup.html" }, "Content_scripts": [{ "Matches": ["http://*/", "https://*/", "http://*/*", "https://*/*"], "JS": ["Js/jquery-1.10.1.min.js", "Js/my-del-ad-script.js"]    }]}

Next, save the data in a file named, put it in themanifest.jsondirectory you created, or copy the entire project from my GitHub as an example.

Icon and Popup page:

In Manifest.json, there is a key named Browser_action, where "Default_icon" and "Default_popup" refer to the icon that the extension will display and the Popup.html page. If the extension is configured and installed successfully, the content in the popup.html file will be displayed in the Default_popup area of the diagram as shown in.

Content_srcipts:

Popup.html is a very useful page in the extension that can interact with the user, but not the protagonist in the clear page ad. The above said to inject script files into the page, mainly by content_scripts,content scripts is a JavaScript script that runs within the Web page. By using the standard DOM, they can get detailed information about the pages that the browser accesses and can modify the information.

Here are some examples of what content scipt can do:

• Match the DOM nodes in the page and modify their styles
• Enlarge page font to make text clearer
• Find URLs that are not written as hyperlinks from the page and turn them into hyperlinks.
• ... (all you can think of)

Manifest.json in the content_scripts, there is a "JS" key, the extension will be to all matching pages, sequentially injected into the "JS" in the definition of the page, in this plug-in, is injected in turn "Js/jquery-1.10.1.min.js" , "Js/my-del-ad-script.js" two files, where my-del-ad-script.js is the code where we want to clear the page ad.

After you have read the above steps, the next job is to write a simple script that matches the DOM node of the ad element in the page and then clears it (using the JQ. Hide ()).

Writing scripts

Now all we have to do is analyze the DOM node style of the ad element in the page.

Take a look at the following pictures:

Through observation, the page ad is either a particularly high frequency of similar ads (on both sides of the page travel promotion), the other is through the iframe embedded in the page image. The first type of ad usually has the same id attribute, which is basically the ID: #cproIframe2001 ~ #cproIframe2008. The second type of ad is matched by selectors and can be easily located, such as one of $ (' div iframe '). FIND (' img ').

In this way, we find the DOM node that is targeted to these ads, how to clear it? In fact it is very simple, I am directly display:none it to hide it. Clear clear, do not have to delete the node, the eye will be gone.

(many friends suggest that dropping the node directly can improve performance.) ）

Look at the simple JS code (this piece of code in My-del-ad-script.js):

varClearad ={clear:function() { //Here you can manually add the ad box ID name to remove the stubborn ad prerequisites varAd_id_name = [ "Cproiframe2001holder",            ... "Cproiframe2008holder",        ]; //Add AD box class name here varAd_css_name = [ "Cproiframe_u410704_3",            ..., "Hover_btn" ];  for(vari = 0; i < ad_id_name.length; i++) {            $(' # ' +ad_id_name[i]). Hide (); }  for(vari = 0; i < ad_css_name.length; i++) {            $('. ' +ad_css_name[i]). Hide (); }    }, //Simple and intelligent algorithmFindsomeadpossible:function() { varSAP = $ (' div iframe '), Ad_img= $ (' div script '). Parent (). Find (' img,embed '), Float_img= $ (' div object '). Parent (). Find (' img,embed ');  This. Arraydel (SAP,200);  This. Arraydel (Ad_img, 350, 150);  This. Arraydel (Float_img, 350, 150); }, Arraydel:function(arr, conwidth, conheight) {varLen =arr.length;  for(vari = 0; i < Len; i++) { varSelf =Arr.eq (i); if(Self.width () <= conwidth | | self.height () <=conheight)            {self.hide (); }}}, init:function() {  This. Clear ();  This. findsomeadpossible (); }}

Of course, here is just a simple example of how to find an ad and clear it, the algorithm is very simple and not rigorous (do not spray), and there is a chance of manslaughter "benign page". Friends who are interested can rewrite their own.

In this way, a simple removal of the ad plugin is written, as long as the extension of the normal installation, the script will be injected into all matching pages and play a role, to see the effect:

Before and after opening the extension:

If you want to see if the injected script file is working correctly, I wrote a console, opened the console, and saw that clear start is a script that works.

As you can see, the ads are all erased, but some useful elements may have been killed, and the JS code can be improved more precisely.

More precise cleanup and more features with extensions, try it out.

Install Chrome Extensions

1. Access in your browserchrome://extensions(or click the button at the far right of the multifunction box: Open the Chrome browser menu and select Extensions (E)under the more tools (L) menu to go to the same page).
2. Make sure that the developer mode check box is selected in the upper right corner. Ensure that the Developer mode checkbox on the top right-hand corner is checked.
3. Click Load the extension you are developing..., and the File selection dialog box pops up.
4. Browse to the directory where your extension files are located and select.

You can also drag and drop the directory where the extender file resides to the browser tochrome://extensionsload it. If the extension is valid, it will be loaded and immediately active! If not, an error message appears at the top of the page, please correct the error and try again.

Postscript:

This article is just a very simple introduction to the chrome extension, just the tip of the chrome extension, using the Chrome extension to achieve more features you can't imagine, more details or complete API, click here.

The full plugin extension code for this example is available for download on my github.

Clear page ads? As a front end, make a simple chrome extension yourself