Spec-Zone.ru › Web Extensions

Стили браузера

Определённые компоненты пользовательского интерфейса — браузерные и страничные действия поп-упа, боксы и страницы настроек — задаются расширением в основном одинаковым образом:

  1. создайте HTML-файл, определяющий структуру элемента пользовательского интерфейса
  2. добавьте ключ manifest.json (browser_action, page_action, sidebar_action или options_ui), указывающий на этот HTML-файл.

Одна из задач этого подхода — стилизация элемента таким образом, чтобы он соответствовал собственному стилю браузера. Для этого ключи manifest.json включают дополнительное необязательное свойство: browser_style. Если оно включено и установлено в значение true, ваш документ получит один или несколько дополнительных таблиц стилей, которые помогут ему выглядеть согласованно с пользовательским интерфейсом браузера и другими расширениями, использующими свойство browser_style.

При рассмотрении использования browser_style: true, необходимо протестировать ваше расширение с различными темами (встроенными или из AMO), чтобы убедиться, что пользовательский интерфейс расширения ведет себя так, как ожидается.

Предупреждение: Когда browser_style: true включено в манифесте веб-расширения, выделение текста в пользовательском интерфейсе расширения отключено, за исключением элементов управления вводом. Если это вызовет проблему, включите browser_style:false вместо этого.

Примечание: Google Chrome и Opera используют chrome_style вместо browser_style, поэтому, если вы хотите поддерживать их, вам нужно добавить оба ключа.

В Firefox таблицу стилей можно увидеть по адресу chrome://browser/content/extension.css. Дополнительная таблица стилей по адресу chrome://browser/content/extension-mac.css также включена в macOS.

Большинство стилей применяются автоматически, но для некоторых элементов необходимо добавить нестандартный класс browser-style, чтобы получить их стили, как подробно описано в таблице ниже:

Элемент Пример
<button> 
<button class="browser-style">Click me</button>

<select>

 
<select class="browser-style" name="select">
  <option value="value1">Value 1</option>
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>
<textarea> 
<textarea class="browser-style">Write here</textarea>
Родитель <input> 
<div class="browser-style">
  <input type="radio" id="op1" name="choices" value="op1"/>
  <label for="op1">Option 1</label>
<input type="radio" id="op2" name="choices" value="op2"/>
<label for="op2">Option 2</label>
</div>

Примечание: См. отчёт об ошибке Firefox 1465256 для удаления этого ненужного требования.

Совместимость с браузерами

Рабочий стол Мобильные устройства
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet
Browser_styles 40 79 48 ? 27 14 ? ? 57 ? 15 ?
browser_style 40 79 55 ? 27 Нет ? ? 57 ? Нет ?
open_in_tab 40 79 48 ?
НетСтраницы настроек всегда открываются в новой вкладке браузера.
НетСтраницы настроек всегда открываются в новой вкладке браузера.
 ? ? 57 ?
НетСтраницы настроек всегда открываются в новой вкладке браузера.
 ?
page 40 79 48 ? 27 14 ? ? 57 ? 15 ?
Рабочий стол Мобильные устройства
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet
Browser_styles Нет Нет 54 ? 30 Нет ? ? Нет ? Нет ?
browser_style Нет Нет 55 ? Нет Нет ? ? Нет ? Нет ?
default_icon Нет Нет 54 ?
30Иконки SVG не поддерживаются.
 Нет ? ? Нет ? Нет ?
default_panel Нет Нет 54 ? 30 Нет ? ? Нет ? Нет ?
default_title Нет Нет 54 ? 30 Нет ? ? Нет ? Нет ?
open_at_install Нет Нет 62 ? Нет Нет ? ? Нет ? Нет ?
Рабочий стол Мобильные устройства
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet
Browser_styles
Да["С Chrome 49 действия на странице отображаются в панели инструментов, а не в адресной строке.", "Если расширение определяет действие на странице, ему запрещено определять действие в браузере."]
 14 48 ?
ДаЕсли расширение определяет действие на странице, ему запрещено определять действие в браузере.
14Если расширение определяет действие на странице, ему запрещено определять действие в браузере.
 ? ? Да ?
15Если расширение определяет действие на странице, ему запрещено определять действие в браузере.
 ?
browser_style Нет Нет 48 ? Нет Нет ? ? Нет ? Нет ?
default_icon
ДаИконки SVG не поддерживаются.
14["Иконки SVG не поддерживаются.", "'default_icon' должен быть объектом со явными размерами."]
 48 ?
ДаИконки SVG не поддерживаются.
14Иконки SVG не поддерживаются. Серые изображения будут обрабатываться как шаблоны и обрабатываться с использованием системного цвета акцента и системного внешнего вида.
 ? ? Да ?
15Иконки SVG не поддерживаются. Серые изображения будут обрабатываться как шаблоны и обрабатываться с использованием системного цвета акцента и системного внешнего вида.
 ?
default_popup Да 14 48 ? Да 14 ? ? Да ? 15 ?
default_title Да 14 48 ? Да 14 ? ? Да ? 15 ?
hide_matches Нет Нет 59 ? Нет Нет ? ? 59 ? Нет ?
pinned Нет Нет 64 ? Нет Нет ? ? Нет ? Нет ?
show_matches Нет Нет 59 ? Нет Нет ? ? 79 ? Нет ?
Рабочий стол Мобильные устройства
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet
Browser_styles
Да["Доступно только в Manifest V2.", "Если расширение определяет действие браузера, оно не должно определять действие страницы."]
14Доступно только в Manifest V2.
48Доступно только в Manifest V2.
 ?
Да["Доступно только в Manifest V2.", "Если расширение определяет действие браузера, оно не должно определять действие страницы."]
14["Доступно только в Manifest V2.", "Если расширение определяет действие браузера, оно не должно определять действие страницы."]
 ? ?
55Доступно только в Manifest V2.
 ?
15["Доступно только в Manifest V2.", "Если расширение определяет действие браузера, оно не должно определять действие страницы."]
 ?
browser_style Нет Нет 48 ? Нет Нет ? ? Нет ? Нет ?
default_area Нет Нет 54 ? Нет Нет ? ? Нет ? Нет ?
default_icon
ДаИконки SVG не поддерживаются.
14["Иконки SVG не поддерживаются.", "'default_icon' должен быть объектом с явными размерами."]
 48 ?
ДаИконки SVG не поддерживаются.
14Иконки SVG не поддерживаются. Серые изображения будут обрабатываться как шаблоны иконки с использованием системного акцента и внешнего вида.
 ? ? Нет ?
15Иконки SVG не поддерживаются. Серые изображения будут обрабатываться как шаблоны иконки с использованием системного акцента и внешнего вида.
 ?
default_popup Да 14 48 ? Да 14 ? ? 57 ? 15 ?
default_title Да 14 48 ? Да 14 ? ?
55Действия браузера представлены в виде пунктов меню, а заголовок — меткой пункта меню.
 ? 15 ?
theme_icons Нет Нет 56 ? Нет Нет ? ? Нет ? Нет ?
Рабочий стол Мобильные устройства
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet
Browser_styles 88 88 109 ? 74 15.4 ? ? 109 ? 15.4 ?
browser_style 88 88 109 ? 74 Нет ? ? Нет ? Нет ?
default_area 88 88 109 ? 74 Нет ? ? Нет ? Нет ?
default_icon
88Иконки SVG не поддерживаются.
88["Иконки SVG не поддерживаются.", "'default_icon' должен быть объектом с явными размерами."]
 109 ?
74Иконки SVG не поддерживаются.
15.4Иконки SVG не поддерживаются. Серые изображения будут обрабатываться как шаблоны иконки с использованием системного акцента и внешнего вида.
 ? ? Нет ?
15.4Иконки SVG не поддерживаются. Серые изображения будут обрабатываться как шаблоны иконки с использованием системного акцента и внешнего вида.
 ?
default_popup 88 88 109 ? 74 15.4 ? ? 109 ? 15.4 ?
default_title 88 88 109 ? 74 15.4 ? ?
109Действия браузера представлены в виде пунктов меню, а заголовок — меткой пункта меню.
 ? 15.4 ?
theme_icons 88 88 109 ? 74 Нет ? ? Нет ? Нет ?

webextensions.manifest.action

Таблицы BCD загружаются только в браузере

webextensions.manifest.browser_action

Таблицы BCD загружаются только в браузере

webextensions.manifest.page_action

Таблицы BCD загружаются только в браузере

webextensions.manifest.sidebar_action

Таблицы BCD загружаются только в браузере

webextensions.manifest.options_ui

Таблицы BCD загружаются только в браузере

Компоненты панели Firefox

Примечание: Эта функция нестандартна и работает только в Firefox.

Таблица стилей chrome://browser/content/extension.css также содержит стили для компонентов панели Firefox.

В старом руководстве по стилю Firefox описывается правильное использование.

Элемент Пример
Заголовок 
<header class="panel-section panel-section-header">
  <div class="icon-section-header"><img src="image.svg"/></div>
  <div class="text-section-header">Header</div>
</header>
Подвал 
<footer class="panel-section panel-section-footer">
  <button class="panel-section-footer-button">Cancel</button>
  <div class="panel-section-footer-separator"></div>
  <button class="panel-section-footer-button default">Confirm</button>
</footer>
Вкладки 
<div class="panel-section panel-section-tabs">
  <button class="panel-section-tabs-button selected">Tab</button>
  <div class="panel-section-tabs-separator"></div>
  <button class="panel-section-tabs-button">Tab</button>
  <div class="panel-section-tabs-separator"></div>
  <button class="panel-section-tabs-button">Tab</button>
</div>
Форма 
<div class="panel-section panel-section-formElements">
  <div class="panel-formElements-item">
    <label for="name01">Label:</label>
    <input type="text" value="Name" id="name01" />
  </div>
  <div class="panel-formElements-item">
    <label for="picker01">Label:</label>
    <select id="picker01">
      <option value="value1" selected="true">Dropdown</option>
      <option value="value2">List Item</option>
      <option value="value3">List Item</option>
    </select>
  </div>
  <div class="panel-formElements-item">
    <label for="placeholder01">Label:</label>
    <input type="text" placeholder="Placeholder" id="placeholder01" />
    <button name="expander" class="expander"></button>
  </div>
</div>
Меню 
<div class="panel-section panel-section-list">
  <div class="panel-list-item">
    <div class="icon"></div>
    <div class="text">List Item</div>
    <div class="text-shortcut">Ctrl-L</div>
  </div>
<div class="panel-list-item">
<div class="icon"></div>
<div class="text">List Item</div>
<div class="text-shortcut"></div>
</div>
<div class="panel-section-separator"></div>
<div class="panel-list-item disabled">
<div class="icon"></div>
<div class="text">Disabled List Item</div>
<div class="text-shortcut"></div>
</div>
<div class="panel-section-separator"></div>
<div class="panel-list-item">
<div class="icon"></div>
<div class="text">List Item</div>
<div class="text-shortcut"></div>
</div>
<div class="panel-list-item">
<div class="icon"></div>
<div class="text">List Item</div>
<div class="text-shortcut"></div>
</div>
</div>

Пример

HTML

<header class="panel-section panel-section-header">
  <div class="icon-section-header"><!-- An image goes here. --></div>
  <div class="text-section-header">Header</div>
</header>

<div class="panel-section panel-section-list">
  <div class="panel-list-item">
    <div class="icon"></div>
    <div class="text">List Item</div>
    <div class="text-shortcut">Ctrl-L</div>
  </div>

  <div class="panel-list-item">
    <div class="icon"></div>
    <div class="text">List Item</div>
    <div class="text-shortcut"></div>
  </div>

  <div class="panel-section-separator"></div>

  <div class="panel-list-item disabled">
    <div class="icon"></div>
    <div class="text">Disabled List Item</div>
    <div class="text-shortcut"></div>
  </div>

  <div class="panel-section-separator"></div>

  <div class="panel-list-item">
    <div class="icon"></div>
    <div class="text">List Item</div>
    <div class="text-shortcut"></div>
  </div>

  <div class="panel-list-item">
    <div class="icon"></div>
    <div class="text">List Item</div>
    <div class="text-shortcut"></div>
  </div>
</div>

<footer class="panel-section panel-section-footer">
  <button class="panel-section-footer-button">Cancel</button>
  <div class="panel-section-footer-separator"></div>
  <button class="panel-section-footer-button default">Confirm</button>
</footer>

Результат

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API