简单说 如何做一个chrome 去广告插件

说明

Chrome插件又称为谷歌浏览器插件,是谷歌Chrome浏览器的扩展插件,使用Chrome插件可以为Chrome浏览器带来一些功能性的扩展,进而提高Chrome的使用体验。

这次我们先来简单接触一下，了解一点入门知识，先做一个简单的demo，就先去除一下CSDN网页上的广告。

解释

这次做的这个插件真的很简单，不涉及什么加密解密，也不是去拦截特定的网络请求，就是用CSS的 display: none; 就可以了。

页面上的广告就是这个 class 为 tracking-ad 的元素，我们直接让它 display: none; 就可以了。 我们做的插件，就是每次都找到这个元素，然后隐藏它，就行了。

好的，开始做插件吧！ 1、首先 新建一个文件夹，就叫 CSDN，这个名字随便起。 2、然后 在 CSDN 文件夹中建一个json文件 叫 manifest，这是chrome插件的清单文件，包含了插件的相关信息，这个名字是固定的，别改。 3、然后 在CSDN文件夹下再新建一个img文件夹，用来放插件的图标。 4、在CSDN文件夹下还需要一个 js文件，用来隐藏页面的广告 就叫csdn.js 吧。

manifest.json 文件内容

{
    "name": "CSDN去广告插件",
    "manifest_version": 2,
    "version": "1.0",
    "description": "CSDN去广告插件",

    "browser_action":
    {
        "default_icon": "img/icon16.png",
        "default_title": "CSDN去广告插件"
    },

    "icons":{
        "16": "img/icon16.png",
        "48": "img/icon48.png",
        "128": "img/icon128.png"
    },

    "content_scripts": [
    {
        "matches": ["*://blog.csdn.net/*"],
        "js": ["csdn.js"]
    }]
}

name ： 插件名称 manifest_version ：清单文件格式的版本，在Chrome18之后，都是2 version ：插件的版本号 description：插件描述

browser_action：设置扩展信息栏的图标、图标悬浮提示、点击图标时弹出窗口，我这里设置了设置的是默认图标（default_icon）和默认标题（default_title）

icons：插件图标，需准备16*16（扩展信息栏）、48*48（扩展管理页面）、128*128（用在安装过程中）像素的三个图标文件，建议为PNG格式

content_scripts：指定将哪些脚本何时注入到哪些页面中，数组类型。 content_scripts 中的 matches 属性定义了哪些页面会被注入脚本。如果需要所有页面都注入，就写成"matches": "<all_urls>", content_scripts 中的 js属性定义要注入的 JavaScript

csdn.js 文件内容

var ad = document.querySelectorAll('.tracking-ad');
ad = Array.from(ad);
ad.filter(function (value){
   value.style.display = 'none';
});

这段是将所有带有.tracking-ad class 的广告元素，都隐藏。 如果有的广告没有这个class ， 那就不能隐藏了，想隐藏，就复制一下，改下class吧！哈哈

img 文件夹 下有 三张 png的图片，尺寸分别是 16*16 ，48*48， 128*128

好的下来我们就用用 我们做的插件吧！

首先，打开chrome 浏览器，点击右上角的东西，不一定是像图中的三个 · 一样的东西，总之点击最右上角，出现一个弹框就行。

选择更多工具，点击 扩展程序

然后，继续按图中说的做

安装之后我们就能在扩展程序中看见，我们做的插件了。

然后当我们进入CSDN 网站， class 为 tracking-ad 的元素 就会隐藏起来了。

总结

这篇文章很简单，希望大家都能看懂。 在这里下载，这次的demo http://pan.baidu.com/s/1geYjvjH

推荐一本书，大家可以看看 《chrome扩展及应用开发》 https://pan.baidu.com/s/1dzQrBg