Просмотров: 34355

Расширение для сайта как сделать

Закрыть ... [X]

  • 12.06.2014
  • комментариев 10
  • Dimabiz

Привет всем! Давно хотел попробовать написать своё расширение для браузера, но как-то руки не доходили. И вот наконец-таки на днях у меня появилась идея и свободное время. Параллельно с созданием расширения я решил написать статью, в которой помимо основ разработки буду писать о проблемах, которые у меня возникли и пути их решения.
разработка расширений для Chrome

Введение

Я люблю инвестировать маленькие суммы денег во всякие инвестиционные программы, акции компаний и прочее. Пару месяцев назад я нашел довольно хорошую инвестиционную программу, средняя доходность которой составляет примерно 10% в месяц. Так вот на сайте этой инвестиционной программы 1 раз в месяц примерно в 10 числах публикуется информация о доходности за предыдущий месяц. Что мне не нравиться, так это то, что приходиться каждый день в начале месяца заходить на сайт и проверять информацию о доходности, мне захотелось автоматизировать это процесс и просто получать уведомления о том, когда появится нужная мне информация. Конечно, можно было просто подписаться на RSS-ленту новостей, но я усложнить и решил сделать расширение для Chrome, которое давно хотел попробовать написать. Расширение очень простое, его задача уведомлять вас о том какая доходность была в прошлом месяце, как только информация появляется на сайте, а также брать информацию с страницы инвестиционной программы и выводить доходность за прошлый месяц, среднюю доходность за месяц и среднюю годовую доходность с учетом реинвестирования.


Разработка

Итак, разрабатываются расширения для браузеров, в том числе и для Chrome, на HTML +JavaScript. Поэтому перед начало рекомендуется знать хотя бы основы этих языков, я как раз таки-таки только основы и знаю, ну может HTML побольше. Перед началом разработки нужно создать папку в которой будут храниться все файлы расширения (картинки, манифест, HTML, CSS и JS-файлы). После этого первым делом создается манифест – это файл с обязательным названием manifest.json, в котором содержится информация о вашем расширении. На примере своего, простенького манифеста объясню, что он содержит:

Name – название расширения. Version – версия вашего расширения. Manifest_version – версия манифеста, сейчас поддерживается только значение 2. Icons – здесь указываются названия картинок, которое будут выступать в качестве иконки вашего расширения, можно указать разные размеры, в моем случае я указал только иконку размера 128 на 128 пикселей. browser_action – здесь мы указываем, что наше расширение будет иметь иконку рядом с адресной строкой. В default_title указываем текст, который будет отображаться при наведении на иконку, в default_icon указываем название картинки, которая будет использоваться как иконка, а в default_popup мы указываем название html страницы, которая будет отображаться при клике на иконку расширения. Выглядит это примерно так в моем случае: QIP Shot - Screen 024Если же вам нужно, чтобы иконка выводилась в адресной строке, рядом с кнопкой избранное, то вместо browser_action вам необходимо написать page_action. После создание манифеста создаются сами HTML, CSS и JS-файлы. Есть один нюанс с которым я сразу же столкнулся, создавая HTML-страницу, которая отвечает за всплывающее окно (на картинке выше), мне нужно было разместить ссылку на страницу инвестиционной программы, сделал это как обычно, но ссылка не работала. Это связано с тем, что все ссылки, имеющиеся в файлах расширения, ищут страницу в папке с расширением и переходят на нее, если такой страницы нет, то ничего не происходит. Чтобы открыть ссылку в вкладке браузера, необходимо добавить специально событие и функцию на JavaScript.

Хранилище данных

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

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

Подробнее о работе с хранилищем можете почитать здесь.

Уведомления

C уведомлениями работать очень просто. Они сначала создаются, затем вызываются. Я на простеньком примере покажу как это делается и дам ссылку на более подробное описание работы с ними. Для начала нужно указать, что наше расширение будет работать с уведомлениями:

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

Подробнее о уведомлениях можно почитать здесь.

Event Page

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

Для реализации event page необходимо в манифесте добавить следующую информацию:

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

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

Выше приведен, так сказать скелет, на самом деле в месте, где будет ваше уведомление, будет не только оно, но и логика исходя из которой будет запускаться или не запускаться уведомление. Для примера у меня происходит парсинг страницы, ищется определенная информация и если она найдена, то только тогда уведомление показывается.

Более подробную информацию о event page можно почитать здесь.

Тестирование

Стоит немного написать о тестировании. Для тестирования расширений необходимо перейти в браузере Chrome на страницу Расширения, для этого перейдите по ссылке или в меню выберите Инструменты->Расширения. На странице ставим галочку в поле Режим разработчика, после чего с помощью появившейся кнопки Загрузить распакованное расширение выберите папку с вашим расширением. После этого ваше расширение будет загружено, если включено отображение иконки рядом с адресной строкой, то она будет отображаться на желтом фоне. После каждого изменения в коде, файлы необходимо сохранять и в браузере на странице Расширения нажимать на кнопку Обновить.


Публикация

Приложения для Chrome распространяются с специального интернет магазина. Для публикации приложений разработчик должен заплатить 5$. Сумма небольшая и платиться только один раз, а не каждый год как во многих магазинах приложений. Я оплатил с карты, никаких проблем с этим не возникло. QIP Shot - Screen 025
После оплаты можно приступить к отправке расширения, с этим вопросов не должно возникнуть, нужно будет подготовить картинки, скриншоты, описание и прочую информацию о расширении для публикации в магазине. После отправки всей необходимой информации расширении сразу же публикуется в магазине, обычно в магазинах приложений проходит процесс модерации, а здесь все быстро и не нужно ничего ждать.

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

ChromeWebStore_Badge_v2_340x96

Категория: Web-разработка


Источник: http://programmict.ru/delaem-rasshirenie-dlya-google-crome/


Поделись с друзьями



Рекомендуем посмотреть ещё:



Как сделать расширение для Google Chrome за 5 минут - Лайфхакер Крыша балкона на последнем этаже своими руками

Расширение для сайта как сделать Расширение для сайта как сделать Расширение для сайта как сделать Расширение для сайта как сделать Расширение для сайта как сделать Расширение для сайта как сделать Расширение для сайта как сделать

ШОКИРУЮЩИЕ НОВОСТИ