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

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

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

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

Цель проекта

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

Объект

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

Предмет

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

Период

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

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

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

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

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

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

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

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

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

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 / 20

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

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

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

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

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

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

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

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

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

Аналог 1 — White Rabbit: Tab Timer

Всплывающее окно White Rabbit: Tab Timer
White Rabbit: Tab TimerРазработчик — iridiumIO · 5,0 ★ · Chrome Web Store

Бесплатное расширение для измерения времени, проведённого на отдельных вкладках. Интерфейс крайне простой: компактное всплывающее окно показывает лишь название, таймер текущей вкладки и две ссылки — View URL и Time Log.

Недостатки

  • нет графической визуализации статистики;
  • отсутствует функция лимитов времени;
  • ограниченные возможности кастомизации интерфейса.
KAITimer · Индивидуальный проект
9 / 20

Аналог 2 — Wasted Time Tracker

Окно настроек Wasted Time Tracker
Wasted Time TrackerРазработчик — Bumblebee Systems · 5,0 ★ · 361 пользователь

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

Недостатки

  • крайне ограниченная аналитика;
  • отсутствует полноценная визуализация данных;
  • устаревший, практически неоформленный интерфейс.
KAITimer · Индивидуальный проект
10 / 20

Аналог 3 — Tab Time Tracker

Всплывающее окно Tab Time Tracker
Tab Time TrackerРазработчик — Charlie Ewing · 4,3 ★ · 1 000 пользователей

Ведёт учёт времени по вкладкам и URL-адресам, разделяя активные вкладки и историю. Есть базовая смена темы оформления.

Недостатки

  • нельзя вручную задать список отслеживаемых сайтов;
  • нет полноценной визуализации статистики;
  • неудобный для оперативного анализа дизайн.
KAITimer · Индивидуальный проект
11 / 20

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

KAITimer
KAITimer

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

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

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

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

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

KAITimer/ ├── manifest.json # Manifest V3 ├── main.html # SPA-интерфейс ├── js/ │ ├── background.js # service worker │ └── 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

  • 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 · Индивидуальный проект
19 / 20
KAITimer

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

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

Chrome Web Store Firefox Add-ons