建立延伸模組教學課程,第1部分
本教學課程的目標是要建置Microsoft Edge擴充功能,從空白目錄開始。 您正在建置擴充功能,以顯示 NASA 當天的圖片。 在本教學課程中,您將瞭解如何透過下列方式建立擴充功能:
-
manifest.json
建立檔案。 - 新增圖示。
- 開啟預設快顯對話框。
如果您想要測試您在本教學課程中建置的已完成延伸模組,請從 MicrosoftEdge-Extensions 存放庫 > extension-getting-started-part1 下載原始程式碼。 原始碼已從指令清單 V2 更新為指令清單 V3。
步驟 1:建立manifest.json檔案
每個擴充套件的根目錄都必須有一個 manifest.json
檔案。 指令清單會提供延伸模組、延伸模組套件版本、延伸模組名稱和描述等的詳細數據。
下列程式代碼概述檔案 manifest.json
中所需的基本資訊:
{
"name": "NASA picture of the day viewer",
"version": "0.0.0.1",
"manifest_version": 3,
"description": "An extension to display the NASA picture of the day."
}
步驟 2:新增圖示
首先, icons
在專案中建立目錄以儲存圖示圖像檔案。 圖示用於用戶選取啟動擴充功能之按鈕的背景影像。
針對圖示:
- 建議您使用
PNG
格式,但您也可以使用BMP
、GIF
ICO
或JPEG
格式。 - 建議您使用 128 x 128 像素的影像,如有必要,瀏覽器會將其重設大小。
項目的目錄應該類似下列結構:
└── part1
├── manifest.json
└── icons
├── nasapod16x16.png
├── nasapod32x32.png
├── nasapod48x48.png
└── nasapod128x128.png
接下來,將圖示新增至 manifest.json
檔案。 使用圖示資訊更新您的 manifest.json
檔案,使其符合下列程序代碼。 下 png
列程式代碼中所列的檔案可在本文稍早所述的下載檔中取得。
{
"name": "NASA picture of the day viewer",
"version": "0.0.0.1",
"manifest_version": 3,
"description": "An extension to display the NASA picture of the day.",
"icons": {
"16": "icons/nasapod16x16.png",
"32": "icons/nasapod32x32.png",
"48": "icons/nasapod48x48.png",
"128": "icons/nasapod128x128.png"
}
}
步驟 3:開啟預設快顯對話方塊
現在,建立要在 HTML
用戶啟動擴充功能時執行的檔案。 在名為的目錄中建立名為 popup.html
的 popup
HTML 檔案。 當使用者選取圖示來啟動延伸模組時, popup/popup.html
會顯示為模式對話框。
將下列清單中的程式代碼新增至 , popup.html
以顯示星星影像:
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>NASA picture of the day</title>
</head>
<body>
<div>
<img src="/images/stars.jpeg" alt="Display the stars image" />
</div>
</body>
</html>
請確定您將影像檔案新增至 images 檔案 images/stars.jpeg
夾。 項目的目錄應該類似下列結構:
└── part1
├── manifest.json
├── icons
│ ├── nasapod16x16.png
│ ├── nasapod32x32.png
│ ├── nasapod48x48.png
│ └── nasapod128x128.png
├── images
│ └── stars.jpeg
└── popup
└── popup.html
最後,在 manifest.json
browser_action
指令清單 V2) 或指令清單 V3) 中 (底下的 (下 action
註冊快顯,如下列程式碼所示:
{
"name": "NASA picture of the day viewer",
"version": "0.0.0.1",
"manifest_version": 3,
"description": "An extension to display the NASA picture of the day.",
"icons": {
"16": "icons/nasapod16x16.png",
"32": "icons/nasapod32x32.png",
"48": "icons/nasapod48x48.png",
"128": "icons/nasapod128x128.png"
},
"action": {
"default_popup": "popup/popup.html"
}
}
後續步驟
這就是開發工作擴充功能所需的一切。 現在,繼續側載並測試您的擴充功能。 如需詳細資訊,請 參閱側載擴充功能。