Компоненты пользовательского интерфейса

Это каталог элементов пользовательского интерфейса, доступных в расширениях. Каждая запись содержит:

  • Изображение элемента (если применимо).
  • Описание для чего это нужно.
  • Сопутствующие элементы интерфейса (если применимо).
  • Ссылки на инструкции по реализации и примеры кода.

Эти элементы представляют собой различные способы вызова функций расширения. Вам не обязательно реализовывать их все. Фактически, в некоторых случаях использования ни один из них может не использоваться. Например, более короткая ссылка может воздействовать на отображаемый URL-адрес с помощью сочетания клавиш и программно помещать сокращенную ссылку в буфер обмена.

Действия

Действие — это то, что происходит, когда пользователь щелкает значок действия вашего расширения. Действие может либо вызвать функцию расширения с помощью Action API , либо открыть всплывающее окно , позволяющее пользователям вызывать несколько функций расширения. Сообщите пользователям, что делает действие, с помощью всплывающей подсказки .

Как закрепленное расширение, так и незакрепленное расширение.
Рис. 1. Закрепленные (слева) и незакрепленные (справа) расширения.

Чтобы научиться создавать действие, см. раздел «Реализация действия» или изучите примеры действий .

Значки действий

Для расширения расширения требуется хотя бы один значок. Пользователи щелкают значок, чтобы вызвать действие , независимо от того, вызывает ли это действие функцию расширения с использованием Action API или открывает всплывающее окно .

Значок расширения словаря Google.
Рисунок 2. Значок расширения словаря Google (красный).

Вы также можете добавить к значку метку, называемую здесь «значком», чтобы сообщать о таких вещах, как состояние расширения или о том, что действия требуются пользователем.

Чтобы научиться создавать действие, см. раздел «Реализация действия» или изучите примеры действий .

Значки

Значки — это фрагменты форматированного текста, размещаемые поверх значка действия для обозначения таких вещей, как состояние расширения или действия, необходимые пользователю. Вы можете установить текст значка, вызвав chrome.action.setBadgeText() , а цвет баннера, вызвав chrome.action.setBadgeBackgroundColor() .

Значок расширения без значка и со значком.
Рис. 3. Значок расширения без значка (слева) и со значком (справа).

Чтобы научиться создавать действие, см. раздел Реализация действия или образец «Пейте воду» .

Команды

Команды — это комбинации клавиш, которые вызывают функцию расширения. Определите комбинации клавиш в файле манифеста.json и реагируйте на них с помощью API команд . Чтобы научиться реализовывать команду, см. справочник по API или пример chrome.commands .

Контекстное меню

Контекстное меню появляется при альтернативном щелчке мыши (часто называемом щелчком правой кнопкой мыши). Определите контекстные меню с помощью API контекстных меню .

Вложенное контекстное меню.
Рис. 4. Контекстное меню и вложенное подменю.

Чтобы научиться реализовывать контекстное меню, ознакомьтесь с примерами контекстного меню .

Омнибокс

Взаимодействовать с пользователями можно с помощью омнибокса Chrome. Когда пользователь вводит ключевые слова, определенные расширением, в омнибокс, ваше расширение контролирует то, что пользователь видит в омнибоксе. Определите ключевые слова в манифесте.json и отвечайте на них с помощью API Omnibox .

Омнибокс браузера.
Рисунок 5. Омнибокс браузера.

Чтобы узнать, как переопределить омнибокс, см. раздел «Действия триггера из омнибокса» или краткий справочный пример API .

Переопределить страницы

Расширение может переопределить одну из этих встроенных страниц Chrome:

  • История
  • Новая вкладка
  • Закладки
Пример пользовательской страницы истории.
Рис. 6. Пример пользовательской страницы истории.

Чтобы научиться переопределять страницы Chrome, см. раздел Переопределение страниц Chrome или пример переопределения .

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

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

Пример всплывающего окна.
Рисунок 7 : Пример всплывающего окна.

Чтобы научиться создавать всплывающее окно, см. раздел «Добавление всплывающего окна» . Вы также можете скачать шаг по одному из примеров действий .

Боковые панели

Боковая панель позволяет пользователям вызывать функции расширения рядом с веб-страницами (см. изображение). Боковая панель может быть прикреплена к одной вкладке или ко всему окну. Боковая панель управляется с помощью Side Panel API .

Расширение словаря, определяющее слово
Рисунок 8 : Расширение словаря, определяющее слово «Расширения».

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

Подсказки

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

Пример подсказки для значка действия.
Рис. 9. Пример всплывающей подсказки для значка действия.

Чтобы научиться добавлять всплывающую подсказку, используйте член "default_title" ключа "action" файлов манифеста.

Инструменты разработчика

Вы можете добавить пользовательские панели (какие вкладки называются в DevTools) в DevTools с помощью DevTools Panels API . Другие API DevTools позволяют отслеживать окна и сетевой трафик . Вы также можете настроить панель записи DevTools. Собственная панель Chrome DevTools Lighthouse зародилась как расширение DevTools.

Уведомления

Публикуйте сообщения на панели задач пользователя с помощью API уведомлений расширений или API уведомлений веб-платформы.

Уведомление о расширении на Mac.
Рис. 10. Уведомление о расширении на Mac.

Чтобы научиться использовать уведомления, см. раздел Уведомление пользователей .

Темы

Тема — это особый вид расширения, которое меняет внешний вид браузера. Темы упаковываются как обычные расширения, но не содержат кода JavaScript или HTML.

Пример темы.
Рис. 11. Пример темы.

Чтобы научиться создавать темы, см. Что такое темы? .

Другие способы взаимодействия с пользователями

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

Доступность

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

Интернационализация

Говорите с пользователями на их родном языке. Научитесь интернационализировать интерфейс .