专栏首页FEWY简单说 如何做一个chrome 去广告插件

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实用工具 | 推荐 9 个好用的 Chrome 插件

    不知道大家注意到没有,有百度搜索的时候,右侧会有一列与关键词无关的热点新闻引导大家去点击分散大家的注意力。而上面说到的这个插件就可以屏蔽右侧推广,还你们一个干净...

    夜尽天明
  • 实用工具 | 推荐 9 个好用的 Chrome 插件

    最近更新比较佛系,一方面,工作确实有点忙,但是做的都是旧项目。09 年的代码都出来了,贼特么恶心。感觉待不久了。另一方面,没想好最近有啥要跟大家分享。刚好今天打...

    一个优秀的废人
  • 清除页面广告?身为前端,自己做一款简易的chrome扩展吧

    Sb_Coco
  • 为什么Chrome这么好用,还是插件多

    开始接触Chrome的时候,没发现Chrome和其它浏览器有什么不同的。就是界面看起来不IE清爽许多,用到后面发现Chrome实在太好用了。

    ZackSock
  • 无形中提高你工作效率的chrome插件

    FeHelper简直就是前端开发人员的神器,它是由国人开发的一款前端工具集合的小插件,插件功能齐全,基本上涵盖了前端从业者经常会使用到的基础功能,使用起来也很顺...

    coder_koala
  • 使你的Chrome使用的更加便捷

    对于普通人来说,Chrome是一个不常见的浏览器,但是对于程序猿一族而言,Chrome简直就是开发项目的神器,但是大家都知道,目前由于种种原因,在咱们天朝暂时是...

    Meng小羽
  • 强烈推荐 10 款珍藏的 Chrome 浏览器插件

    Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠;但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具。那段...

    沉默王二
  • 《Smallpdf》简单好用的线上PDF工具

    smallpdf.com, 官方推出了Chrome插件,插件列出了常用的6个功能,点击即可进入相应页面

    zhaoolee
  • 程序员必知的Chrome浏览器灵魂插件

    优势之一在于流畅度,其二就是兼容性很强,这也是它最大的优势:支持众多强大好用的拓展程序(Extensions)。

    老九君
  • Chrome 百度搜索热点过滤插件 - 开源软件

    学习时,为了搜集最全的中文资料,有时候不得不使用Baidu搜索引擎。在你还是个小菜鸡的时候你可能会花费大量时间在百度上!

    xuyaowen
  • Chrome 灵魂插件

    不看结果盲测一下,肯定是 Chrome 遥遥领先,特别是在程序员这个群体里面应该占比更高。

    纯洁的微笑
  • 开发必备 之 为你的谷歌浏览器润色一波~

    曾经,对于某些东西,只知道傻用,做一个 Low Developer,和身边大佬接触后,才发现,山的那边,真的有不一样的世界。

    HLQ_Struggle
  • 三分钟基础:黑客是如何偷偷在我们的网页植入广告的?

    上次讲了路由器里的广告,大家没看的可以看下哦:三分钟基础:路由器是如何偷偷植入广告的?

    帅地
  • 使用谷歌浏览的你,十大必备插件你安装了吗?

    小编发了一篇如何使用谷歌浏览器访问外国的资源——手把手教你安装谷歌访问助手,你还担心访问不了谷歌吗? 朋友们反馈了有哪些好用的谷歌浏览器插件呢?可以让你的开发...

    乱敲代码
  • 玩转Microsoft Edge

    最早是在楠皮教会我怎么用谷歌浏览器的时候接触到浏览器插件这种东西,要不怎么说天下浏览器出谷歌呢,国内好多打着自主研发幌子的浏览器,一看内核,都是chromium...

    Akilar
  • 几款效率神器助你走上人生巅峰

      在我的工作和生活中,我一直都很注重效率工具的使用,这么些年下来也积累好几款很不错,但是又不为大多数人所熟知的软件工具,我用起来得心应手,很不错。那我就像在此...

    阿豪聊干货
  • 你必须知道的Chrome插件,大牛都在用!

    很多人可能不知道,Chrome 最强大的地方其实在于它的第三方插件, 后台回复 "chrome" 获取插件

    Python编程与实战
  • 谷歌这次成了公敌

    只是搜了一下“袜子”,结果接下来几天里,打开各种App看到的全是袜子广告。你是不是也有过类似的经历?

    量子位
  • 你必须知道的Chrome插件,大牛都在用!

    说到浏览器我相信大多数人都会首推 Chrome 浏览器,尤其是程序员最喜欢用 Chrome

    kbsc13

扫码关注云+社区

领取腾讯云代金券