Описание
Пример расширения браузера для работы с DevTools, в примере используются: API chrome.devtools.panels, API chrome.devtools.panels.elements, API chrome.devtools.panels.sources.
Технологии
- JavaScript
- Chrome API
- Chrome DevTools
Установка
- Загрузить zip-архив репозитория или клонировать репозиторий
- Распаковать архив
- Открыть браузер Google Chrome и перейти в настройки расширений путем открытия в строке ввода url:
chrome://extensions/- В верхней правой части экрана включить радиобаттон: 'Режим разработчика'
- В верхней левой части экрана нажать кнопку 'Загружить распакованное расширение' и указать путь к папке '/extension' из п.2
Описание работы
Для демонстрации работы расширения необходимо:
- установить расширение;
- открыть в браузере инструменты разработчика и в них выбрать одну из панелей, описанных в следующем разделе
В примере создаются следующие панели DevTools
Пример создания вкладки: chrome.devtools.panels.create()
Пример создания вкладки: chrome.devtools.panels.elements.createSidebarPane()
Пример создания вкладки: chrome.devtools.panels.sources.createSidebarPane()
Дополнительно
Возможности по наполнению панелей данными:
- chrome.devtools.panels.create:
- setPage() - HTML-страница
- chrome.devtools.panels.elements и chrome.devtools.panels.sources:
- setPage() - HTML-страница
- setObject() - Json-объект (как статичный, так и как результат выполнения функции)
- setExpression() - результат выполнения переданного скрипта на странице приложения