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

时间 2019-11-08

原文原文链接

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

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

2、插件开发前端

准备工做　仅需安装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标签，有就不做任何处理，没有则插入。代码以下：git

// 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 })

编写弹窗代码

弹窗是插件与用户交互的界面，就像正常的html页面同样，不过这里不用写<head><body>等标签，直接写html代码便可,本插件目前暂无什么交互，因此代码简单明了，仅仅说明插件功能：github

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

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

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

3、插件打包
进入chrome://extensions/页面，点击右上角开发者模式，开启后就会看到弹出的菜单栏，点击打包扩展程序。json

弹出界面内须要填写两个地址，第一个是扩展程序根目录（即brisk_page）。第二个是密钥文件，第一次不用填，会生成密钥文件，文件地址与扩展程序根目录同级。segmentfault

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

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

本文要介绍的内容就到此了，其实chrome插件没有什么技术难度，可是仍是有不少实际用途。文章只是简单介绍了chrome插件开发的方法，文中的插件还会继续改进，插件的github仓库地址：https://github.com/Lushenggan...。

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

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