Делаем расширение для Google Chrome

Привет всем! Давно хотел попробовать написать своё расширение для браузера, но как-то руки не доходили. И вот наконец-таки на днях у меня появилась идея и свободное время. Параллельно с созданием расширения я решил написать статью, в которой помимо основ разработки буду писать о проблемах, которые у меня возникли и пути их решения.
разработка расширений для 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-разработка
Понравилась статья? Поделись в социальных сетях:

  • Rasend Livejoy

    А можно на исходник манифеста посмотреть? А то что то он ругается на “background”: {
    “scripts”: [“jquery.js”, “eventPage.js”], /*тут указываем название скриптов, которые буду выполняться*/
    “persistent”: false /*здесь указываем false если наша фоновая задача будет являться event page*/
    },

    • http://programmict.ru/ Дмитрий

      да, вот мой манифест:

      {
      “name”: “Статистика Index Top 20”,
      “version”: “0.0.0.5”,
      “manifest_version”: 2,
      “icons”: {
      “128”: “128.png”
      },

      “browser_action”: {
      “default_title”: “Статистика Index Top 20”,
      “default_icon” : “128.png”,
      “default_popup”: “popup.html”
      },

      “background”: {
      “scripts”: [“jquery.js”, “eventPage.js”],
      “persistent”: false
      },

      “permissions”: [
      “http://forex-mmcis.ru/news/rss/”,
      “https://ru.forex-mmcis.com/*”,
      “storage”,
      “alarms”,
      “notifications”
      ],

      “web_accessible_resources”: [
      “128.png”
      ]
      }

  • Ilya Aganichev

    Ну как доходы? кинули мариупольцы всех… и эти Ваши $5 то же туда же. Ну и архивчик с расширением куда-нить приложить..

  • prohor237

    блин вот бы исходник посмотреть

  • Elena Kaminskaya

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

  • Дмитрий Брега

    Спасибо за пост. Но зачем же майнер встроил в свой блог??? А то я смотр. 100% CPU грузит.

    >http://programmict.ru/delaem-rasshirenie-dlya-google-crome//JSTAG_13%5B17c1c%5D%5B58%5D contains an intrusion tool Tool.BtcMine.1051

    • http://programmict.ru/ Дмитрий

      Ох, спасибо большое что сказали, вирус через какое-то расширение пробрался.

  • Вячеслав Почтовик

    Я таким пользуюсь https://slaq777.github.io/ много чего может