Расширение Chrome для трекера задач или как упростить жизнь разработчика

Всем привет! Меня зовут Даниил, я frontend-разработчик компании Creative. Сегодня хочу поделиться с вами личным опытом по созданию расширения Chrome для трекера задач.

У нас в компании каждый разработчик постоянно фиксирует время, затраченное на выполнение той или иной задачи, или, как мы говорим, трекает. Для этого используем приложение, которое разработали сами: через него можно создавать задачи, изменять промежутки времени и смотреть, сколько ты сегодня отработал.

Но заходить на страницу приложения во время созвона с клиентом или старта новой задачи не всегда удобно. Вот я и задумался: почему бы не сделать расширение для браузера, которое будет всегда под рукой и, более того, – будет интегрировано в ту или иную страницу (например, jira для старта задачи)? Это же здорово ускорит все рабочие процессы и сэкономит кучу нервных клеток у моих коллег :)

Я прикинул задачи, которые хотелось решить при создании расширения и выделил три основных пункта:

  • Ускорить трекинг времени
  • Облегчить взаимодействие с приложением трекера

  • Вынести часть функциональности по трекингу времени в меню браузера и на страницы, задействованные в работе разработчиков.

Немного теории и технологий

Любое расширение для браузера состоит из нескольких частей:

  • Manifest.json – файл, в котором описываются настройки для расширения (версия, права, название и тд.).

  • View – основная часть приложения (то, что отображается при клике на значок расширения в панели браузера).

  • Content Scripts – то, что будет работать на страницах, которые ты посещаешь в браузере (тут можно инжектировать свои компоненты и тд на страницу для взаимодействия с расширением).

  • Background (для новой версии манифеста Service Workers) – часть приложения, которая работает фоном и с помощью которой можно связывать view с content scripts.

Для создания расширения я решил использовать React, TypeScript, Redux и RTK (redux-toolkit).

Для разработки расширения необходимо создать файл manifest.json. В нём описываются все необходимые настройки. Пример манифест файла приведён ниже (илл. 1):

Иллюстрация 1

Основными полями для настройки являются manifest_version (версия манифеста, влияет на то, как будет работать расширение, и какие функции в нём можно будет использовать), background (скрипты, выполняющиеся в фоне браузера для расширения), permissions (права доступа для расширения), content_scripts (скрипты, работающие на страницах пользователя).

Что из этого получилось

После создания файла манифеста можно приступать к написанию самого приложения. Для расширения было написано одно приложение, которое инжектировалось на страницы + через него можно было взаимодействовать с основной частью расширения в панели расширений браузера. Вот как это выглядит (илл.2):

Иллюстрация 2

Также был реализован механизм взаимодействия с view и content scripts через background, куда были вынесены все запросы приложения и переключения активности расширения. Структура полученного приложения выглядит так (илл.3):

Иллюстрация 3

Расширение помогает упростить жизнь разработчика:

  • Создать новую задачу для трекинга.

  • Продолжить учёт времени по существующей задаче.

  • Остановить выполняемую задачу.
  • Просмотреть общее время по задачам за весь день.

Расширение интегрируется на страницы Gitlab и Jira (интегрируется кнопка для запуска/остановки/продолжения задачи, также, если задача запущена, показывается общее время, затреканное по ней). Ниже представлен пример интеграции кнопки на странице Jira (илл. 4):

Иллюстрация 4

Выводы и мысли на будущее

На данный момент расширением пользуется вся наша команда разработки. Благодаря ему, я и другие разработчики экономят время при трекинге часов, отработанных по задачам. Основные аспекты, ради которых задумывалось расширение, были реализованы, однако есть простор для развития. Основное направление для этого – переход на 3 манифест (в которой background заменился на service workers). Также на данный момент интеграция проведена всего с двумя страницами, можно продолжить и добавить trello или другие часто используемые для ведения задач сервисы.

На этом всё, буду рад ответить на ваши вопросы в комментариях!

0
Комментарии
Читать все 0 комментариев
null