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/