Рекомендации по проектированию для расширений Microsoft Edge

Примечание

Эта документация предназначена для расширений устаревшей версии Microsoft Edge. Сведения о новых Microsoft EDGE можно найти в разделе расширения Microsoft EDGE (Chromium).

Важно!

Новая программа Microsoft EDGE теперь открыта для приема расширений на основе Chromium для новой Microsoft Edge \ (V77 или более поздней версии). Если вы хотите отправить новое расширение, посетите веб-сайт публикации надстроек Microsoft EDGE (Chromium) , чтобы узнать о процессе отправки.

Благодаря этому объявлению Корпорация Майкрософт больше не принимает новые расширения для старой версии Microsoft Edge. Если вы владеете расширением для старой версии, начните процесс переноса расширения на новый Microsoft Edge. Новый Microsoft Edge основан на Chromium, поэтому расширения, разработанные для старой версии Microsoft EDGE, не работают с новой версией.

На следующей странице содержатся различные аспекты проектирования и поведение пользовательского интерфейса, которые следует принимать во время создания расширений Microsoft Edge.

Значки

С помощью векторного рисунка вы должны сделать значки расширения. Чтобы упаковать расширение, вы должны создать несколько разных размеров вашего значка и еще три дополнительных размера. Расширения Microsoft EDGE не поддерживают значки в формате SVG.

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

Несмотря на то, что поддерживается любой формат изображения WebKit, рекомендуется использовать значки PNG для поддержки прозрачности.

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

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

Расширение должно иметь значок действия браузера или действия страницы. При использовании метода browserAction. setIcon или pageAction. setIcon можно изменить значки действий со страницами и действиями в браузере.

Действие браузера

Предпочтительные размеры для значков действий браузера и действия страницы:, 20px 25px 30px и 40px . Другие поддерживаемые размеры включают 19px в себя, 35px и 38px .

В следующем фрагменте файла manifest. JSON показан стандарт и значок действия браузера High Definition, который задается с помощью ключа browser_action . Тот же синтаксис применяется для ключа page_action .

"browser_action": {
    "default_icon": {
        "20": "images/icon_20.png",
        "40": "images/icon_40.png"
    },
    "default_title": "Fetch page info",
    "default_popup": "popup.html"
}

Если действие браузера было установлено с помощью расширения, оно появляется либо в меню действия после выбора команды Дополнительно (...), либо справа от адресной строки, если пользователь отключил кнопку Показать рядом с адресной строкой .

Действие браузера в меню действие

Действие браузера в меню "действие" :::image-end:::

Действие браузера

Действие браузера :::image-end:::

Действие страницы

Ключ page_action имеет тот же синтаксис МАНИФЕСТа JSON, что и ключ browser_action . Действие страницы также имеет те же требования к размеру значка, что и действие браузера.

Если в файле manifest. JSON задано действие Page, оно отображается в адресной строке всякий раз, когда используется метод pageAction. Show .

Действие страницы

Действие страницы

Пользовательский интерфейс управления

Когда пользователь переходит на панель расширений, переходя к меню Дополнительно (...) , и выбирая расширения, рядом с названием расширения отображается значок.

Вы должны указать следующие размеры значков.

Раздел Сведения
48px Значок стандартного разрешения на экран.
128px Значок для дисплеев с высоким разрешением.
176px Значок для отображения еще более высокое разрешение экрана.
"icons": {
    "48": "images/icon_48.png",
    "128": "images/icon_128.png",
    "176": "images/icon_176.png"
},

Пользовательский интерфейс управления

Пользовательский интерфейс управления

Значки для упаковки

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

Size Сведения
44px Используется в пользовательском интерфейсе Windows \ (список приложений , > приложениясистемы > & функций).
50px Требования к пакетированию (не отображаются в любом месте).
150px Используется в качестве значка для Microsoft Store.

Чтобы узнать, где находятся эти значки, просмотрите руководство по упаковке или руководство по упаковке ManifoldJS . Это зависит от того, какой метод упаковки выбран.

Значок Microsoft Store

Если у значка 150px в Microsoft Store есть прозрачный фон, цвет элемента на устройстве пользователя отображается в качестве цвета фона значка.

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

Цвет контрастные в Windows

Цвет "контрастные" в Windows :::image-end:::

Автоматически выбираемый цвет фона

Автоматически выбираемый цвет фона :::image-end:::

Если вы хотите выбрать собственный цвет фона для Microsoft Store, вы должны сделать фон непрозрачным.

Примечание

Отправка расширения Microsoft EDGE в Microsoft Store в настоящее время ограничена возможностями. Свяжитесь с нами с помощью ваших запросов на магазин Microsoft Store, и ваш запрос рассматривается для будущего обновления.