Ну что же, как и обещали, представляем вам первый пилотный урок по созданию дополнений для Google Chrome. Кстати, как вы наверно заметили, я часто употребляю термин "дополнения" вместо "расширения". Скоро я объясню почему и в чем разница. Тема первого нашего урока это общий обзор системы дополнений.
Что это? Зачем это?
Как уже говорилось, система дополнений для Google Chrome призвана расширить функционал браузера. Расширения и приложения для Хрома представляют из себя фактически странички, написанные на HTML и Javascript. С той лишь разницей, что эти веб-страницы имеют право взаимодействовать с браузером при помощи Chrome API. Таким образом сразу вывод: чтобы создавать дополнения для Chrome необходимы базовые знания HTML и Javascript. Ничего сложного в них нет и параллельно осваивать их не составит труда. Почитать можно тут про HTML и здесь про javascript.
Классификация дополнений
Вот мы и подошли к вопросу классификации дополнений. Что в себя включают дополнения для Хрома:
1. Расширения / Extensions;
2. Приложения / Apps:
2.1 Упакованные приложения / Packaged Apps;
2.2 Веб-приложения / Hosted Apps;
3. Темы / Themes.
Каждые из этих категорий мы в будущем будем проходить отдельно и более подробно. В чем принципиальное отличие расширений от приложений? Приложения это обязательно полноценный веб-сервис, который запускается в отдельной вкладке, причем работать этот сервис может как из интернета (веб-приложение) так и из локально загруженных файлов (упакованное приложение). Расширения же лишь создают кнопки в браузере, редактируют контекстное меню, выполняют скрипты на тех или иных сайтах и т.п. Ну а темы для Google Chrome это по сути Personas для Firefox, т.е. замена "шкурок" и картинок в интерфейсе браузера.
Сразу же приведу примеры (свои разработки):
- Расширение The Latest Versions of Google Chrome™.
- Типовое приложение - игра Canvas Life. По классификации это упакованное приложение (работает полностью локально).
- Тема Google Classic Theme.
Вообще по ходу описаний я постараюсь сразу оговорить, что невозможно реализовать при помощи Chrome API, чтобы сэкономить ваше время.
Типовая структура дополнений
Что представляет из себя готовое дополнение? Это обычный zip архив с расширением *.crx. Внутри него всегда есть файл manifest.json. Выглядит он примерно так:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://api.flickr.com/"
]
}
Запомните, что это самый главный файл в вашем дополнении. В нем описано название, версия, описание, стандартная иконка вашей разработки. Помимо этого там же описывается, что именно будет в вашем расширении или приложении. Создание кнопки, изменение страниц скриптом или это вообще приложение, которое запускает какую то страницу. Какими привилегиями обладает расширение и т.п. Нет смысла разбирать и заучивать сразу все, что можно записать в манифест. Все это можно освоить постепенно. Мы к нему будем возвращаться регулярно и описывать, что конкретно и в какой ситуации должно в нем быть.
Собственно кроме манифеста состав дополнения может меняться сильно. В зависимости от классификации дополнения обязательный минимальный состав может быть разным. В него могут входить html, js, css-файлы, а также картинки, звуки, видео и даже различные плагины.
В качестве примера опишу состав своего расширения:
Описанное выше расширение The Latest Versions of Google Chrome™ в своем составе кроме manifest.json имеет:
- html файл, который используется как всплывающее окно по клику на иконку;
- html файл, который висит как фоновый процесс и регулярно проверяет новые версии;
- html файл, который представляет собой страницу настроек;
- несколько JS файлов, которые подключаются к html страницам для выполнения каких либо действий;
- комплект картинок, которые используются в расширении;
- некоторые другие файлы, значение которых не так важно в нашем контексте.
В заключение
Рассказывать на самом деле можно много, но это только перегрузит ваше восприятие и отвлечет от собственно практики, которая и является для нас целью :) В следующем уроке рассмотрим собственно Chrome API, т.е. что именно может делать ваша разработка с браузером. Это будет последняя теоретическая часть, а дальше мы будем вместе создавать простые расширения: по одному на каждый пункт в Chrome API. Ну а поскольку вопросы однозначно будут (ведь мы практикуемся, а не зубрим документацию), задавать вы их можете прямо в комментариях. Отвечать будут не только команда Хром.РФ, но и разработчики расширений, которые тоже есть среди наших читателей. Надеюсь, они не откажутся помочь и ответить на пару тройку простых вопросов от новичков.
Думаю, не нужно напоминать, что мы открыты для любых пожеланий, советов и вопросов.