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

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

二、插件开发

  1. 准备工作　仅需安装chrome浏览器以及一个文本编辑器即可。
  2. 创建一个文件夹，随意起你喜欢的名字，这里我创建的是‘brisk_page’，意为＂清新网页＂
  3. 创建名为配置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"]

    }

  ]

}
  1. 根据配置文件将图标文件、弹窗文件、js文件放到插件文件夹下：
  1. 编写js代码

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

// brisk.js

 function hideDom () {

  if (document.querySelector('style[brisk]')) return

  let 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 })
  1. 编写弹窗代码

弹窗是插件与用户交互的界面，就像正常的html页面一样，不过这里不用写<head><body>等标签，直接写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插件没有什么技术难度，但是还是有很多实际用途。文章只是简单介绍了chrome插件开发的方法，文中的插件还会继续改进，插件的github仓库地址：https://github.com/Lushenggan...。

该插件预期是可以让用户自由设置某个网站DOM屏蔽规则，如果您对该插件有好的想法，可以给我提issue或者pr，不甚感激

转载https://segmentfault.com/a/1190000019754133

开发一个chrome插件：将百度搜索热点屏蔽掉！的更多相关文章

  1. chrome 浏览器插件开发（一）—— 创建第一个chrome插件

    最近在开发一个chrome插件,在网上找到了一些的文章,虽说按照文章可以写出对应的例子,但若要进行实际开发,发现还是有不少文章中没有的坑.下面我将结合我在开发过程中遇到的几个方面,对这些坑做一下补充. ...

  2. Chrome 百度搜索热点过滤插件 - 开源软件

    学习时,为了搜集最全的中文资料,有时候不得不使用Baidu搜索引擎.在你还是个小菜鸡的时候你可能会花费大量时间在百度上! 但是,时间久了你会发现,你总会被网络上一些奇奇怪怪或者有趣的事情吸引过去而逐渐 ...

  3. 使用Tampermonkey(油猴) 插件，重新实现了，百度搜索热点过滤功能

    昨天晚上,花了点时间学习了Chrome插件的制作方法,并书写了<Chrome 百度搜索热点过滤插件 - 开源软件>这一文章,简单地介绍自己实现的百度搜索热点过滤神器的原理和使用方式,并进行 ...

  4. 动手做第一个Chrome插件

    Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...

  5. 如何用原生js开发一个Chrome扩展程序

    原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...

  6. 开发一个shopify插件

       开发一个shopify插件,shopify商城可以安装该插件:当用户在商城下单后,插件把订单数据按照指定格式传给disruptsports服务器:   https://help.shopify. ...

  7. jQuery 开发一个简易插件

    jQuery 开发一个简易插件 //主要内容 $.changeCss = function(options){ var defaults = { color:'blue', ele:'text', f ...

  8. 我的项目：一个chrome插件的诞生记，名字叫jumper

    选课是个问题,为了选课,便有了以下的故事. 最开始,萌生想法于2013年7月. 接着网上了解了chrome的结构知识,却发现例子是假的. 幸好有之前师兄的一个同功能插件开源,但代码写得很乱,我喜欢逻辑 ...

  9. SAP成都研究院安德鲁：自己动手开发一个Chrome Extension

    各位好,我叫何金鑫(He Andrew), 团队同事亲切地称呼在下为安德鲁.如果你在附近找到wifi热点名为 「安德鲁森面包房5g」,可能是我就在附近,我们可以去喝杯咖啡,聊聊最近有趣的东西. 鄙人现 ...

随机推荐

  1. LeetCode.1037-有效的回旋镖(Valid Boomerang)

    这是小川的第387次更新,第416篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第248题(顺位题号是1037).回旋镖是一组各不相同且不在一条直线上的三个点.给出三个点 ...

  2. Docker面试题（二）

    什么是虚拟化? 虚拟化允许您在相同的硬件上运行两个完全不同的操作系统.每个客户操作系统都经历了引导,加载内核等所有过程.您可以拥有非常严格的安全性,例如,客户操作系统无法完全访问主机操作系统或其他客户 ...

  3. C++复习练习题：1-1000的完数

    一个数如果恰好等于它的因子之和,就被成为完数.例如6的因子为1,2,3,而6=1+2+3,所以6是一个完数.编程找出1-1000之间的所有完数 #include<iostream> usi ...

  4. Keytool生成证书

    一.生成证书keytool -genkey -alias 别名 -keyalg RSA -keysize 1024(密钥位数) -keypass 密码 -validity 365(默认90天) -ke ...

  5. IDEA github 上传项目， 拉取， 删除

    1.IDEA登录github账号 settings -> Version Controller -> GitHub 用户名密码登录 或token登录都可以 2.VCS -> impo ...

  6. [转帖]小米手环采用RISC-V 指令集芯片

    小米手环4或用“黄山一号”芯片,雷军再回前线,未来走向如何 静心科技 06-1111:19 忘记来源地址了 不过国内的很多东西都是有中国特色的 比如飞腾 比如麒麟(银河麒麟 还有华为的麒麟 980) ...

  7. vue-loader介绍和单页组件介绍

    $ \es6\sing-file>  npm install vue-loader@14.1.1 -D vue-template-compiler@2.5.17 -D npm install v ...

  8. Axios 的基本使用

    Axios 是一个基于 promise 的HTTP 库, 可以用在浏览器和 node.js 中. 1. 从浏览器创建 XMLHttpRequests 2. 从node.js 创建 http 请求 3. ...

  9. 解析Nuxt.js Vue服务端渲染摸索

    本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Nuxt.js 十分简单易用.一个简单 ...

  10. 786B - Legacy(线段树 + 最短路）线段树优化建图

    题意: 就是给定一张n nn个点的图,求源点s ss到每个点的单源最短路.这张图共有q组边,连边方式有3种: a→b ,边权为w的单向边:a→[l,r] ,即a到连续区间[l,r]中的每一个点都有一条 ...