Пример. Отображение изображения во всплывающем окне

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

Клонирование репозитория MicrosoftEdge-Extensions

Для клонирования репозитория GitHub можно использовать различные средства. Вы можете скачать выбранный каталог или клонировать весь репозиторий. Эти инструкции используют GitHub Desktop для клонирования репозитория и переключения на рабочую ветвь.

Чтобы клонировать репозиторий MicrosoftEdge-Extensions на локальный диск, выполните следующие действия:

1. Если это еще не сделано, установите GitHub Desktop: перейдите по адресу https://github.com/apps/desktopи нажмите кнопку Скачать .

2. Перейдите в раздел MicrosoftEdge-Extensions.

3. Нажмите кнопку Код и выберите Открыть с помощью GitHub Desktop.

   Откроется диалоговое окно с сообщением Этот сайт пытается открыть GitHubDesktop.exe.

4. Нажмите кнопку Открыть .

   Откроется GitHub Desktop с выбранным репозиторием MicrosoftEdge-Extensions в верхнем левом раскрывающемся списке.

   Или в GitHub Desktop откроется диалоговое окно Клонирование репозитория :

   

5. Укажите путь к локальному диску для размещения клонированного каталога репозитория; например: C:\Users\accountname\GitHub\.

6. Нажмите кнопку Клонировать .

   Создайте рабочую ветвь:

7. В GitHub Desktop убедитесь, что в левом верхнем углу рабочего стола GitHub текущий репозиторий — MicrosoftEdge-Extensions.

   В раскрывающемся списке Текущая ветвь указано main.

8. В раскрывающемся списке Текущая ветвь откройте вкладку Ветви и нажмите кнопку Создать ветвь .

   Откроется диалоговое окно Создание ветви .

9. В текстовом поле Имя введите имя ветви, например ext-sample-1, и нажмите кнопку Создать ветвь .

   В верхней средней и нижней левой части GitHub Desktop отображается текущая ветвь, например ext-sample-1.

Теперь вы можете изменять код в рабочей ветви, не изменяя код, который находится в ветви "main" репозитория. Позже может потребоваться переключиться на ветвь "main" или создать другую ветвь на основе ветви "main".

Локальная установка примера

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

1. В Microsoft Edge нажмите кнопку Расширения () рядом с адресной строкой, если этот значок отображается. Или выберите Параметры и другое (...) >Расширения. Откроется всплывающее окно Расширения :

   

2. Щелкните Управление расширениями. На новой вкладке откроется страница Управление расширениями :

   

3. Включите переключатель режим разработчика .

4. При первой установке расширения нажмите кнопку Загрузить неупакованный ( Откроется диалоговое окно Выбор каталога расширений.

5. Выберите каталог, содержащий исходные файлы расширения, например manifest.json, и нажмите кнопку Выбрать папку .

   Пример пути:

   C:\Users\myUsername\GitHub\MicrosoftEdge-Extensions\Extension samples\extension-getting-started-part1\part1\

   Расширение устанавливается в браузере, аналогично расширению, установленному из магазина:

   

Запуск приложения

1. Перейдите на веб-страницу, например приложение TODO, в новом окне или вкладке. Для этого примера этот шаг является необязательным и просто соответствует снимкам экрана. Для этого примера не требуется открывать веб-страницу.

2. В правом верхнем углу Microsoft Edge нажмите кнопку Расширения (). Или выберите Параметры и другое (...) >Расширения.

   Откроется всплывающее окно Расширения :

   

3. Щелкните значок или имя расширения (всплывающее окно изображения ДНЯ НАСА).

   Откроется расширение, а значок расширения добавляется рядом с адресной строкой и значком Расширения ( Расширение отображает popup.html, содержащее stars.jpeg, во всплывающем окне:

   

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

См. также:

• Загрузка неопубликованного расширения для его локальной установки и тестирования

Изучение примера

В следующих разделах вы изучите пример. После этого для разработки собственного расширения Microsoft Edge можно скопировать и изменить каталог примера, а также установить и протестировать полученное расширение.

Файлы и каталоги

Пример имеет следующую структуру каталогов:

Пример пути для примера: C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension samples\extension-getting-started-part1\part1\

Каталоги и файлы в каталоге \part1\ :

/icons/
   nasapod16x16.png
   nasapod32x32.png
   nasapod48x48.png
   nasapod128x128.png
/images/
   stars.jpeg
/popup/
   popup.html
manifest.json

• Каталог /icons/ содержит версии .png файла, который используется для представления расширения рядом с адресной строкой браузера.
• Каталог /images/ содержит stars.jpeg, который отображается во всплывающем окне расширения.
• Каталог /popup/ содержит popup.html, который определяет содержимое веб-страницы, отображаемое во всплывающем окне расширения.
• manifest.json содержит основные сведения о расширении.

Файл манифеста (manifest.json)

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

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"
  },
  "action": {
      "default_popup": "popup/popup.html"
  }
}

Значки для запуска расширения

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

При запуске расширения один из значков отображается на панели инструментов рядом с адресной строкой:

Чтобы закрыть расширение, щелкните значок расширения на панели инструментов или нажмите кнопку Расширения ().

Рекомендации по значкам:

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

Всплывающее диалоговое окно (popup.html)

popup.html в каталоге popup запускается при запуске расширения. Щелкнув значок для запуска расширения, этот файл отображается как модальное диалоговое окно.

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>

Всплывающее окно (popup.html) регистрируется как "default_popup" в manifest.json, в action разделе ключа:

manifest.json (часть)

{
    ...
    "action": {
        "default_popup": "popup/popup.html"
    }
}

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

Чтобы разработать собственное расширение Microsoft Edge, можно скопировать и изменить каталог примера, а также установить и протестировать полученное расширение.

После запуска и тестирования этого примера расширения можно перейти к разделу Пример: вставка изображения на веб-страницу, которая динамически вставляет JavaScript, выполняющийся как содержимое, на вкладке браузера.

См. также

• Загрузка неопубликованного расширения для его локальной установки и тестирования
• Пример. Вставка изображения на веб-страницу

GitHub:

• Репозиторий MicrosoftEdge-Extensions .
  • /part1/ — исходный код примера части 1.