Панели разработчика

Примечание: Эта функция доступна начиная с Firefox 54.

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

Simple example showing the addition of "My panel" to the Developer Tools tabs.

Настройка панели инструментов разработчика

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

Добавьте страницу инструментов разработчика, включив ключ devtools_page в файл manifest.json расширения и укажите расположение HTML-файла страницы в расширении:

"devtools_page": "devtools-page.html"

Со страницы инструментов разработчика вызовите скрипт, который добавит панель инструментов разработчика:

<body>
  <script src="devtools.js"></script>
</body>

В скрипте создайте панель инструментов разработчика, указав заголовок панели, значок и HTML-файл, предоставляющий содержимое панели:

function handleShown() {
  console.log("panel is being shown");
}

function handleHidden() {
  console.log("panel is being hidden");
}

browser.devtools.panels
  .create(
    "My Panel", // title
    "icons/star.png", // icon
    "devtools/panel/panel.html" // content
  )
  .then((newPanel) => {
    newPanel.onShown.addListener(handleShown);
    newPanel.onHidden.addListener(handleHidden);
  });

Теперь расширение может запускать код в просматриваемом окне, используя devtools.inspectedWindow.eval(), или вставлять скрипт содержимого через скрипт фонового процесса, передавая сообщение. Более подробную информацию об этом можно найти в разделе Расширение инструментов разработчика.

Дизайн панели разработчика

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

Значки

Подробную информацию о создании значков для использования с вашей панелью инструментов разработчика см. в разделе Иконография в документации Acorn Design System.

Примеры

В репозитории webextensions-examples на GitHub находится пример devtools-panels, который реализует панель инструментов разработчика.

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