建立延伸模組教學課程，第 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 、 GIFICO 或 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.jsonbrowser_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"
    }
}

後續步驟

這就是開發工作擴充功能所需的一切。 現在，繼續側載並測試您的擴充功能。 如需詳細資訊，請 參閱側載擴充功能。