Chrome插件開發，美化網頁上的文件列表。chrome-extension，content-scripts

趁着2018年還剩最後幾天，發幾篇博客，荒廢過久了，慚愧。

最近也是需求驅動，研究了下Chrome插件開發。來看一下咱們公司運維提供的日誌查看頁面

 

全部項目的日誌都參雜在一塊兒，每次去找都很痛苦。慢慢發現這些日誌的名稱都有個規律：項目名-日期-後綴，因而想美化下這個頁面，可是服務端還動不了，只能在瀏覽器端想辦法。

Chrome插件能夠本地渲染頁面，是個很是不錯的選擇，直接來看下完成的效果 

 

按照「項目名」和「日期」分類了，這樣便於查看。同時頁面也美化了，不只實用並且賞心悅目。

1、從零開始瞭解Chrome插件開發

Chrome插件開發對環境要求極低，有一個最基本的前端開發IDE就能夠了，先新建一個必須的文件：manifest.json

{
  "name": "WebFileFilter",
  "version": "1.0.0",
  "description": "fast sort your webpage files",
  "icons": {
    "16": "images/icon_16px.png",
    "48": "images/icon_48px.png",
    "128": "images/icon_128px.png"
  },
  "browser_action": {
    "default_icon": "images/icon_16px.png",
    "default_title": "WebFileFilter"
  },
  "content_scripts": [
    {
      "matches": [
        "http://115.28.113.150:55000/log/"
      ],
      "js": [
        "js/content_scripts_list.js"
      ],
      "run_at": "document_start"
    }
  ],
  "manifest_version": 2
}

其餘屬性很少說了，看看就明白。說說「content_scripts」下的「matches」節點，這個裏面就是要注入js的URL地址，而「content_scripts_list.js」就是要注入的js，在「content_scripts_list.js」寫一行測試代碼

console.log("hello world!");

看一下項目結構

一個最基本的Chrome插件就完成了，去安裝一下：打開Chrome瀏覽器 - 更多工具 - 擴展程序，打開「開發者模式」 - 加載已解壓的擴展程序 - 選擇src目錄 - 肯定。再刷新下頁面，看看效果

能夠看到「content_scripts_list.js」已經注入這個頁面了

2、美化頁面

能夠向這個頁面注入js，固然也能夠向這個頁面注入css

{
  "name": "WebFileFilter",
  "version": "1.0.6",
  "description": "fast sort your webpage files",
  "icons": {
    "16": "images/icon_16px.png",
    "48": "images/icon_48px.png",
    "128": "images/icon_128px.png"
  },
  "browser_action": {
    "default_icon": "images/icon_16px.png",
    "default_title": "WebFileFilter"
  },
  "content_scripts": [
    {
      "matches": [
        "http://115.28.113.150:55000/log/"
      ],
      "css": [
        "css/bootstrap.min.css"
      ],
      "js": [
        "js/jquery.min.js",
        "js/bootstrap.min.js",
        "js/content_scripts_list.js"
      ],
      "run_at": "document_start"
    }
  ],
  "manifest_version": 2
}

jQuery和Bootstrap都注入進來了，那就能夠隨意渲染頁面了。這回「content_scripts_list.js」就不輸出「hello world」了，要去獲取頁面原有的數據綁定到bootstrap插件上，而後去覆蓋頁面原來的內容，具體實現看文章結尾的源碼連接。

注：「run_at」設置成「document_start」表示在原頁面加載以前就注入css和js。若是不這麼設置，訪問頁面的時候，原頁面刷的一下過去再顯示美化後的頁面，體驗較差。

同時「content_scripts_list.js」裏面全部的js都須要寫在document的DOMContentLoaded事件裏面，不然也是達不到效果的

document.addEventListener('DOMContentLoaded', function () {
  //your js...
});

3、總結

本文以美化日誌頁面爲例，其實適用於全部web服務器輸出的文件列表頁面。最近上網發現這個頁面

文件名徹底符合這樣的格式：分類A-分類B-分類C，因而代碼都不用改，直接把這個URL地址（https://jiacrontab.iwannay.cn/download/）配置到content_scripts下的matches節點，來看下美化後的效果 

「content_scripts」的方式注入頁面，好處是效率高，只注入配置的頁面，其餘的任何頁面都不注入，很是乾淨；同時有個弊端，就是一旦配置URL後，若是URL地址變了還須要到matches裏改代碼。

下篇文章介紹另外一條路，實現相同功能的前提下，還能夠動態配置要注入的URL地址，不須要改代碼。

Chrome插件本地源碼路徑，方便學習其餘優秀插件的代碼：

1）windows xp：C:\Documents and Settings\用戶名\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions
2）windows xp+：C:\Users\用戶名\AppData\Local\Google\Chrome\User Data\Default\Extensions
3）MAC：~/Library/Application Support/Google/Chrome/Default/Extensions
4）Ubuntu：~/.config/google-chrome/Default/Extensions

4、其餘

Chrome插件開發有不少的api，功能很是強大。這裏僅拋磚引玉，更多使用場景你們本身去發揮。源碼地址  Chrome商店  開發文檔