教程第 1 部分：在弹出窗口中显示图像

项目
10/26/2024

第 1 部分示例：在弹出窗口中显示图像是一个简单的静态扩展，没有 JavaScript，它可在任何 Microsoft Edge 选项卡的弹出窗口中的小网页中显示 stars.jpeg 图像：

运行的简单扩展

通过执行以下操作创建此类型的扩展：

创建manifest.json文件。
添加用于启动扩展的图标。
打开默认弹出对话框。

在此过程中，安装 (或更新) 并测试扩展。

如果要立即安装并运行已完成的扩展，或查看其完成的代码，请执行以下任一操作：

将 MicrosoftEdge-Extensions 存储库克隆到本地驱动器。使用目录 /extension-getting-started-part1/。
从 MicrosoftEdge-Extensions 存储库的 /part1/ 文件夹下载源代码。

然后，可以安装并运行存储库中已完成的扩展，每次旁加载扩展以在本地安装和测试它。

步骤 1：创建manifest.json文件

每个扩展包必须在根目录中有一个 manifest.json 文件。清单提供了扩展、扩展包版本、扩展名称和说明等的详细信息。

本文中的所有编码步骤已在 MicrosoftEdge-Extensions 存储库的第 1 部分演示中完成。建议先克隆存储库并安装并运行第 1 部分演示，然后 (，而不是) 从空目录开始，然后手动创建目录、创建文件并将代码粘贴到文件中。

此步骤已在 manifest.json MicrosoftEdge-Extensions 存储库中完成。如果要从空目录开始手动创建第 1 部分扩展：

在计算机上的目录中，使用编辑器（如 Visual Studio Code）创建包含以下manifest.json行的文件：

{
    "name": "NASA picture of the day pop-up",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "A basic extension that displays an image in a pop-up.",
}

步骤 2：添加用于启动扩展的图标

此步骤已在 MicrosoftEdge-Extensions 存储库的第 1 部分演示中完成。如果要手动创建第 1 部分扩展，请继续执行以下步骤。

在项目（与清单文件位于同一目录中）中创建一个 icons 目录，以存储图标图像文件。图标用作用户单击以启动扩展的按钮的背景图像：

对于图标：
- 建议使用PNG格式，但也可以使用 BMP、 GIFICO 或 JPEG 格式。
- 建议使用 128 x 128 像素的图像，如有必要，这些图像由浏览器调整大小。

请确保项目的目录类似于以下结构：

└── part1
    ├── manifest.json
    └── icons
        ├── nasapod16x16.png
        ├── nasapod32x32.png
        ├── nasapod48x48.png
        └── nasapod128x128.png

.png从存储库获取文件：
- nasapod16x16.png
- nasapod32x32.png
- nasapod48x48.png
- nasapod128x128.png
例如，从 MicrosoftEdge-Extensions 存储库的 /icons/ 文件夹中单独下载文件，并将其放在目录中 /icons/ 。

列出文件中的 manifest.json 图标，如下所示：

{
    "name": "NASA picture of the day pop-up",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "A basic extension that displays an image in a pop-up.",
    "icons": {
        "16": "icons/nasapod16x16.png",
        "32": "icons/nasapod32x32.png",
        "48": "icons/nasapod48x48.png",
        "128": "icons/nasapod128x128.png"
    }
}

步骤 3：打开默认弹出对话框

此步骤已在 MicrosoftEdge-Extensions 存储库的 popup.html 中完成。如果要手动创建第 1 部分扩展，请继续执行以下步骤。

创建在 HTML 用户启动扩展时要运行的文件。当用户单击图标以启动扩展时，此文件将显示为模式对话框。

在名为 popup.html 的目录中创建名为的 popupHTML 文件。

将以下代码添加到 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="Stars" />
        </div>
    </body>
</html>

将文件stars.jpegimages添加到文件夹中。例如，从 MicrosoftEdge-Extensions 存储库下载stars.jpeg。

请确保项目的目录类似于以下结构：

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

在下manifest.jsonaction注册弹出窗口，如下所示：

{
    "name": "NASA picture of the day pop-up",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "A basic extension that displays an image in a pop-up.",
    "icons": {
        "16": "icons/nasapod16x16.png",
        "32": "icons/nasapod32x32.png",
        "48": "icons/nasapod48x48.png",
        "128": "icons/nasapod128x128.png"
    },
    "action": {
        "default_popup": "popup/popup.html"
    }
}

这就是开发简单扩展所需的一切。

步骤 4：安装和测试扩展

安装并运行扩展;请参阅旁加载扩展以在本地安装和测试它。该扩展在弹出窗口中显示 popup.html，其中包含 stars.jpeg：

运行的简单扩展

可以在任何选项卡中打开此第 1 部分演示扩展，包括空选项卡或“管理扩展”选项卡。

运行并测试扩展后，可以继续学习教程第 2 部分：使用 JavaScript 在网页中插入图像。

另请参阅

GitHub：

MicrosoftEdge-Extensions 存储库。
- /part1/ - 第 1 部分示例的源代码。

通过