简单说如何做一个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：插件图标，需准备1616（扩展信息栏）、4848（扩展管理页面）、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的图片，尺寸分别是 1616 ，4848， 128*128

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

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

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

然后，继续按图中说的做

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

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

总结

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

推荐一本书，大家可以看看《chrome扩展及应用开发》

简单说如何做一个chrome 去广告插件相关推荐

电脑广告弹窗多？安利一下：程序员常用 7 款Chrome去广告插件
互联网时代,大家都习惯在电脑或手机上查阅信息.观看视频.遇到不知道的东西,百度一下:想看的电视剧,爱奇艺腾讯A站B站搜一下.整个操作十分简单,大到八九十岁的老人,小到几岁孩子,都能做到.然而,很多时候 ...
chrome去广告插件
http://bbs.pcbeta.com/viewthread-670389-1-1.html 一款可以让您对Chrome上的"任何网页"为所欲为的"神器" ...
推荐一个Chrome去广告的插件Adblock Plus
最近上网发现浏览器总弹出一些比较恶心的广告,于是下载了屏蔽广告的插件:Adblock Plus 这是Chrome应用商店里的一个插件免费插件,感觉效果很棒,装好后界面瞬间清爽很多,强烈推荐大家使用! ...
简单用java做一个图书管理系统
简单用java做一个图书管理系统首先,我们创建一个View类当做它的视图页 package view;import service.BookService; import service.UserS ...
如何为豆瓣FM写一个chrome的歌词插件
对于喜欢豆瓣FM的同学来说,没有歌词是件令人苦恼的事,下面我就来总结下怎样为豆瓣FM写一个chrome的歌词插件. --------------------------------- 1.需要的技能 ...
Mozilla Firefox,去广告插件
先安装火狐浏览器,在双击下面链接,安装去广告插件. Adblock Plus 1.3.2: Firefox 无法将文件安装至 https://addons.mozilla.org/firefox/do ...
去广告插件——火狐浏览器
火狐浏览器安装去广告插件,净化网络. 1.在火狐浏览器的菜单栏里面找到< 附加组件 >点击并打开: 2.在搜索框里面输入< Adblock Plus >,并按下回车: 3.点击 ...
谷歌去广告插件adblock安装方法
谷歌去广告插件adblock安装方法 crx后缀的文件直接拉到谷歌开发者模式下界面,如果crx后缀无法安装
Chrome实用去广告插件 Adblock Plus For Mac/Win 下载及使用
AdBlock Mac/Win版是一款非常著名的广告屏蔽插件,在Chrome中安装了AdBlock插件以后,几乎可以屏蔽整个互联网上的广告,当然这也给一些小型网站的生存带来一定危机(包括Chrome插 ...

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

说明

解释

总结

简单说如何做一个chrome 去广告插件相关推荐

最新文章

热门文章

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

说明

解释

总结

简单说 如何做一个chrome 去广告插件相关推荐

最新文章

热门文章

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

简单说如何做一个chrome 去广告插件相关推荐