Chrome Extensions 筆記 – C01 – Hello World Extension

Chrome Extension 由四個部分組成

Manifest – 定義檔
HTML
CSS
JavaScript

然後他會被壓縮成一個 crx 的檔案，這個檔案可以用來發布到 Chrome Web Store

Chrome Extension 分成 Browser Action 與 Page Action 及 Neither BA or PA Action (background)

Manifest – 定義檔

Extension 的資訊，使用 JSON 格式
至少包含
- manifest_version : Extension 開發的版本
- name : 該 Extension 的名稱
- version : 該 Extension 的版本
其他
- description : 描述
- icons

使用 VSCode 建立資料夾 HelloWorld 並建立 manifest.json

{
    "manifest_version" : 2,
    "name" : "Hello World",
    "version" : "1.0"
}

解壓縮 icons HelloWrold icons 放到資料夾

增加圖片，必須指定圖片大小如 128 48 16

{
    "manifest_version" : 2,
    "name" : "Hello World",
    "version" : "1.0",
    "description" : "A hello world extension",
    "icons":{
        "128" : "icon128.png",
        "48"  : "icon48.png",
        "16"  : "icon16.png"
    }
}

使用 browser_action

default_icon : icon
default_popup : 頁面

{
    "manifest_version" : 2,
    "name" : "Hello World",
    "version" : "1.0",
    "description" : "A hello world extension",
    "icons":{
        "128" : "icon128.png",
        "48"  : "icon48.png",
        "16"  : "icon16.png"
    },
    "browser_action" :{
        "default_icon" : "icon16.png",
        "default_popup" : "popup.html"
    }
}

建立 html

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <title>Title Page</title>
    </head>
    <body>
        <h1 class="text-center">Hello World！</h1>
    </body>
</html>

載入 Extension

打開 Chrome ，輸入 Chrome://extensions
選擇開發者模式(Developer mode) 把他設定成 on
使用載入未封裝項目(Load unpacked extension)，選擇資料夾即可

點擊 icon 會出現該網頁

發佈留言 取消回覆

發佈留言取消回覆