Что мы делаем в сети. Альтернативная версия

в 15:02, , рубрики: chrome, extension, opera, браузеры, метки: , ,
Time Counter

image
Итак, прошу любить и жаловать — Time Counter. Это расширение для браузера, которое собирает статистику о проведенном, в интернете, времени. Я не буду тут писать громких и пафосных слов, о том какое это замечательное изделие. Степень его «замечательности» каждый определит для себя сам, я лишь опишу основные моменты его работы.

Предисловие

Сразу хочу сказать, что изначально я не собирался постить на Хабре этот материал. Мне казалось моя работы слишком незначительна и будет не интересна тутошней публике. Но, после прочтения недавнего поста в блоге Opera Software, я понял что был не прав.

Идея создания

Идея создания появилась после прочтения на Хабре поста о timeStats. Мне тогда понравилась это, и я решил сделать аналог для «самого лучшего браузера во вселенной» — opera.

Установка и использование

При установке расширения, на панели появляется новый бэйдж, с подписью 0:00. Эта подпись imageпоказывает суточную продолжительность нахождения на данном домене. Соответственно со временем это значение будет меняться.

На данный момент расширение может собирать несколько видом статистики:

  • Общую
  • Дневную
  • Пользовательский шаблон (об этом чуть ниже)

Общая и дневная статистика

image
Я думаю тут все понятно. Таймером отсчитываем время нахождения на сайте и записываем в память. Но моя реализация подсчета времени немного отличается от «конкурентов». Расширение отсчитывает не каждую секунду, а каждые пять секунд, причем в памяти браузера это сохраняется, только если вы провели на сайте больше одной минуты за сутки. С одной стороны такая реализация дает погрешность на статистику. Можно такими «короткими» посещениями набрать несколько минут, а в статистике они не отразятся. Но с другой стороны я не вижу необходимости записывать каждую секунду. В итоге весь этот «мусор» начал бы влиять на скорость работы браузера. Я выбрал скорость, в ущерб точности. Позже я еще поработают над этим.

Пользовательский шаблон

Это довольно эксклюзивный функционал, который я не увидел ни у кого. Оригинальная идея принадлежит пользователю operafan.net Dither, за что ему большое спасибо. Смысл заключается в том, что человек при желании может задать свой шаблон, по которому будет собираться отдельная статистика.

К примеру: вам вдруг стало интересно сколько времени вы тратите на тот или иной блог на Хабре. Для этого, пользуясь RegExp, мы создаем отдельный шаблон. И теперь, помимо дневной и общей, собирается отдельная статистика по блогам Хабра.
image
*эта статистика собиралась до перемен на хабре. Теперь, к сожалению, собрать такую статистику наверное не получится.

Графики

Всю собранную информацию можно увидеть на наглядных графиках. График общей статистики и за текущий день находится во всплывающем окне, а более подробная информация есть на «дополнительной» странице. Там, помимо круговых диаграмм, можно посмотреть график посещения конкретного сайта.
image
*Кнопочка сверху справа дает возможность выбрать период.

Настройки

Расширение имеет несколько несложных настроек. Они все содержатся на отдельной странице. Есть возможность:

  • задать «пользовательский шаблон».
  • добавить или удалить домены, статистика по которым будет собираться с учетом трех уровней(по умолчанию она собирается с учетом двух уровней домена).
  • Сбросить все данные. С защитой от «дурака»(Я сам как то запарился и сбросил все случайно).

image

Несколько фактов
  • На круговой диаграмме отображаются не все сайты, а только те, которые занимают больше 1% от общего времени. Остальные помещаются в пункт «прочее».
  • Все IP-адреса считаются как LAN.
  • Графики общей и дневной статистики «кликабельны». При нажатии мышкой, в новой вкладе открывается выбранный сайт.
  • Все графики сделаны с использованием библиотеки highcharts.

Спасибо за внимание

Тех, кто дочитал до конца, благодарю за внимание. Расширение доступно для Opera, но буквально на днях я потрировал его и на Chrome.

Автор: kos1nus


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js