Сейчас браузер – это неотъемлемая часть ПО любого компьютера. Он должен быть удобен, функционален и приятен в использования.
Для меня всем этим критериям соответствует Chrome от Google, но и его функциональности мне не всегда хватает. Именно для повышения функциональности и существуют расширения.
На https://chrome.google.com/webstore можно найти сотни расширений для любых нужд, но сделать что то самому куда приятнее.
В данной статье я опишу процесс создания простого расширения для браузера Google Chrome. Я постараюсь как можно короче и понятнее объяснить, как писать расширения под этот браузер.
В качестве примера рассматривается очень простой вариант, но потренировавшись и изучив дополнительную литературу можно написать довольно солидные продукты. Итак начнем:
- Идея. Мое расширение – это подборка ссылок на популярные социальные сети в графическом виде.
- Манифест. Создаем файл manifest.json.Мой файл имеет следующее содержание:
{ "name" : "SochialHub", // Название расширения "version" : "1.0", // Номер версии "description" : "Быстрай переход к самым популярным социальным сервисам", // Описание расширения "browser_action" : { "default_title" : "SochialHub", "default_icon" : "icon.jpg", "popup": "popup.html" //Страничка расширения }, "icons": //Иконки { "32":"32.png", "48":"48.png", "128":"128.png" }, "permissions": [ "tabs"// Разрешить расширению работать с вкладками ] }
- Страница.Теперь создаем страничку popup.html, которая и станет самим расширением. Моя выглядит так:
<html> <head> <title>SochialHub</title> </head> <body background="fon.jpg"> <div align="center"> <img src="SochialHub.png" usemap="#Карта"> <map name="Карта"> <area href="http://vk.com" shape="rect" coords="6,7,290,70" title="Вконтакте" target="_blank"> <area href="http://www.myspace.com/" shape="rect" coords="297,7,485,70" title="MySpace" target="_blank"> <area href="https://twitter.com/" shape="rect" coords="6,77,164,236" title="Twitter" target="_blank"> <area href="http://www.facebook.com/" shape="rect" coords="174,79,488,180" title="facebook" target="_blank"> <area href="http://www.mail.ru/" shape="rect" coords="6,243,163,280" title="Mail.ru" target="_blank"> <area href="http://www.odnoklassniki.ru/" shape="rect" coords="172,190,263,281" title="Одноклассники" target="_blank"> <area href="http://www.linkedin.com/home" shape="rect" coords="6,290,263,351" title="Linkedin" target="_blank"> <area href="https://plus.google.com/?hl=ru" shape="rect" coords="273,190,488,351" title="Google+" target="_blank"> <area href="https://delpix.ru" shape="rect" coords="1,1,6,6" title="DELPIX.RU" target="_blank"> </map> </div> </body> </html>
- Иконки. Мне хотелось сделать красивое расширение, но таланта и фантазии у меня маловато, так что иконки выглядят так:
- Итог. Вот в принципе и все.
Мы получили универсальное расширение для Google Chrome Вконтакте, facebook, myspace, mail.ru, Одноклассники, linkedin, Google+ и twitter.
Расширение можно подключить через Настройки -> Расширения, ставим галочку напротив Режим разработчика и жмем Загрузить распакованное расширение.
Постовой: мобильный агент