«Разработка браузерного расширения для отслеживания и анализа времени, проведённого на определённых веб-ресурсах»
ИСПо152Ардашев Максим Сергеевич
Мижева Ф. К.
Москва · 2026

Актуальность

Среднестатистический пользователь проводит более 6 часов в сутки в браузере, не контролируя структуру этого времени:

  • отсутствие контроля над тем, сколько времени уходит на соцсети, развлечения и учёбу;
  • проблема особенно остра для школьников и студентов, отвлекающихся на развлекательный контент;
  • потребность в инструменте, ведущем учёт времени в фоне и визуализирующем статистику;
  • необходимость скорректировать собственное цифровое поведение осознанно.
KAITimer · Индивидуальный проект
2 / 17

Цель проекта

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

Объект

Браузерное расширение как программный продукт для Google Chrome и Mozilla Firefox.

Предмет

Программные методы и технологии: JavaScript, Web Extensions API, Chrome Storage API.

Период

31.12.2025 — 10.03.2026. Теоретическая база — документация MDN и Chrome Developers.

KAITimer · Индивидуальный проект
3 / 17

Задачи проекта

1
Изучить архитектуру браузерных расширений и Web Extensions API
2
Провести анализ существующих аналогичных решений на рынке
3
Спроектировать структуру и интерфейс расширения
4
Реализовать сбор, хранение и визуализацию данных о времени на сайтах
5
Протестировать расширение и оценить результаты его работы
KAITimer · Индивидуальный проект
4 / 17

Архитектура браузерного расширения

manifest.json
метаданные · разрешения
background
service worker · состояние
content script
внедрение в DOM страниц
popup / options
интерфейс и настройки
chrome.tabschrome.storagechrome.windowschrome.alarmschrome.idle

Рисунок 1 — Архитектура браузерного расширения (взаимодействие через Message Passing API)

KAITimer · Индивидуальный проект
5 / 17

Технологии разработки

HTML

Структура интерфейса popup-окна и страницы настроек.

CSS

Custom properties, flexbox-разметка, анимации прогресс-баров.

JavaScript

Вся логика расширения. ES2020+, async/await.

WebExtensions API

Кроссбраузерная спецификация: Chrome, Firefox, Edge, Opera.

chrome.tabs — вкладки и URLchrome.storage.local — статистикаchrome.windows — фокус, idlechrome.alarms — запись
KAITimer · Индивидуальный проект
6 / 17

Методы сбора и анализа данных

Временны́е метки фиксируют начало визита; Idle Detection API приостанавливает таймер при простое > 60 сек; данные агрегируются по домену второго уровня. Инструмент должен корректно обрабатывать два типа поведения:

Критерий Сёрфер Геймер
Время в браузере / сутки 5–8 часов 2–4 часа
Характер активности Короткие сессии, частые переключения Длительные сессии на 1–2 доменах
Доменов в день 20–50 и более 3–10
Доля простоя (idle) Низкая Высокая — фоновое окно во время игры

Таблица 1 — Сравнение поведения пользователей типов «сёрфер» и «геймер»

KAITimer · Индивидуальный проект
7 / 17

Анализ существующих решений

Критерий White Rabbit Wasted Time Tab Time Tracker KAITimer
Выборочное отслеживание Нет Да Нет Да
Визуализация статистики Нет Нет Нет Круговая диаграмма
Кастомизация UI Нет Нет Только тема Тема + язык
Открытый код Нет Нет Нет Да
Браузеры Chromium Chromium Chromium Chromium + Firefox

Таблица 2 — Краткое сравнение существующих решений для отслеживания времени в браузере

KAITimer · Индивидуальный проект
8 / 17

Название и логотип

KAITimer
KAITimer

Название образовано приёмом телескопии — слиянием аббревиатуры КАИТ (Колледж Автоматизации и Информационных Технологий) и слова Timer. Общая буква «T» на стыке сливается в одну.

  • лаконичность — одно слово для иконки и магазина;
  • смысл: функция (Timer) + происхождение (КАИТ);
  • уникальность — нет аналогов в Chrome Web Store;
  • цветовая гамма повторяет фирменный градиент колледжа.

Рисунок 2 — Основной логотип расширения KAITimer (разработан в Figma)

KAITimer · Индивидуальный проект
9 / 17

Проектирование архитектуры KAITimer

KAITimer/ ├── manifest.json # Manifest V3 ├── main.html # SPA-интерфейс ├── js/ │ ├── background.js # service worker │ ├── content.js # опц. скрипт │ └── main.js # switchView() ├── css/style.css └── icons/ 16·32·48·128.png

Разделение ответственности

Каждый компонент выполняет строго определённую функцию — поддерживаемость и тестируемость кода.

Жизненный цикл

Service worker подписан на onActivated, onUpdated, onFocusChanged и ежесекундно обновляет счётчики.

Хранилище — JSON по домену

{ time, tracking, countInBackground, icon } + настройки темы и языка в chrome.storage.local.

Рисунок 3 — Схема компонентов и страниц расширения KAITimer

KAITimer · Индивидуальный проект
10 / 17

Пользовательский интерфейс

Главное окносчётчики · список сайтов
Site DetailsTotal Time · фоновый учёт
Статистикадиаграмма на Canvas 2D
Настройкитемы · язык · сведения

Рисунки 4–7 — Экраны интерфейса расширения KAITimer (минимализм, акцентный фиолетовый, светлая/тёмная темы)

KAITimer · Индивидуальный проект
11 / 17

Тестирование и оценка результатов

< 1%
погрешность измерений — ±3 сек на 5-минутную сессию
20
тестовых сессий со сравнением с ручным хронометражем
4 / 5
участников лучше осознали структуру своего времени
3 / 5
сообщили о реальном изменении поведения

Функциональное тестирование

Быстрое переключение вкладок, несколько окон, режим сна и пробуждение, работа с профилями. Критические ошибки устранены.

Пользовательское тестирование

5 добровольцев — студентов КАИТ №20 — в течение двух дней. Подтверждена практическая ценность продукта.

KAITimer · Индивидуальный проект
12 / 17

Публикация и отзывы пользователей

Отзывы
« Берём в гугл! »

Расширение опубликовано в Chrome Web Store и Firefox Add-ons, прошло автоматическую и ручную модерацию на обеих платформах.

5,0 / 5
средний рейтинг
Chrome
+ Firefox Add-ons
v1.0.2
публичный релиз

Рисунок 8 — Отзывы пользователей расширения KAITimer в магазинах

KAITimer · Индивидуальный проект
13 / 17

Оформление страниц в магазинах

Chrome Web Store
Chrome Web Store5,0 ★ · 4 отзыва · 5 пользователей
Firefox Add-ons
Firefox Add-onsопубликовано · отзывы накапливаются

Рисунки 9–10 — Страницы KAITimer в Chrome Web Store и Firefox Add-ons (промо-баннеры «Customize sites you track» и «Analyze statistics»)

KAITimer · Индивидуальный проект
14 / 17

Заключение

Поставленная цель достигнута: расширение KAITimer спроектировано, реализовано и доведено до публичного релиза. Обеспечено:

автоматическое отслеживание времени с фоновым подсчётом;
наглядная статистика — круговые диаграммы на базе Canvas;
локализация (RU / EN) и тёмная / светлая темы;
полная конфиденциальность — данные хранятся локально.

Перспективы: экспорт статистики в CSV, синхронизация между устройствами, публикация в Microsoft Edge Add-ons и Opera Add-ons.

KAITimer · Индивидуальный проект
15 / 17

Информационные источники

  • Mozilla Developer Network — официальная документация Web Extensions API;
  • Chrome Developers — Manifest V3, chrome.tabs / storage / alarms / windows / idle;
  • White Rabbit, Wasted Time Tracker, Tab Time Tracker — страницы в Chrome Web Store;
  • HTML Canvas 2D Context (W3C) и ECMAScript Language Specification (Ecma International);
  • ГОСТ 7.0.5–2008 и ГОСТ 7.1–2003 — правила оформления библиографических ссылок.
KAITimer · Индивидуальный проект
16 / 17
KAITimer

СПАСИБО ЗА ВНИМАНИЕ!

Ардашев Максим Сергеевич · группа ИСПо152 · КАИТ №20 · 2026