开发一个chrome插件：将百度搜索热点屏蔽掉！

每次百度搜索，搜索结果的右边总是出现些乱七八糟的搜索热点（推的都是些什么玩意，高校替课和我有毛关系，几个悲伤的热点我用星号顶掉了）。

强迫症想把它隐藏掉，我用的是chrome浏览器，受adblock（超强屏蔽广告插件）的启发，想到做浏览器插件的方式。
本文简单记录一下插件开发过程，chrome插件开发真的非常简单，只需要一点点前端的知识就可以了，以下是本次插件开发、打包、安装全部过程。
一、插件介绍
chrome插件，即chrome扩展程序，地址栏输入chrome://extensions即可查看已安装的插件(比如下图中的第二个就是本次开发的插件):

二、插件开发

准备工作　仅需安装chrome浏览器以及一个文本编辑器即可。
创建一个文件夹，随意起你喜欢的名字，这里我创建的是‘brisk_page’，意为＂清新网页＂
创建名为配置manifest.json文件。配置文件是插件的核心部分，其内容是json格式的，很类似前端项目包管理的package.json。该文件内容大概如下，每一项的含义都注释了：

{"name": "BriskPage", //　插件名称"version": "0.0.8",　// 插件版本号"manifest_version": 2,　// chrome18以后要求必须设置,不然打包会报错"description": "control the web page with CSS",　// 对插件的简单描述,本插件是通过CSS来简单控制页面那些元素隐藏"browser_action": {　// 配置插件的一些资源地址"default_icon": "favicon.jpeg",　// 图标，需要提供图标文件"default_title": "清新网页",　// 标题"default_popup": "popup.html"　// 弹窗文件，就是点击插件图标，需要提供popup.html文件},"content_scripts": [ // 该项可无，不过如果我们想操作页面dom的话，是需要配置的{"matches": ["*://www.baidu.com/*"], // 对于百度站点网页，注入brisk.js"js": ["brisk.js"]}]
}

根据配置文件将图标文件、弹窗文件、js文件放到插件文件夹下：
编写js代码
代码非常简单，就是动态创建一个style标签，把隐藏Dom相应的CSS写入后，插入原网页，这样就能达到隐藏相应dom的目的啦，这里有个细节点的东西就是观察原网页变化，使用了MutationObserver实例对象，当页面中Dom发生变化时，检查页面内是否有我们插入的style标签，有就不作任何处理，没有则插入。代码如下：

// brisk.jsfunction hideDom () {if (document.querySelector('style[brisk]')) returnlet style = document.createElement('style')style.setAttribute('type', 'text/css')style.setAttribute('brisk', true)style.innerHTML = ".FYB_RD { display:none }"document.head.appendChild(style)
}let mutationObserver = window.MutationObserver
let observer = new MutationObserver(hideDom)
observer.observe(document, { childList: true, subtree: true })

编写弹窗代码
弹窗是插件与用户交互的界面，就像正常的html页面一样，不过这里不用写等标签，直接写html代码即可,本插件目前暂无什么交互，所以代码简单明了，仅仅说明插件功能：

<meta charset="UTF-8">
<div><div style="width: 400px">欢迎使用"清新网页"插件</div><div><div>插件功能如下：</div><ol><li>屏蔽百度推荐搜索热点</li></ol></div>
</div>

最后需要一个图标文件，安装后将会显示在浏览器的右上角作为插件的入口：

至此，一个完整的插件就开发好了，麻雀虽小，五脏俱全，可以搞事情了。

三、插件打包
进入chrome://extensions/页面，点击右上角开发者模式，开启后就会看到弹出的菜单栏，点击打包扩展程序。
弹出界面内需要填写两个地址，第一个是扩展程序根目录（即brisk_page）。第二个是密钥文件，第一次不用填，会生成密钥文件，文件地址与扩展程序根目录同级。

点击打包扩展程序,就会发现和brisk_page同级会生成一个crx文件，即扩展程序包:

四、安装
从文件夹将此文件拖入扩展程序页面即可安装！不出意外，已经可以看到效果了。

安装插件之前	安装插件之后

本文要介绍的内容就到此了，文章只是简单介绍了chrome插件开发的方法，文中的插件还会继续改进，插件的github仓库地址：https://github.com/Lushenggang/brisk　。预期是该插件可以让用户自由设置某个网站DOM屏蔽规则，如果您对该插件有好的想法，可以给我提issue或者pr，不甚感激~

开发一个chrome插件：将百度搜索热点屏蔽掉！相关推荐

如何从零开始开发一个 Chrome 插件？
什么是浏览器插件? 简单来说浏览器插件,是浏览器上的一种工具,可以提供一些浏览器没有的功能,帮你做一些有趣的事情.开发者可以根据自己的喜欢,去实现一些功能.插件基于Web技术(html.css.js) ...
前端拓展：如何开发一个 Chrome 插件？
什么是浏览器插件? 简单来说浏览器插件,是浏览器上的一种工具,可以提供一些浏览器没有的功能,帮你做一些有趣的事情.开发者可以根据自己的喜欢,去实现一些功能.插件基于Web技术(html.css.js) ...
设计和实现一个 Chrome 插件提升登录效率
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信ruochuan12 进群参与,每周大家一起学习200行左右的源码,共同进步.已进行4个月了,很多小伙伴表示收获颇丰. 前言在我们的 ...
wordpress常用插件打包百度搜索推送插件+sitemap生成等
简介: wordpress常用插件打包百度搜索推送插件+sitemap生成+七牛云对象存储+评论防护一.WordPress 七牛云对象存储(简称:WPQiNiu),基于七牛云对象存储与 WordP ...
快速制作一个chrome插件
说在前面在我日常开发以及娱乐生活中,浏览器是我使用频率较高的一个应用,当我大学拥有第一部电脑开始,之后不论电脑换成什么,以及使用的是什么系统,我的首选浏览器都是Chrome,不仅仅是因为其速度快,更 ...
怎么编写一个chrome插件
怎么编写一个chrome插件总觉得chrome插件这种东西很高端,很遥不可及.当然复杂的chrome插件开发起来确实比较困难,但是我们可以从一个简单的chrome插件demo慢慢入手,了解一下chr ...
如何开发一个浏览器插件
参考文章 Chrome 平台 API 一天学会Chrome插件开发 30分钟开发一款抓取网站图片资源的浏览器插件 manifest.json参数详解 Content Security Policy 入 ...
flutter 获取定位_从头开发一个Flutter插件（二）高德地图定位插件
在上一篇文章从头开发一个Flutter插件(一)开发流程里具体介绍了flutter插件的具体开发流程,从创建项目到发布.接下来将会为Flutter天气项目开发一个基于高德定位sdk的flutter定位 ...
制作一个chrome插件
制作一个chrome插件要做两方面的准备文件准备在文件夹中,必需的两个文件 manifest.json 用于配置文件 index.html 插件的界面效果 manifest.json的内容 { ...

开发一个chrome插件：将百度搜索热点屏蔽掉！

开发一个chrome插件：将百度搜索热点屏蔽掉！相关推荐

最新文章

热门文章