第一次寫 Chrome 擴充功能就上手：空白新頁籤

最近對於 Chrome 的新分頁上，顯示歷史瀏覽紀錄的八宮格畫面感到很刺眼，所以想透過 Chrome 擴充功能去除它！

在線上應用程式商店上可以找到許多類似的套件提供修改，
有單純的空白款式 (適合有潔癖的人 XD)，
例如：Empty New Tab Page、Empty New Tab，
enter image description here

喜愛花俏款式，可以選擇提供超豐富功能與多樣性個人化設定的套件
例如：home-new-tab-page、Momentum
enter image description here

但是！！身為程式設計師，怎麼能安於安裝套件就解決了呢！？當然自己也要來寫看看啦！
首先來看要怎麼開發！

結構

以下是每個擴充功能的基本構成：
  • manifest.json：定義版本、說明、功能等，整個擴充功能的結構都定義在此檔案中。所有屬性設定可參考 google說明
  • HTML：沒有或多個檔案皆可，主題可以不需要
  • JavaScript：沒有或多個檔案皆可。Chrome 擴充功能邏輯使用 js 開發
  • 其他資源：例如圖片

動手做

以下範例來自 Chrome 範例集
  1. 建立一個新的資料夾(例如: c:\blankTab )，供後續放置所有所需的檔案
  2. 將 manifest.json 放到目錄中
  3. 將 blank.html 放到目錄中
  4. 完成
註：此套件功能很簡單，以自定義的 html 檔案取代 newTab 的內容，所以不需要 js 檔案
以下是設定檔案的說明，
{
  "name": "Blank new tab page",   // 套件名稱
  "description": "Override the new tab page with a blank one",  // 說明，可以幫助使用者(其實怕自己忘記)了解套件的功能
  "version": "0.2",              // 版本號，紀錄此套件開發歷程
  "incognito": "split",          // 無痕瀏覽模式下，套件的執行限制，有三種模式：
                                 // 1. "spanning"(預設值)
                                 // 2. "split"(與一般模式使用不同儲存紀錄)
                                 // 3. "not_allowed"(禁用)

  "chrome_url_overrides": {      // 指示套件將覆寫 chrome 提供的預設行為(一個套件只能覆寫一種)，
                                 // 1. 書籤管理員(chrome://bookmarks)
                                 // 2. 瀏覽紀錄(chrome://history)
                                 // 3. 新分頁( chrome://newtab.)
    "newtab": "blank.html"
  },
  "manifest_version": 2          // manifest 檔案版本；目前固定寫 2
}
開發完後，要安裝此套件，
  1. 網址列輸入 chrome://extensions
  2. 勾選 開發人員模式 (Developer mode)
  3. 點選 載入未封裝擴充功能 (Load unpacked extension)
  4. 選擇 c:\blankTab 資料夾
    開啟一個新頁籤，所有惱人的歷史頁面縮圖都消失囉 (轉圈圈)

參考文件

想開發擴充功能，建議以以下順序閱讀：
  • Overview：入門文件
  • API：可查看 Chrome 提供哪些 api 可以呼叫
  • 官方範例：提供各種 api 使用範例，超實用! (因為 api 說明超精簡，不看範例實在不會用 -_- )
  • Developer’s Guide：詳細說明各項開發相關知識，記得要在看完入門文件後再來看 (不然就會因為感覺太難放棄了)


[更新 2018/03/20]

此套件已放置到 GitHub，可到這裡關注後續更新
有任何建議也可提出

留言

張貼留言