Блоги сайта

Привет всем! Давно хотел попробовать написать своё расширение для браузера, но как-то руки не доходили. И вот наконец-таки на днях у меня появилась идея и свободное время. Параллельно с созданием расширения я решил написать статью, в которой помимо основ разработки буду писать о проблемах, которые у меня возникли и пути их решения.
разработка расширений для Chrome
ВВЕДЕНИЕ
Я люблю инвестировать маленькие суммы денег во всякие инвестиционные программы, акции компаний и прочее. Пару месяцев назад я нашел довольно хорошую инвестиционную программу, средняя доходность которой составляет примерно 10% в месяц. Так вот на сайте этой инвестиционной программы 1 раз в месяц примерно в 10 числах публикуется информация о доходности за предыдущий месяц. Что мне не нравиться, так это то, что приходиться каждый день в начале месяца заходить на сайт и проверять информацию о доходности, мне захотелось автоматизировать это процесс и просто получать уведомления о том, когда появится нужная мне информация. Конечно, можно было просто подписаться на RSS-ленту новостей, но я усложнить и решил сделать расширение для Chrome, которое давно хотел попробовать написать. Расширение очень простое, его задача уведомлять вас о том какая доходность была в прошлом месяце, как только информация появляется на сайте, а также брать информацию с страницы инвестиционной программы и выводить доходность за прошлый месяц, среднюю доходность за месяц и среднюю годовую доходность с учетом реинвестирования.
РАЗРАБОТКА
Итак, разрабатываются расширения для браузеров, в том числе и для Chrome, на HTML +JavaScript. Поэтому перед начало рекомендуется знать хотя бы основы этих языков, я как раз таки-таки только основы и знаю, ну может HTML побольше. Перед началом разработки нужно создать папку в которой будут храниться все файлы расширения (картинки, манифест, HTML, CSS и JS-файлы). После этого первым делом создается манифест – это файл с обязательным названием manifest.json, в котором содержится информация о вашем расширении. На примере своего, простенького манифеста объясню, что он содержит:

{
  "name": "Статистика Index Top 20",
  "version": "0.0.0.1",
  "manifest_version": 2,
  "icons": {
    "128": "128.png"
  },
"browser_action": {
        "default_title": "Статистика Index Top 20",
        "default_icon" : "128.png",
        "default_popup": "popup.html"
        }
}

Name – название расширения. Version – версия вашего расширения. Manifest_version – версия манифеста, сейчас поддерживается только значение 2. Icons – здесь указываются названия картинок, которое будут выступать в качестве иконки вашего расширения, можно указать разные размеры, в моем случае я указал только иконку размера 128 на 128 пикселей. browser_action – здесь мы указываем, что наше расширение будет иметь иконку рядом с адресной строкой. В default_title указываем текст, который будет отображаться при наведении на иконку, в default_icon указываем название картинки, которая будет использоваться как иконка, а в default_popup мы указываем название html страницы, которая будет отображаться при клике на иконку расширения. Выглядит это примерно так в моем случае:

Если же вам нужно, чтобы иконка выводилась в адресной строке, рядом с кнопкой избранное, то вместо browser_action вам необходимо написать page_action. После создание манифеста создаются сами HTML, CSS и JS-файлы. Есть один нюанс с которым я сразу же столкнулся, создавая HTML-страницу, которая отвечает за всплывающее окно (на картинке выше), мне нужно было разместить ссылку на страницу инвестиционной программы, сделал это как обычно, но ссылка не работала. Это связано с тем, что все ссылки, имеющиеся в файлах расширения, ищут страницу в папке с расширением и переходят на нее, если такой страницы нет, то ничего не происходит. Чтобы открыть ссылку в вкладке браузера, необходимо добавить специально событие и функцию на JavaScript.

document.addEventListener('DOMContentLoaded', function () {
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        (function () {
            var ln = links[i];
            var location = ln.href;
            ln.onclick = function () {
                chrome.tabs.create({active: true, url: location});
            };
        })();
    }
});

ХРАНИЛИЩЕ ДАННЫХ
Мне понадобилось работать с хранилищем данных, чтобы при открытии окна расширения не ждать пока данные будут взяты с сайта. Работать с ним оказалось очень легко, для начала нужно указать в манифесте, что вам необходимо работать с хранилищем, делается это очень просто, путем добавления строчки “storage” в раздел permissions (разрешения):

"permissions": [
    "storage"
 ],

Затем необходимо записывать или считывать данные в JS коде. Для получения данных необходимо пользоваться методом chrome.storage.sync.get, а для записи chrome.storage.sync.set. Вот примеры использования:

chrome.storage.sync.get("month", function (obj) {
    if (obj.month!=null)
    {
    m = document.getElementById('Month');
    m.innerHTML += " "+obj.month; 
    }
    });

chrome.storage.sync.set({'year': year});

одробнее о работе с хранилищем можете почитать здесь.
УВЕДОМЛЕНИЯ
C уведомлениями работать очень просто. Они сначала создаются, затем вызываются. Я на простеньком примере покажу как это делается и дам ссылку на более подробное описание работы с ними. Для начала нужно указать, что наше расширение будет работать с уведомлениями:

"permissions": [
      /*Здесь ваши предыдущие разрешения*/ 
    "notifications"
 ],

После этого в JS-коде создаем и вызываем наше уведомление:

var notification = webkitNotifications.createNotification(
    'image.png', //название картинки, которая будет отображаться в уведолмнеии 
    "Заголовок", //заголовок уведомления
    'Описание'  //описание уведомления
    );
notification.show(); //отображение уведомления

EVENT PAGE
О уведомлениях я написал, но без фоновых задач эти самые уведомления мало кому будут полезны. Поэтому в процессе разработке я столкнулся с следующей задачей, мое расширение должно через определенный промежуток времени проверять информацию на сайте и если такая имеется выдавать уведомление. Начал читать информацию о фоновых задачах и нашел ссылку на страницу с информацией об event page. Отличие event page от обычных фоновых задач в том, что они экономят ресурсы компьютеров пользователей. Фоновая задачи постоянно работает и потребляет определенные ресурсы, а вот evnt page запускается только в необходимое вам время, выполняется и уничтожается, освобождая занимаемые ресурсы. Думаю приблизительно понятно, в конце дам ссылку на более подробное описание.
Для реализации event page необходимо в манифесте добавить следующую информацию:

2
3
4
5
6
"permissions": [
      /*Здесь ваши предыдущие разрешения*/ 
"background": {
    "scripts": ["jquery.js", "eventPage.js"], /*тут указываем название скриптов, которые буду выполняться*/ 
    "persistent": false /*здесь указываем false если наша фоновая задача будет являться event page*/
  },

разу хочу обратить внимание на то, что в разделе scripts указаны имена двух файлов, это нужно для того, чтобы использовать библиотеку jquery в файле eventPage.js, если это вам нужно.
Далее пишем код в файле eventPage.js, я покажу пример отображения уведомлений через определенное количество времени:

chrome.alarms.onAlarm.addListener(function(alarm) {
    if (alarm.name == 'noti') {
     //здесь будет код вашего уведомления
    }
});
 
//ниже мы указываем, что наша фоновая задача должна запускаться каждые [periodInMinutes] минут
chrome.alarms.create('noti', { 
    delayInMinutes: 0.1, //здесь указываем через сколько времени будет запускаться наша фоновая задача первый раз
    periodInMinutes: 15 //здесь указываем через сколько времени будет запускаться наша фоновая задача повторно
});

Выше приведен, так сказать скелет, на самом деле в месте, где будет ваше уведомление, будет не только оно, но и логика исходя из которой будет запускаться или не запускаться уведомление. Для примера у меня происходит парсинг страницы, ищется определенная информация и если она найдена, то только тогда уведомление показывается.
Более подробную информацию о event page можно почитать здесь.
ТЕСТИРОВАНИЕ
Стоит немного написать о тестировании. Для тестирования расширений необходимо перейти в браузере Chrome на страницу Расширения, для этого перейдите по ссылке или в меню выберите Инструменты->Расширения. На странице ставим галочку в поле Режим разработчика, после чего с помощью появившейся кнопки Загрузить распакованное расширение выберите папку с вашим расширением. После этого ваше расширение будет загружено, если включено отображение иконки рядом с адресной строкой, то она будет отображаться на желтом фоне. После каждого изменения в коде, файлы необходимо сохранять и в браузере на странице Расширения нажимать на кнопку Обновить.
ПУБЛИКАЦИЯ
Приложения для Chrome распространяются с специального интернет магазина. Для публикации приложений разработчик должен заплатить 5$. Сумма небольшая и платиться только один раз, а не каждый год как во многих магазинах приложений. Я оплатил с карты, никаких проблем с этим не возникло.

После оплаты можно приступить к отправке расширения, с этим вопросов не должно возникнуть, нужно будет подготовить картинки, скриншоты, описание и прочую информацию о расширении для публикации в магазине. После отправки всей необходимой информации расширении сразу же публикуется в магазине, обычно в магазинах приложений проходит процесс модерации, а здесь все быстро и не нужно ничего ждать.
Вот так вот я делал свое расширение, получил опыт и вспомнил JavaScript, которым давненько не пользовался. Для меня расширение будет еще и полезно, может быть и еще кому-то пригодиться, установить его можно кликнув по кнопке ниже (update: сервис под которое писалось расширение закрылся и расширение не функционирует):