创建扩展教程,第 1 部分
本教程的目标是从空目录开始生成 Microsoft Edge 扩展。 你正在构建一个扩展,弹出美国宇航局当天的照片。 本教程介绍如何通过以下方式创建扩展:
- 创建
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/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"
}
}
后续步骤
这就是开发工作扩展所需的一切。 现在,继续旁加载并测试扩展。 有关详细信息,请参阅 旁加载扩展。