沐码小站

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

2019-04-30 21:26技术博客2257 次浏览

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

BlockNote image

强迫症想把它隐藏掉，我用的是chrome浏览器，受adblock（超强屏蔽广告插件）的启发，想到做浏览器插件的方式。本文简单记录一下插件开发过程，chrome插件开发真的非常简单，只需要一点点前端的知识就可以了，以下是本次插件开发、打包、安装全部过程。

一、插件介绍

 chrome插件，即chrome扩展程序，地址栏输入chrome://extensions/即可查看已安装的插件(比如下图中的第二个就是本次开发的插件):

BlockNote image

二、插件开发

1. 准备工作　仅需安装chrome浏览器以及一个文本编辑器即可。

2. 创建一个文件夹，随意起你喜欢的名字，这里我创建的是‘brisk_page’，意为＂清新网页＂

3. 创建名为配置manifest.json文件。配置文件是插件的核心部分，其内容是json格式的，很类似前端项目包管理的package.json。该文件内容大概如下，每一项的含义都注释了：

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

 4. 根据配置文件将图标文件、弹窗文件、js文件放到插件文件夹下：

BlockNote image

5. 编写js代码

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

<em><span data-style-type="textColor" data-value="rgb(153, 153, 136)" data-editable="">// brisk.js</span></em>
 <strong>function</strong> <strong><span data-style-type="textColor" data-value="rgb(153, 0, 0)" data-editable="">hideDom</span></strong> () {
  <strong>if</strong> (<span data-style-type="textColor" data-value="rgb(0, 134, 179)" data-editable="">document</span>.querySelector(<span data-style-type="textColor" data-value="rgb(221, 17, 68)" data-editable="">'style[brisk]'</span>)) <strong>return</strong>
  <strong>let</strong> style = <span data-style-type="textColor" data-value="rgb(0, 134, 179)" data-editable="">document</span>.createElement(<span data-style-type="textColor" data-value="rgb(221, 17, 68)" data-editable="">'style'</span>)
  style.setAttribute(<span data-style-type="textColor" data-value="rgb(221, 17, 68)" data-editable="">'type'</span>, <span data-style-type="textColor" data-value="rgb(221, 17, 68)" data-editable="">'text/css'</span>)
  style.setAttribute(<span data-style-type="textColor" data-value="rgb(221, 17, 68)" data-editable="">'brisk'</span>, <span data-style-type="textColor" data-value="teal" data-editable="">true</span>)
  style.innerHTML = <span data-style-type="textColor" data-value="rgb(221, 17, 68)" data-editable="">".FYB_RD { display:none }"</span>
  <span data-style-type="textColor" data-value="rgb(0, 134, 179)" data-editable="">document</span>.head.appendChild(style)
}

<strong>let</strong> mutationObserver = <span data-style-type="textColor" data-value="rgb(0, 134, 179)" data-editable="">window</span>.MutationObserver
<strong>let</strong> observer = <strong>new</strong> MutationObserver(hideDom)
observer.observe(<span data-style-type="textColor" data-value="rgb(0, 134, 179)" data-editable="">document</span>, { childList: <span data-style-type="textColor" data-value="teal" data-editable="">true</span>, subtree: <span data-style-type="textColor" data-value="teal" data-editable="">true</span> })

6. 编写弹窗代码

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

<span data-style-type="textColor" data-value="navy" data-editable=""><meta </span><span data-style-type="textColor" data-value="teal" data-editable="">charset</span><span data-style-type="textColor" data-value="navy" data-editable="">=</span><span data-style-type="textColor" data-value="rgb(221, 17, 68)" data-editable="">"UTF-8"</span><span data-style-type="textColor" data-value="navy" data-editable="">></span>
<span data-style-type="textColor" data-value="navy" data-editable=""><div></span>
  <span data-style-type="textColor" data-value="navy" data-editable=""><div </span><span data-style-type="textColor" data-value="teal" data-editable="">style</span><span data-style-type="textColor" data-value="navy" data-editable="">=</span><span data-style-type="textColor" data-value="rgb(221, 17, 68)" data-editable="">"width: 400px"</span><span data-style-type="textColor" data-value="navy" data-editable="">></span>欢迎使用"清新网页"插件<span data-style-type="textColor" data-value="navy" data-editable=""></div></span>
  <span data-style-type="textColor" data-value="navy" data-editable=""><div></span>
    <span data-style-type="textColor" data-value="navy" data-editable=""><div></span>插件功能如下：<span data-style-type="textColor" data-value="navy" data-editable=""></div></span>
    <span data-style-type="textColor" data-value="navy" data-editable=""><ol></span>
      <span data-style-type="textColor" data-value="navy" data-editable=""><li></span>屏蔽百度推荐搜索热点<span data-style-type="textColor" data-value="navy" data-editable=""></li></span>
    <span data-style-type="textColor" data-value="navy" data-editable=""></ol></span>
  <span data-style-type="textColor" data-value="navy" data-editable=""></div></span>
<span data-style-type="textColor" data-value="navy" data-editable=""></div></span>

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

BlockNote image

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

三、插件打包

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

BlockNote image

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

BlockNote image

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

BlockNote image

四、安装

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

安装插件之前

安装插件之后

本文要介绍的内容就到此了，其实chrome插件没有什么技术难度，但还是有很多实际用途的~

1¥赞赏
上一篇：linux快速文件查找
下一篇：CSS布局：三栏布局
评论(0)
暂无评论