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

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

说明

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

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

解释

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

页面上的广告就是这个 class 为 -ad 的元素，我们直接让它 display: none; 就可以了。

我们做的插件，就是每次都找到这个元素，然后隐藏它，就行了。

好的，开始做插件吧！

1、首先 新建一个文件夹简单说 如何做一个chrome 去广告插件，就叫 CSDN，这个名字随便起。

2、然后 在 CSDN 文件夹中建一个json文件 叫 ，这是chrome插件的清单文件，包含了插件的相关信息，这个名字是固定的，别改。

3、然后 在CSDN文件夹下再新建一个img文件夹，用来放插件的图标。

4、在CSDN文件夹下还需要一个 js文件，用来隐藏页面的广告 就叫csdn.js 吧。

.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 ： 插件名称

：清单文件格式的版本，在之后，都是2

version ：插件的版本号

：插件描述

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

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

：指定将哪些脚本何时注入到哪些页面中，数组类型。

中的 matches 属性定义了哪些页面会被注入脚本。如果需要所有页面都注入，就写成"matches": "",

中的 js属性定义要注入的

csdn.js 文件内容

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

这段是将所有带有.-ad class 的广告元素，都隐藏。

如果有的广告没有这个class谷歌浏览器弹出广告， 那就不能隐藏了，想隐藏，就复制一下，改下class吧！哈哈

img 文件夹 下有 三张 png的图片，尺寸分别是 1616 ，4848谷歌浏览器弹出广告， 128*128

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

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

【本文来源于互联网转载，如侵犯您的权益或不适传播，请邮件通知我们删除】