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

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

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

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

Действия

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

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

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

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

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

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

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

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

Значки

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

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

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

Команды

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

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

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

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

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

Омнибокс

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

Рисунок 5 : Адресная строка браузера.

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

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

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

• История
• Новая вкладка
• Закладки

Рисунок 6 : Пример пользовательской страницы истории.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Уведомления

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

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

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

Темы

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

Рисунок 11 : Пример темы.

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

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

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

Доступность

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

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

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