Как определить фоновые действия?

Question

Я довольно новичок в веб-разработке (html, css, js), поэтому мне нужна небольшая помощь в понимании того, как это сделать.

Что я пытаюсь сделать, так это то, что я хочу, чтобы у пользователя была открыта вкладка фона, и эта вкладка должна постоянно проверять любые действия, выполняемые пользователем (т. Е. Любые нажатия клавиш или движения мыши). Пара вопросов ..

1. было бы лучше, чтобы продолжить делать это как расширение хром, а не веб-сайта, и если да, то как бы я идти об этом?

2. Возможно ли обнаружить какие-либо действия пользователя с вкладки браузера, которая не открыта пользователем? Если да, то как мне это сделать? Код, который у меня есть до сих пор, заключается в том, что я обнаруживаю, что есть какой-либо нажатие клавиши, и если да, то он удалит все остальное с экрана и напишет «привет мир». Но этот код будет работать, только если у меня есть специальная вкладка.

   document.onkeypress=function(e){ 
   document.write("Hello World!"); 
   } 
   

3. Как определить, есть ли движение мыши вообще? Не должно быть какого-либо конкретного движения, это может быть просто любое движение.

Answer 1

Существует множество библиотек отслеживания активности пользователей, включая отслеживание событий Google Analytics и clicktale.

Если вам нужно разработать это самостоятельно, подумайте о создании библиотеки трекеров, которая находится на вашей кодовой базе. Библиотека могла использовать localstorage и файлы cookie для хранения данных о поездках пользователя и создания объекта JSON для отслеживания действий.

Чтобы привести пример, вы можете использовать раскрывающий модульный шаблон, который поможет вам вызвать функцию setter для установки объектов на основе действий пользователя и функции getter для возврата созданных объектов в бэкэнд для отслеживания.

var trackerLib = (function(){ 

    //set operations 
    _set = function(object_name, object){ 
    } 

    //get operations 
    _get = function(key){ 
    } 

    //return cached local object 
    _data = function(){ 
    } 

    //create page track/info objects when script loads 
    _init = function(){ 
    } 

    _init(); // 

    return { 
     set: _setValue, 
     get: _getValue, 
     data : _getData 
    } 
})();