Руководство по созданию расширения, часть 1
Цель этого руководства — создать расширение Microsoft Edge, начиная с пустого каталога. Вы строите расширение, которое всплывает наса картину дня. В этом руководстве описано, как создать расширение, выполнив следующие действия:
- Создание
manifest.json
файла. - Добавление значков.
- Открытие всплывающего диалогового окна по умолчанию.
Если вы хотите протестировать готовое расширение, которое вы создаете в этом руководстве, скачайте исходный код из репозитория MicrosoftEdge-Extensions > extension-getting-started-part1. Исходный код обновлен с манифеста версии 2 до манифеста версии 3.
Шаг 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
илиJPEG
ICO
. - Рекомендуется использовать изображения с размерами 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
файл, который будет запущен при запуске расширения пользователем. Создайте HTML-файл popup.html
в каталоге с именем popup
. Когда пользователи выбирают значок для запуска расширения, 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
разделе browser_action
(в манифесте версии 2) или в action
(в манифесте версии 3), как показано в следующем коде:
{
"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"
}
}
Дальнейшие действия
Это все, что нужно для разработки рабочего расширения. Теперь перейдите к загрузке неопубликованных приложений и протестируйте расширение. Дополнительные сведения см. в разделе Загрузка неопубликованного расширения.