创建扩展教程，第 1 部分

  • 项目

本教程的目标是从空目录开始生成 Microsoft Edge 扩展。 你正在构建一个扩展，弹出美国宇航局当天的照片。 本教程介绍如何通过以下方式创建扩展：

  • 创建 manifest.json 文件。
  • 添加图标。
  • 打开默认弹出对话框。

开始之前

若要测试在本教程中构建的已完成扩展，请从 MicrosoftEdge-Extensions 存储库 > 扩展-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 的目录中创建名为 的 popupHTML 文件。 当用户选择图标以启动扩展时， 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/stars.jpeg 添加到 images 文件夹。 项目的目录应类似于以下结构：

└── part1
    ├── manifest.json
    ├── icons
    │   ├── nasapod16x16.png
    │   ├── nasapod32x32.png
    │   ├── nasapod48x48.png
    │   └── nasapod128x128.png
    ├── images
    │   └── stars.jpeg
    └── popup
        └── popup.html

最后，在 manifest.json 清单 V2) (下 browser_action 或在清单 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"
    }
}

后续步骤

这就是开发工作扩展所需的一切。 现在，继续旁加载并测试扩展。 有关详细信息，请参阅 旁加载扩展。