開發一個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>