Руководство по созданию расширения, часть 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или JPEGICO .
  • Рекомендуется использовать изображения с размерами 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"
    }
}

Дальнейшие действия

Это все, что нужно для разработки рабочего расширения. Теперь перейдите к загрузке неопубликованных приложений и протестируйте расширение. Дополнительные сведения см. в разделе Загрузка неопубликованного расширения.