События и обмен сообщениями в реальном времени в расширениях Chrome с помощью Simperium

Недавно у меня была возможность изучить разработку Chrome Extension. Сценарий был довольно прост, мне нужно было уведомить группу пользователей, когда кто-то из группы использовал веб-сайт. Расширение Chrome было очевидным выбором, и после небольшого количества документации я наткнулся на Simperium , сервис, который я мог использовать для отправки и получения данных в реальном времени в моем расширении.

В этой статье мы увидим, как просто интегрировать обмен сообщениями в реальном времени в расширение Chrome. Чтобы проиллюстрировать это, нашей конечной целью является расширение Chrome, которое будет отправлять обновления в реальном времени об открытых вкладках на отдельную страницу мониторинга.

Что такое Симпериум

Simperium — это хостинговый сервис, который просто обновляет подключенные клиенты в режиме реального времени с любыми данными, которые записаны в него или изменены. Он делает это эффективным способом, только отправляя данные, которые были изменены. Он может обрабатывать любые данные JSON и даже предоставляет онлайн-интерфейс для отслеживания любых изменений в них.

Начиная

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

Чтобы использовать Simperium, нам нужно будет создать приложение, поэтому нажмите « Добавить приложение» на боковой панели и назовите его как хотите.

На экране «Сводка приложения» вы найдете уникальный идентификатор приложения и ключ API по умолчанию .

Вы можете использовать ключ API для генерации токена доступа на лету, однако для целей данного руководства мы сгенерируем этот токен из интерфейса Simperium. Найдите вкладку « Обзор данных » на панели инструментов и нажмите « Создать токен» .

Это сгенерирует токен доступа, который мы можем использовать вместе с идентификатором APP для подключения к нашему приложению Simperium.

Посмотрим, как это работает!

Если вы похожи на меня и не можете дождаться, чтобы увидеть, как это работает, вам нужно создать простую тестовую страницу.

<!DOCTYPE html>
<html>
    <head>
 
        <title>My Simperium testpage</title>
        <script src=»http://code.jquery.com/jquery-latest.min.js» type=»text/javascript»></script>
        <script type=»text/javascript» src=»https://js.simperium.com/v0.1/» type=»text/javascript»></script>
        <script type=»text/javascript» src=»script.js» type=»text/javascript»></script>
        <link rel=»stylesheet» type=»text/css» href=»style.css»>
         
    </head>
    <body>
          
        <h2>My Simperium testpage</h2>
 
         <div class=»content»>
             <div class=»add_data»>
                <textarea placeholder=»Start typing here!»></textarea>
            </div>
            <div class=»view_data»>
                <h3>Your text will appear here:</h3>
                <div class=»data»></div>
            </div>
        </div>
 
    </body>
 
</html>

Чтобы все выглядело style.css , мы также добавим немного CSS, сохранив его как style.css :

/* Reset all styles */
 
html,body,h2,h3,p,textarea,div {
    margin:0px;
    padding:0px;
}
 
/* End Reset */
 
 
h2 {
    font-family:arial, sans-serif;
    text-align:center;
    padding-top:50px;
}
 
h3 {
    font-family:arial,sans-serif;
    margin-bottom:30px;
}
 
p {
    font-family:arial, sans-serif;
    font-size:14px;
    color:#666;
}
 
textarea {
    font-family:arial, sans-serif;
    font-size:14px;
    width:380px;
    height:200px;
}
 
.content {
    width:800px;
    margin:auto;
    margin-top:50px;
}
 
.add_data {
    float:left;
    width:380px;
    margin-right:20px;
}
 
.view_data {
    float:right;
    width:400px;
}

Теперь, как вы можете видеть, мы уже включили библиотеку Simperium Javascript в наш HTML, нам просто нужно инициализировать ее в нашем скрипте. Мы можем сделать это, создав новый файл в подпапке js с именем script.js и вставив следующий код:

var simperium = new Simperium(‘SIMPERIUM_APP_ID’, { token : ‘SIMPERIUM_ACCESS_TOKEN’});
var bucket = simperium.bucket(‘mybucket’);
 
bucket.start();
 
bucket.on(‘notify’, function(id, data) { // This event fires when data in the bucket is changed
    $(‘.data’).html(«<p>»+data.text+»</p>»);
});
 
$(document).ready(function() {
 
    $(«textarea»).on(‘input’, function() {
        value = $(this).val();
        bucket.update(«yourdata», {«text»: value});
        $(‘.data’).html(«<p>»+value+»</p>»);
    });
     
});

Вам придется заменить SIMPERIUM_APP_ID и SIMPERIUM_ACCESS_TOKEN учетными данными, которые вы ранее сгенерировали для своего приложения.

Чтобы проверить это, вы должны открыть как минимум два экземпляра нашего тестового HTML-файла в браузере, и вы должны увидеть, как они обновляют друг друга по мере ввода.

Функциональность действительно проста, мы инициализируем Simperium и создаем новое ведро . Ведро — это место для хранения наших предметов. Как только наш контейнер запущен, Simperium будет синхронизировать его, нам просто нужно использовать событие notify. Если мы хотим обновить корзину, мы используем функцию обновления. Это оно!

Это основное использование Simperium, теперь мы совместим это с расширением Chrome, чтобы создать что-то полезное!

Наше расширение Chrome

В этом уроке мы не расскажем об основах создания расширения Chrome, если вам нужно наверстать упущенное, прочитав статью «Разработка расширений Google Chrome», написанную Красимиром Цоневым.

Основная идея

Наши шаги будут состоять из следующего:

Инициализируйте Simperium в нашем Расширении.
Используйте Chrome Extension Events, чтобы получать уведомления при открытии, закрытии или изменении вкладки.
Обновите нашу корзину Simperium списком открытых вкладок.
Создайте отдельный HTML-файл для отслеживания открытых вкладок с помощью событий Simperium.

Давайте сразу перейдем к созданию базовой структуры нашего расширения, которая состоит из:

manifest.json — файл манифеста
background.js — Фоновый скрипт

Файл манифеста

Наш файл манифеста будет выглядеть довольно просто:

{
  «name»: «Live Report»,
  «version»: «1.0»,
  «description»: «Live reporting of your opened tabs»,
  «manifest_version»:2,
  «background»: {
    «persistent»: true,
    «scripts»: [«simperium.js», «background.js»]
  },
  «permissions»: [
    «webNavigation»,»tabs»
  ]
}

Вставьте этот код в пустой файл и сохраните его как manifest.json .

Как видите, нам нужно только загрузить библиотеку simperium и наш фоновый скрипт . Нам нужно установить для параметра persistent значение true, чтобы Chrome не выгружал эти файлы для экономии памяти.

Расширение будет использовать API chrome.webNavigation поэтому нам нужно установить разрешение webNavigation . Нам также нужно разрешение tabs чтобы иметь доступ к заголовку вкладок.

Фоновый скрипт

Создайте файл background.js и сохраните его рядом с manifest.json.

Это ядро нашего расширения, давайте пройдемся по нему шаг за шагом.

Перво-наперво, нам нужно инициализировать Simperium:

var simperium = new Simperium(‘SIMPERIUM_APP_ID’, { token : ‘SIMPERIUM_ACCESS_TOKEN’});
var data = simperium.bucket(‘tabs’);
 
data.start();

Не забудьте заменить SIMPERIUM_APP_ID и SIMPERIUM_ACCESS_TOKEN правильными значениями, которые вы создали ранее.

В этом случае мы создадим новую корзину под названием «вкладки» для хранения наших данных.

`chrome.webNavigation` и API `chrome.webNavigation`

Эти API содержат события, которые мы будем использовать, чтобы поймать их при открытии, закрытии или изменении вкладки.

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
 
});

chrome.tabs.onUpdated будет срабатывать при обновлении вкладки. Более конкретно, когда вы открываете новую вкладку или меняете ее URL.

chrome.tabs.onRemoved.addListener(function(tabId, removeInfo) {
 
});

chrome.tabs.onRemoved будет срабатывать при закрытии вкладки.

Эти два события, кажется, охватывают то, что нам нужно, однако оказывается, что chrome.tabs.onUpdated не chrome.tabs.onUpdated , когда вкладка обновляется новой страницей, которая находится в кэше браузера.

В качестве обходного пути мы можем использовать chrome.webNavigation.onTabReplaced .

chrome.webNavigation.onTabReplaced.addListener(function(e){
 
});

Согласно документации: «Запускается, когда содержимое вкладки заменяется другой (обычно предварительно отрендеренной) вкладкой».

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

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

Нашим решением является метод chrome.tabs.query .

chrome.tabs.query(queryInfo, function(tab){
 
});

Наша функция обратного вызова вернет массив со всеми открытыми вкладками. Мы также можем установить параметр queryInfo чтобы сузить результаты, но для целей этого урока мы оставим его пустым.

Собираем все вместе

Давайте посмотрим на наш окончательный код:

var simperium = new Simperium(‘SIMPERIUM_APP_ID’, { token : ‘SIMPERIUM_ACCESS_TOKEN’});
var data = simperium.bucket(‘tabs’);
 
data.start();
 
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
 
    chrome.tabs.query({}, function(tabs){
         
        updateTitles(tabs);
             
    });
 
});
 
chrome.tabs.onRemoved.addListener(function(tabId, removeInfo) {
 
    chrome.tabs.query({}, function(tabs){
         
        updateTitles(tabs);
             
    });
 
});
 
chrome.webNavigation.onTabReplaced.addListener(function(e){
  
    chrome.tabs.query({}, function(tabs){
         
        updateTitles(tabs);
             
    });
 
});
 
function updateTitles(tabs){
    var titles =[];
     
    var length = tabs.length;
 
    for (var i = 0; i < length; i++) {
         
        titles[i]= tabs[i].title;
             
    }
     
    data.update(«Tabs», {«Titles» : titles});
 
}

Мы используем упомянутые выше события, чтобы перехватить все события вкладок и запросить все открытые вкладки. Для простоты мы создали функцию updateTitles, которая будет проходить по нашему массиву tabs простым циклом и присваивать значение заголовка каждого элемента новому массиву.

На последнем шаге мы обновляем наш объект Simperium новым массивом.

Вы можете использовать вкладку « Обзор данных » в панели управления Simperium, чтобы проверить, правильно ли изменяются данные в вашей корзине, но мы также создадим действительно простую HTML-страницу для просмотра наших данных.

Это наш HTML:

<!DOCTYPE html>
<html>
    <head>
 
        <title>Tab viewer sample</title>
        <script src=»http://code.jquery.com/jquery-latest.min.js» type=»text/javascript»></script>
        <script type=»text/javascript» src=»https://js.simperium.com/v0.1/» type=»text/javascript»></script>
        <script type=»text/javascript» src=»script.js» type=»text/javascript»></script>
        <link rel=»stylesheet» type=»text/css» href=»style.css»>
         
    </head>
    <body>
          
        <h2>Tabs reported by Extension</h2>
 
         <div class=»tabs»>
            <ul>
            </ul>
        </div>
 
    </body>
 
</html>

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

/* Reset all styles */
 
html,body,h2,h3,p,textarea,div {
    margin:0px;
    padding:0px;
}
 
/* End Reset */
 
 
h2 {
    font-family:arial, sans-serif;
    text-align:center;
    padding-top:50px;
}
 
ul {
    list-style-type:none;
}
 
li {
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color:#eee;
    margin-bottom:3px;
    font-family: arial, sans-serif;
    padding: 10px;
    color: #333;
}
 
 
.tabs {
    width:800px;
    margin:auto;
    margin-top:50px;
}

Наконец, некоторые Javascript для извлечения данных из Simperium:

var simperium = new Simperium(‘SIMPERIUM_APP_ID’, { token : ‘SIMPERIUM_ACCESS_TOKEN’});
var data = simperium.bucket(‘tabs’);
 
data.start();
 
data.on(‘notify’, function(id, data) {
     
    $(«.tabs ul»).html(«»);
     
    var length = data.Titles.length;
     
    for (var i = 0; i < length; i++) {
         
         $( «<li>»+data.Titles[i]+»</li>» ).appendTo(«.tabs ul»);
             
    }
 
});

Мы просто используем событие notify Simperium для обновления наших данных в режиме реального времени. Мы генерируем теги <li> с заголовками внутри <ul> и все!

Тестирование нашего результата на самом деле очень просто. Если вы загрузите наше расширение в Chrome и откроете HTML-редактор вкладок, который мы только что создали, он покажет все ваши открытые вкладки. Теперь, если вы закроете или откроете вкладку в Chrome, наша программа просмотра HTML мгновенно обновится с новыми данными. Переход на новую страницу в любой открытой вкладке также будет зафиксирован расширением и показан на нашей странице просмотра. У нас было наше расширение и файл HTML на одной машине, очевидно, это работает с любой парой устройств, если у них есть подключение к интернету, и одно из них может запустить расширение.

Вывод

В этом уроке мы рассмотрели Simperium и связанные с вкладками события в Chrome. Как вы можете видеть, их довольно легко использовать вместе, просто не забудьте установить в своем файле манифеста постоянный флаг для фоновой страницы в значение true.

Есть много вариантов использования, которые приходят на ум! Установите расширение, которое мы создали дома, и загрузите средство просмотра HTML на сервер. Теперь вы можете просматривать открытые вкладки из любого места. Довольно аккуратно!

Эти технологии действительно делают наши приложения более удобными, и их интеграция на самом деле довольно проста.

Я надеюсь, вам понравилась эта статья, и я призываю вас оставить комментарий, если вы застряли или у вас есть какие-либо вопросы. Спасибо и веселитесь!

События и обмен сообщениями в реальном времени в расширениях Chrome с помощью Simperium

Что такое Симпериум

Начиная

Посмотрим, как это работает!

Наше расширение Chrome

Основная идея

Файл манифеста

Фоновый скрипт

`chrome.webNavigation` и API `chrome.webNavigation`

Собираем все вместе

Вывод

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC

События и обмен сообщениями в реальном времени в расширениях Chrome с помощью Simperium

Что такое Симпериум

Начиная

Посмотрим, как это работает!

Наше расширение Chrome

Основная идея

Файл манифеста

Фоновый скрипт

chrome.webNavigation и API chrome.webNavigation

Собираем все вместе

Вывод

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC

`chrome.webNavigation` и API `chrome.webNavigation`