[拯救上班族的 Chrome 擴充套件] Chrome Extension 是什麼酷東西? 跟著官方做 Hello Extensions

2021 iThome 鐵人賽

DAY 2

自我挑戰組

只不過是想強迫自己定時喝個水有必要那麼麻煩嗎之我想寫一個 Chrome Extension 強迫我喝水系列第 2 篇

[拯救上班族的 Chrome 擴充套件] Chrome Extension 是什麼酷東西? 跟著官方做 Hello Extensions

13th鐵人賽 chrome extension helloworld ccviewer

Robin

2021-09-17 03:02:39

2220 瀏覽

分享至

嗨各位，我是 Robin

今天想跟大家分享如同標題，

到底什麼是 Chrome Extension?

不知道各位有沒有在 Chrome 線上應用程式商店搜尋過一些工具?

像我比較常用的話...
當然是邊上班邊看影片，
並且能在各個網頁都能看到 cc 字幕的擴充 CCViewer啊！

好啦這是我很久以前寫的擴充，充滿時代的眼淚，也不敢回頭看原本怎麼寫xDD (會再找時間重構的)，原本想更多的無情工商，可是怕被檢舉

我個人實質比較常用的... xDD
比方說不想看廣告用 ADblock ，
或是英文菜雞用Google翻譯，
或是英文文法菜雞用 Grammarly，
這些就是 Chrome Extension啦~

以上是我自己比較常用的Chrome擴充啦xDD

聽到這邊你是不是覺得

今天我就要帶領你學習如何製作第一個你的擴充。
開始之前來看看 Chrome Extension 的架構長怎樣呢？
畫了一張圖如下

看完是不是還是沒有頭緒xD
這並不難，請讓我跟你簡單的解釋。

manifest.json: 就是一個 JSON 格式的一個檔案，提供說明你這個擴充的資訊，名字, 需要的權限 或是要做的動作之類的。
Background scripts: 負責處理你需要的邏輯等等，這部分是沒有 UI 顯示，基本上就是 JS scripts ， Chrome Extension 是屬於 event-based 的可以想像成當 user 打開或是關閉任一分頁，他就可以在這邊做一些控制，在背後默默處理事情的可憐勞工。
Contents scripts: 負責處理你在網頁上看到的畫面，操控DOM，就像是你打開 F12 的 devtools 在 console 下 scripts 一樣，在這邊你可以任意的操作你看到的網頁(~~聽起來是不是很色~~)。
Options page: 負責在使用者打開你的擴充時顯示的畫面提供使用者自訂一些選項的頁面。

開始動手做~

新增一個檔案叫做 manifest.json。

{
  "name": "Hello Extensions", //你也可以改成你喜歡的名字
  "description": "Base Level Extension", // 敘述你這擴充的用途之類的
  "version": "1.0", // 擴充的版本
  "manifest_version": 3 // manifest 版本（以前是2)
}

新增一個檔案叫做 hello.html。

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

準備一個圖片當作 icon (如果不知道要用什麼可以用官方提供的點我)，並存成 hello_extensions.png 或是其他你想要的名字。

讓你的 mainifest.json 知道要做什麼吧~

{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png" // 你的 icon 檔案名稱
  }
}

接著我們來看看成果

打開管理擴充功能
點選載入未封裝項目
選擇你的目錄
在管理擴充可以看到你寫的擴充
擴充列表也會顯示 (可以將它釘選)
點選擴充

恭喜你成功完成你的第一個擴充~
還沒完，我們把它加上快捷鍵吧~

再次打開你的 manifest.json並增加以下內容。

  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  }