Поделиться через

Пример: всплываемая веб-страница в средстве просмотра рисунков

  • Статья

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

Расширение

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

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

Клонируйте репозиторий MicrosoftEdge-Extensions на локальный диск, а затем переключитесь на рабочую ветвь, как показано ниже.

  1. В командной строке введитеgit, чтобы проверка, установлен ли Git.

  2. Если это еще не сделано, скачайте Git и установите его.

  3. Если это еще не сделано, запустите командную строку, в которой установлен Git.

  4. Перейдите в каталог, в который вы хотите клонировать репозиторий MicrosoftEdge-Extensions . Например:

    cd C:/Users/localAccount/GitHub/

  5. В Microsoft Edge перейдите в репозиторий MicrosoftEdge-Extensions .

  6. Щелкните стрелку вниз справа от зеленой кнопки Код , а затем в разделе Клонировать с помощью веб-URL-адреса нажмите кнопку Копировать URL-адрес в буфер обмена рядом с элементом https://github.com/microsoft/MicrosoftEdge-Extensions.git.

  7. В окне командной строки введите команду:

    git clone https://github.com/microsoft/MicrosoftEdge-Extensions.git

    Каталог /MicrosoftEdge-Extensions/ добавляется в указанный каталог.

Создайте рабочую ветвь и переключитесь на нее

  1. Проверьте список каталогов:

    ls

    Указан /MicrosoftEdge-Extensions/ каталог.

  2. Переключитесь в новый каталог:

    cd MicrosoftEdge-Extensions

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

    git branch test

  4. Переключитесь на рабочую ветвь:

    git switch test

    Возвращает: Switched to branch 'test'

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

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

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

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

    Всплывающее окно

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

    Включение режима разработчика

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

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

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

    Пример пути:

    C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-viewer-popup-webpage

  6. Нажмите кнопку Выбрать папку .

    Откроется диалоговое окно Выбор каталога расширений.

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

    Страница установленных расширений с загруженным неопубликованным расширением

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

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

  2. Обновите веб-страницу. Иногда это требуется после перезагрузки расширения.

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

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

    Всплывающее окно

  4. Щелкните значок или имя расширения (всплывающей веб-странице средства просмотра рисунков).

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

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

  5. Нажмите кнопку расширения рядом с адресной строкой. Всплывающее окно закрывается.

См. также:

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

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

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

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

Пример пути для примера:

C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-viewer-popup-webpage

Каталоги и файлы в каталоге /picture-viewer-popup-webpage/ :

/icons/
   extension-icon16x16.png
   extension-icon32x32.png
   extension-icon48x48.png
   extension-icon128x128.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": "Picture viewer pop-up webpage",
  "version": "0.0.0.1",
  "manifest_version": 3,
  "description": "A browser extension that displays an image in a pop-up webpage.",
  "icons": {
      "16": "icons/extension-icon16x16.png",
      "32": "icons/extension-icon32x32.png",
      "48": "icons/extension-icon48x48.png",
      "128": "icons/extension-icon128x128.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>Picture viewer pop-up webpage</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: