Руководство, часть 1. Отображение изображения во всплывающем окне

  • Статья

Пример части 1. Отображение изображения во всплывающем окне — это простое статическое расширение без JavaScript, которое отображает stars.jpeg изображение на небольшой веб-странице во всплывающем окне на любой вкладке Microsoft Edge:

Простое работающее расширение

Этот тип расширения можно создать, выполнив следующие действия.

  1. Создайте файл manifest.json.
  2. Добавьте значки для запуска расширения.
  3. Откройте всплывающее диалоговое окно по умолчанию.

Попутно вы устанавливаете (или обновляете) и тестируете расширение.

Если вы хотите немедленно установить и запустить готовое расширение или просмотреть готовый код, выполните следующие действия:

  • Клонируйте репозиторий MicrosoftEdge-Extensions на локальный диск. Используйте каталог /extension-getting-started-part1/.
  • Скачайте исходный код из папки /part1/ репозитория MicrosoftEdge-Extensions.

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

Шаг 1. Создание файла manifest.json

Каждый пакет расширения должен иметь manifest.json файл в корневом каталоге. Манифест содержит сведения о расширении, версии пакета расширения, имени и описания расширения и т. д.

Все действия по написанию кода, описанные в этой статье, уже были выполнены в демонстрации части 1 в репозитории MicrosoftEdge-Extensions . Рекомендуется сначала клонировать репозиторий, установить и запустить демонстрацию части 1, прежде чем (или вместо) начать с пустого каталога, а затем вручную создать каталоги, создать файлы и вставить код в файлы.

Этот шаг уже выполнен в manifest.json в репозитории MicrosoftEdge-Extensions. Если вы хотите вручную создать расширение Part 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. Добавление значков для запуска расширения

Этот шаг уже был выполнен в демонстрации части 1 в репозитории MicrosoftEdge-Extensions . Если вы хотите вручную создать расширение Part 1, выполните следующие действия.

  1. icons Создайте каталог в проекте в том же каталоге, что и файл манифеста, чтобы сохранить файлы изображений значков. Значки используются в качестве фонового изображения для кнопки, которую пользователь нажимает для запуска расширения:

    Значок на панели инструментов для открытия расширения

    Для значков:

    • Мы рекомендуем использовать PNG формат, но можно также использовать BMPформаты , GIFили JPEGICO .
    • Рекомендуется использовать изображения с размерами 128 x 128 пикселей, размер которых при необходимости определяется браузером.

  2. Убедитесь, что каталоги проекта похожи на следующую структуру:

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

  3. .png Получите файлы из репозитория:

    • nasapod16x16.png
    • nasapod32x32.png
    • nasapod48x48.png
    • nasapod128x128.png

    Например, по отдельности скачайте файлы из папки /icons/ репозитория MicrosoftEdge-Extensions и поместите их в каталог /icons/ .

  4. Выведите список значков в 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. Открытие всплывающего диалогового окна по умолчанию

Этот шаг уже выполнен в popup.html в репозитории MicrosoftEdge-Extensions. Если вы хотите вручную создать расширение Part 1, выполните следующие действия.

Создайте HTML файл, который будет запускаться при запуске расширения пользователем. Когда пользователь щелкнет значок, чтобы запустить расширение, этот файл будет отображаться как модальное диалоговое окно.

  1. Создайте HTML-файл popup.html в каталоге с именем popup.

  2. Добавьте следующий код в 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>

  3. Добавьте файл stars.jpeg в папку images . Например, скачайте stars.jpeg из репозитория MicrosoftEdge-Extensions.

  4. Убедитесь, что каталоги проекта похожи на следующую структуру:

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

  5. Зарегистрируйте всплывающее окно в manifest.json разделе action, как показано ниже.

    {
    "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: