清除页面广告？身为前端，本身作一款简易的chrome扩展吧

你们确定有这样的经历，浏览网页的时候，左右两端广告，诸如“屠龙宝刀，点击就送”，以及最近火的不行的林子聪37传奇霸业什么“霸业面具，霸业吊坠”的魔性广告老是充斥咱们的眼球。

固然有现成的扩展程序或者插件（二者概念稍有不一样）能够清除页面广告，可是既然身为一名程序猿，尤为是FEDer，为何不尝试一下本身写一个清除广告的扩展程序呢。其实，编写一个浏览器扩展程序十分简单，尤为是chrome扩展，能够彻底使用前端技术（HTML/CSS/JS）完成一个本身编写的扩展程序。让咱们一步一步，学习一下如何编写一个简单的清除广告的扩展程序，跟烦人的页面广告say goodbye。

 

   Chrome扩展程序介绍　　　　

首先，想明确的一点是，编写一个chrome扩展扩展程序并不难，入手也十分容易，你们不用以为门槛特别高。

一个应用（扩展）实际上是压缩在一块儿的一组文件，包括HTML，CSS，Javascript脚本，图片文件，还有其它任何须要的文件。 应用（扩展）本质上来讲就是web页面，它们可使用全部的浏览器提供的API，从XMLHttpRequest到JSON到HTML5全都有。

其实明白了这一点，那么咱们的目的就很明确了，要作一个清除页面广告的扩展程序，核心就是编写一个脚本文件，注入到咱们访问的页面中，经过匹配广告元素的DOM节点，将其干掉清除。

 

创建扩展目录：

每一个扩展（extension）都应该包含下面的文件：

• 一个manifest文件

• 一个或多个html文件

• 可选的一个或多个javascript文件

• 可选的任何须要的其余文件，例如图片

• 扩展程序图标icon...

 

manifest.json:

咱们的扩展目录须要建立的第一个文件是一个清单文件，包含了应用（扩展）的基本信息，如扩展名称、版本号，及最重要的文件列表，应用（扩展）所须要的权限等。从更高的层次来看，咱们将使用它来向 Chrome 浏览器声明扩展程序将会作什么，以及为了完成这些任务所须要的权限：

{
    "name": "清除页面广告",
    "version": "2.0",
    "manifest_version": 2,
    "description": "简易制做的清除页面广告的chrome扩展程序",
    "permissions": [
        "http://*/"
    ],
    "icons": {
        "16": "icon-16-coco.png",
        "128": "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"]
    }]
}

接下来，将这一数据保存在名为 manifest.json 的文件中，放在您建立的目录中，或者 从个人github上拷贝整个项目用做示例。

 

图标与弹出页面：

在manifest.json中，有个名为browser_action的key，其中"default_icon"和"default_popup"指的是扩展将显示的图标以及popup.html页面。若是扩展配置及安装成功，就会以下图所示，其中在popup.html文件中的内容将显示在图中default_popup区域中。

content_srcipts:

popup.html是扩展当中很是有用页面，能够与使用者进行一个交互，不过在清除页面广告中并不是主角。上面说的要向页面当中注入脚本文件，主要就是靠content_scripts，Content scripts是在Web页面内运行的javascript脚本。经过使用标准的DOM，它们能够获取浏览器所访问页面的详细信息，并能够修改这些信息。

下面是content scipt能够作的一些事情范例：

• 匹配页面中的DOM结点，并修改他们的样式
• 放大页面字体使文字更清晰
• 从页面中找到没有写成超连接形式的url，并将它们转成超连接。
• .......（全部你能想到的）

manifest.json中的content_scripts，有个"js"的key，扩展将会向全部匹配的页面，依次注入在"js"当中定义的页面，在本扩展程序中，就是依次注入了"js/jquery-1.10.1.min.js", "js/my-del-ad-script.js"两个文件，其中my-del-ad-script.js就是咱们要清除页面广告的代码所在。

当上面的步骤你都看懂以后，后面的工做就是，编写简单的脚本，匹配页面当中的广告元素的DOM节点，而后将其清除（简单的利用JQ的.hide()）。

 

编写 chrome 拓展脚本

如今，咱们要作的就是分析一下页面当中，广告元素的DOM节点样式。

看看下面几张图：

 

 

经过观察发现，页面广告要不就是出现频率特别高的同类广告（两侧的页游推广），另外一类是经过iframe内嵌到页面中的图片。第一类广告一般都拥有相同的ID属性，基本上是 id:#cproIframe2001~#cproIframe2008。而第二类广告经过选择器匹配，也能很是容易的定位到，譬如其中一种为$('div iframe').find('img')。

这样，咱们就算是找到了定位到了这些广告的DOM节点，如何清除呢？其实很简单，我是直接将其display:none将其隐藏。清除清除，不必定要删除节点，眼不见就能够了。

（不少园友提议直接remove掉节点能更好提高性能。）

看看简单的JS代码（此段代码在my-del-ad-script.js中）：

var clearAd = {
    clear: function() {
        //此处可手动添加广告框id名，去除顽疾ad必备
        var ad_id_name = [
            "cproIframe2001holder",
            ...
            "cproIframe2008holder",
        ];

        //此处添加广告框类名
        var ad_css_name = [
            "cproIframe_u410704_3",
            ...,
            "hover_btn"
        ];

        for (var i = 0; i < ad_id_name.length; i++) {
            $('#' + ad_id_name[i]).hide();
        }

        for (var i = 0; i < ad_css_name.length; i++) {
            $('.' + ad_css_name[i]).hide();
        }
    },
    //简单的智能算法
    findSomeAdPossible: function() {
        var sap = $('div iframe'),
            ad_img = $('div script').parent().find('img,embed'),
            float_img = $('div object').parent().find('img,embed');

        this.arrayDel(sap, 360, 200);
        this.arrayDel(ad_img, 350, 150);
        this.arrayDel(float_img, 350, 150);
    },
    arrayDel: function(arr, conWidth, conHeight) {
        var len = arr.length;

        for (var i = 0; i < len; i++) {
            var self = arr.eq(i);

            if (self.width() <= conWidth || self.height() <= conHeight) {
                self.hide();
            }

        }
    },
    init: function() {
        this.clear();
        this.findSomeAdPossible();
    }
}

固然，这里只是简单是示例如何找到广告并清除之，算法很是简单并不严谨（勿喷），并且会有概率误杀”良性页面“。有兴趣的朋友能够自行改写。

这样，一个简单的清除广告的扩展程序就编写好了，只要扩展正常安装，脚本将会被注入到全部匹配到的页面当中并发挥做用，看一下效果：

开启扩展先后：

     

若是想查看注入的脚本文件是否正常运行，我写了一句console，打开控制台查看，看到Clear Start则是脚本正常运行。

能够看到，广告所有被清除，可是可能误杀了一些有用的元素，JS代码能够更加精确改进。

更加精确的清除以及利用扩展实现更多的功能，赶忙动手试一下。

 

   如何安装 Chrome 扩展

• 在您的浏览器中访问 chrome://extensions（或者单击多功能框最右边的按钮：打开 Chrome 浏览器菜单，并选择更多工具(L)菜单下的扩展程序(E)，进入相同的页面）。

• 确保右上角开发者模式复选框已选中。(Ensure that the Developer mode checkbox in the top right-hand corner is checked)

• 单击加载正在开发的扩展程序…，弹出文件选择对话框。

• 浏览至您的扩展程序文件所在的目录，并选定。

您也能够将扩展程序文件所在的目录拖放到浏览器中的 chrome://extensions 上加载它。若是扩展程序有效的话，它将被加载而且马上处于活动状态！若是无效的话，页面顶部将显示错误消息，请纠正错误再重试。

 

后记：

感谢有读者提出指正 谷歌扩展程序 与 插件 的异同。

"扩展"和"插件"，其实都是软件组件的一种形式，Chrome 只不过是把两种类型的组件分别给与了专有名称，一个叫"扩展"，另外一个叫"插件"。

• 扩展（Extension），指的是经过调用 Chrome 提供的 Chrome API 来扩展浏览器功能的一种组件，工做在浏览器层面，使用 HTML + Javascript 语言开发。好比著名的 Adblock plus。
• 插件（Plug-in），指的是经过调用 Webkit 内核 NPAPI 来扩展内核功能的一种组件，工做在内核层面，理论上能够用任何一种生成本地二进制程序的语言开发，好比 C/C++、Delphi 等。好比Flash player 插件，就属于这种类型。通常在网页中用 <object> 或者 <embed> 标签声明的部分，就要靠插件来渲染。

 

本文只是很是简单的介绍了chrome扩展，只是chrome扩展的冰山一角，使用chrome扩展能够实现更多你想象不到的功能，更多详情或者完整的API，请点击这里。

本文实例的完整的扩展（extension）代码在个人github上能够下载。

原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。