Поп-up окна

Поп-up окно — это диалоговое окно, связанное с кнопкой на панели инструментов или кнопкой в адресной строке. Эта страница описывает поп-up окна в целом, их настройку, отладку, изменение размера и дизайн, а также примеры использования.

Page action pop-up example with three options: kittens, puppies, and reset.

Когда пользователь нажимает на кнопку, поп-up окно отображается. Когда пользователь нажимает где-либо за пределами поп-up окна, оно закрывается. Поп-up окно можно закрыть программно, вызвав window.close() из скрипта, работающего в поп-up окне. Однако вы не можете открыть поп-up окно программно из JavaScript расширения; оно может быть открыто только в ответ на действие пользователя.

Вы можете определить сочетание клавиш для открытия поп-up окна, используя сочетания клавиш "_execute_browser_action" и "_execute_page_action" в манифесте версии 2 и "_execute_action" и, где поддерживается, "_execute_page_action" сочетания клавиш в манифесте версии 3. См. документацию по специальным сочетаниям клавиш в ключе манифеста commands.

Настройка поп-up окна

Поп-up окно задаётся как HTML-файл, который может включать CSS и JavaScript-файлы, как и обычная веб-страница. Однако, в отличие от обычной страницы, JavaScript может использовать все API расширений WebExtension, для которых у расширения есть разрешения.

Документ поп-up окна загружается каждый раз, когда поп-up окно отображается, и разгружается каждый раз, когда оно закрывается.

HTML-файл включается в расширение и задаётся как часть ключа browser_action или page_action ключом "default_popup" в манифесте manifest.json:

  "browser_action": {
    "default_icon": "icons/beasts-32.png",
    "default_title": "Beastify",
    "default_popup": "popup/choose_beast.html"
  }

Вы можете попросить браузер включить в вашем поп-up окне таблицу стилей, которая сделает его внешний вид согласованным с интерфейсом браузера. Для этого включите "browser_style": true в ключе browser_action или page_action.

Поп-up окна имеют политику безопасности контента, которая ограничивает источники, из которых они могут загружать ресурсы, и запрещает некоторые небезопасные практики, такие как использование eval(). Более подробную информацию об этом см. в разделе Политика безопасности контента.

Отладка поп-up окон

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

Изменение размера поп-up окна

Поп-up окна автоматически изменяют размер, чтобы вместить свой контент. Алгоритм этого может отличаться в разных браузерах.

В Firefox размер вычисляется непосредственно перед отображением поп-up окна и не более 10 раз в секунду после изменений DOM. Для документов строгого режима размер вычисляется на основе размера макета элемента <body>. Для документов в режиме несоблюдения стандартов это элемент <html>. Firefox вычисляет предпочтительную ширину содержимого этого элемента, перестраивает его до этой ширины, а затем изменяет размер так, чтобы не было вертикальной прокрутки. Он будет увеличиваться до размера 800x600 пикселей как максимум, если это поместится на экране пользователя. (До Firefox 60 это было только 680px.) Если пользователь переместил кнопку расширения в меню или она отображается в области переполнения панели инструментов, то поп-up окно отображается внутри панели меню и получает фиксированную ширину.

При установке размера поп-up окна width в CSS, вы должны задать его в элементе <body>, а не в элементе :root.

В Firefox Android 57 поп-up окно отображается как обычная страница в новой вкладке.

Дизайн поп-up окна

Подробную информацию о том, как спроектировать веб-страницу вашего поп-up окна так, чтобы она соответствовала стилю Firefox, см. в документации Acorn Design System.

Примеры

В репозитории webextensions-examples на GitHub есть пример beastify, который реализует действие браузера с поп-up окном.

© 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/Popups