Расширения Chrome — чрезвычайно полезные дополнительные инструменты для повседневного просмотра в личных или профессиональных целях. Удивительно, но сделать их намного проще, чем вы можете себе представить.

Расширения Chrome на самом деле состоят из HTML, CSS и JS. Вы даже можете изучить все приложения Node.js, чтобы создать их, но давайте не будем усложнять. Им также требуется файл манифеста JSON, описывающий ваше приложение и требуемые разрешения. Когда ваше расширение Chrome будет готово к работе, вы можете подать заявку в Интернет-магазин Chrome, чтобы развернуть расширение для всех.

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

Для выполнения этой задачи мы соберем теги веб-страницы, такие как ‹title› и ‹h1›, чтобы получить основные заголовки. Более того, мы будем использовать версию 3 манифеста, потому что, если вы планируете опубликовать свое расширение в Интернет-магазине Chrome, вы больше не сможете публиковать манифест версии 2.

Первый шаг: создание манифеста

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

Манифест довольно прост, он содержит основную информацию о вашем расширении. Вот что вы можете найти:

  • manifest_version, будет 3, чтобы заметить, что Google Chrome использует версию 3 (последнюю) расширений Chrome.
  • имя, просто введите имя вашего расширения, которое будет отображаемым именем.
  • версия, версия вашего расширения, вы можете поставить любую версию, которую пожелаете.
  • icons, это объект, содержащий путь к различным размерам вашего значка расширения, например, ниже в примере есть «16», указывающее, что это путь к 16-пиксельной версии значка.
  • background — это объект, который в основном объявляет путь к сервис-воркеру, если он требуется вашему расширению.
  • content_scripts — это массив объектов, содержащих пути сценариев, которые будут выполняться на реальной веб-странице, и он имеет доступ к DOM.
  • действие — это объект, в котором вы можете найти некоторые параметры по умолчанию, такие как страница вашего расширения по умолчанию, но не только.
  • разрешения — это массив строк, содержащих необходимые разрешения для использования вашего расширения.

Шаг второй: создание макета расширения

Как упоминалось ранее, расширения Chrome состоят из HTML, CSS и JS. Итак, мы можем просто создать файл HTML. Постараемся сделать его как можно меньше. Внутри мы видим, что есть тег ссылки на файл CSS и скрипт на Javascript, который нам понадобится, чтобы сделать наше расширение интерактивным. Здесь нет ничего особенного. Мы добавим атрибут id в div в качестве привязки для добавления нашего содержимого.

Давайте теперь добавим немного CSS, потому что мы инженеры, нам не нужен светлый режим, но мы хотим курсив, потому что мы не полные задроты.

Шаг третий: настройка нашего сценария содержания

Скрипт содержимого имеет доступ к DOM, поэтому мы можем получить из него данные. Наш сценарий контента будет ждать сообщения от нашего всплывающего окна, чтобы получить план и отправить его обратно. Как ни странно, для этого требуется сервис-воркер, даже если он пуст для связи. Итак, мы создаем пустой файл Javascript для нашего сервисного работника, который мы сопоставили в нашем манифесте. Мы назовем его background-service-worker.js.

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

Чтобы получить заголовок, мы используем самый простой способ сделать это с запросами документа, выбирая их тег и упорядочивая их в массиве. Затем для прослушивателя мы объявляем его с помощью API среды выполнения Chrome, он принимает функцию в качестве параметра с тремя аргументами, первый из которых является фактическим запросом, второй — информацией об отправителе, а последний — обратным вызовом для ответа на запрос. Выглядит достаточно просто, не так ли?

Шаг четвертый. Сценарий всплывающего окна

И последнее, но не менее важное в процессе сборки — сценарий всплывающего окна. То, что мы называем всплывающим сценарием, — это сценарий, связанный с всплывающим HTML-файлом, который появляется, когда вы нажимаете на значок расширения. Мы сделаем две функции. Один для вызова сценария содержимого для получения данных. Еще один для вывода полученных данных во всплывающее окно.

Наконец, нам также нужен слушатель, чтобы запустить весь процесс. Мы будем использовать событие DOMContentLoaded для запуска. Это сработает, когда вы нажмете на значок расширения, чтобы открыть расширение. Это откроет всплывающее окно.

Единственный код расширения Chrome, специально связанный с этим скриптом, — это использование API вкладок Chrome. Мы используем метод запроса, чтобы получить идентификатор текущей активной вкладки, а затем используем метод sendMessage, чтобы отправить ей сообщение, которое скрипт контента перехватит, и ответит через сервис-воркер с данными.

Шаг 5. Запустите расширение локально

Мы закончили строительство нашего расширения. Все, что осталось, это попробовать, потому что я не буду говорить о том, как опубликовать его в Интернет-магазине Google, поскольку Google написал довольно четкое руководство о том, как это сделать.

У вас должны быть все эти файлы вместе в каталоге. Значок представляет собой просто случайный PNG-файл размером 16x16 пикселей.

В браузере Google Chrome откройте новую вкладку и перейдите в раздел «chrome://extensions», затем активируйте режим разработчика в правом верхнем углу окна. Новые кнопки появятся в левом верхнем углу окна. Нажмите «Загрузить распакованное» и выберите каталог, содержащий все файлы вашего расширения.

И хорошая работа! Вы создали свое первое расширение для Google Chrome!

Вы также можете найти полный код в моем репозитории GitHub по следующей ссылке: https://github.com/jmondaut/title-outliner.

Если вам понравилась статья или вы сочли ее полезной, было бы любезно с вашей стороны поддержать меня, подписавшись на меня здесь (Джонатан Мондо). Очень скоро появятся новые статьи!