Расширения для браузеров — Расширение DevTools

В сегодняшней статье мы рассмотрим создание расширения Chrome dev tools.

Это будет базовая установка. На данный момент это еще ничего не делает. Она просто показывает, как мы можем внедрить что-то в dev tools.

Результат будет выглядеть следующим образом:

Создание расширения Chrome DevTools

Чтобы создать расширение, создайте новую папку devtools-extension и откройте ее в своем любимом редакторе.

Начните с добавления мозгов операции, файла под названием manifest.json.

{
  "name": "DevTools extension",
  "version": "1.0",
  "manifest_version": 3,
  "devtools_page": "devtools.html"
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Это все, что нужно для базового расширения dev tools. Наиболее важной частью здесь является devtools_page, который определяет, какую страницу он должен внедрить.

Давайте добавим и эту базовую основу.

<!DOCTYPE html>
<html>
  <head>
    <script src="/devtools.js"></script>
  </head>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Да, мы будем использовать его только для инъекции JavaScript-файла. Этот файл, в свою очередь, будет источником добавления меню инструментов разработчика.

chrome.devtools.panels.create('DDT', null, '/panel.html', null);
Вход в полноэкранный режим Выход из полноэкранного режима

Опции в этой функции создания панели следующие:

  • Имя
  • Иконка (необязательно)
  • HTML-файл
  • функция (при создании панели вызывается эта функция)

Поскольку мы хотим отображать только то, что нас устраивает, мы можем продолжить и добавить этот файл panel.html.

<html>
  <head></head>
  <body>
    <h1>Basic devtools panel</h1>
  </body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

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

Подробнее о тестировании расширений браузера

После этого перейдите на любой произвольный сайт, и вы должны увидеть ваше расширение в дополнительных инструментах.

Вы также можете найти этот проект на GitHub.

Спасибо, что прочитали, и давайте общаться!

Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь на Facebook или Twitter.

Оцените статью
devanswers.ru
Добавить комментарий