Всем привет! Меня зовут Даниил, я frontend-разработчик компании Creative. Сегодня хочу поделиться с вами личным опытом по созданию расширения Chrome для трекера задач.
У нас в компании каждый разработчик постоянно фиксирует время, затраченное на выполнение той или иной задачи, или, как мы говорим, трекает. Для этого используем приложение, которое разработали сами: через него можно создавать задачи, изменять промежутки времени и смотреть, сколько ты сегодня отработал.
Но заходить на страницу приложения во время созвона с клиентом или старта новой задачи не всегда удобно. Вот я и задумался: почему бы не сделать расширение для браузера, которое будет всегда под рукой и, более того, – будет интегрировано в ту или иную страницу (например, jira для старта задачи)? Это же здорово ускорит все рабочие процессы и сэкономит кучу нервных клеток у моих коллег :)
Я прикинул задачи, которые хотелось решить при создании расширения и выделил три основных пункта:
- Ускорить трекинг времени
Облегчить взаимодействие с приложением трекера
- Вынести часть функциональности по трекингу времени в меню браузера и на страницы, задействованные в работе разработчиков.
Немного теории и технологий
Любое расширение для браузера состоит из нескольких частей:
Manifest.json – файл, в котором описываются настройки для расширения (версия, права, название и тд.).
View – основная часть приложения (то, что отображается при клике на значок расширения в панели браузера).
Content Scripts – то, что будет работать на страницах, которые ты посещаешь в браузере (тут можно инжектировать свои компоненты и тд на страницу для взаимодействия с расширением).
Background (для новой версии манифеста Service Workers) – часть приложения, которая работает фоном и с помощью которой можно связывать view с content scripts.
Для создания расширения я решил использовать React, TypeScript, Redux и RTK (redux-toolkit).
Для разработки расширения необходимо создать файл manifest.json. В нём описываются все необходимые настройки. Пример манифест файла приведён ниже (илл. 1):
Основными полями для настройки являются manifest_version (версия манифеста, влияет на то, как будет работать расширение, и какие функции в нём можно будет использовать), background (скрипты, выполняющиеся в фоне браузера для расширения), permissions (права доступа для расширения), content_scripts (скрипты, работающие на страницах пользователя).
Что из этого получилось
После создания файла манифеста можно приступать к написанию самого приложения. Для расширения было написано одно приложение, которое инжектировалось на страницы + через него можно было взаимодействовать с основной частью расширения в панели расширений браузера. Вот как это выглядит (илл.2):
Также был реализован механизм взаимодействия с view и content scripts через background, куда были вынесены все запросы приложения и переключения активности расширения. Структура полученного приложения выглядит так (илл.3):
Расширение помогает упростить жизнь разработчика:
Создать новую задачу для трекинга.
Продолжить учёт времени по существующей задаче.
- Остановить выполняемую задачу.
Просмотреть общее время по задачам за весь день.
Расширение интегрируется на страницы Gitlab и Jira (интегрируется кнопка для запуска/остановки/продолжения задачи, также, если задача запущена, показывается общее время, затреканное по ней). Ниже представлен пример интеграции кнопки на странице Jira (илл. 4):
Выводы и мысли на будущее
На данный момент расширением пользуется вся наша команда разработки. Благодаря ему, я и другие разработчики экономят время при трекинге часов, отработанных по задачам. Основные аспекты, ради которых задумывалось расширение, были реализованы, однако есть простор для развития. Основное направление для этого – переход на 3 манифест (в которой background заменился на service workers). Также на данный момент интеграция проведена всего с двумя страницами, можно продолжить и добавить trello или другие часто используемые для ведения задач сервисы.
На этом всё, буду рад ответить на ваши вопросы в комментариях!