简单说 如何做一个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