2021 開發 Hello World Chrome extension develop manifest V3

Google Chrome Extension 的用途?


原始的用意應該安裝一個小小的軟體在你的瀏覽器上, 它可以用來做一些功能/行為, 比如

  1. 增進生產力, 比如可以抓某些資料
  2. 可以讓網頁資料更豐富, 比如歷史的價格, 可以跟原有網頁內容夾再一起觀看
  3. 可以玩些遊戲

Google Chrome Extension 如何運作?


Extension 建構在瀏覽器上, 所以 HTML, CSS , JS 都是可以使用的

Google Chrome Extension 如何取得? 以及安裝


Chrome Web Store. 就可以取得你想要的, 除非你是要自行開發 那就是另一回事了.

來開發一個 Hello world 吧

首先 先開一個 hello 的目錄
下面需要有 manifest.json 的檔案 用來宣告這個 extension 的目的跟需要哪些權限

{
    "name": "Hello Extensions", 
    "description": "Base Level Extension",
    "version": "1.0",
    "manifest_version": 3,
    "action": {
        "default_popup": "hello.html",
        "default_icon": "hello_extensions.png"
    },
    "commands": {
        "_execute_action": {
          "suggested_key": {
            "default": "Ctrl+Shift+F",
            "mac": "MacCtrl+Shift+F"
          },
          "description": "Opens hello.html"
        }
    }
}

準備一個 hello.html 的資料


最後準備一張 hello_extensions.png 圖, 用來顯示在 Chrome menu bar 上的圖示

接下來 就是把 chrome 的 開發模式打開. 打開瀏覽器, 輸入 chrome://extensions

接下來 把在開發的程式安裝

安裝好就會變成

接著測試一下. MacCtrl+Shift+F

就完成了

reference :

https://developer.chrome.com/docs/extensions/

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *