Урок №1 — Основа основ системы дополнений для Google Chrome

Ну что же, как и обещали, представляем вам первый пилотный урок по созданию дополнений для 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, т.е. замена "шкурок" и картинок в интерфейсе браузера.

Сразу же приведу примеры (свои разработки):

Вообще по ходу описаний я постараюсь сразу оговорить, что невозможно реализовать при помощи 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. Ну а поскольку вопросы однозначно будут (ведь мы практикуемся, а не зубрим документацию), задавать вы их можете прямо в комментариях. Отвечать будут не только команда Хром.РФ, но и разработчики расширений, которые тоже есть среди наших читателей. Надеюсь, они не откажутся помочь и ответить на пару тройку простых вопросов от новичков.

Думаю, не нужно напоминать, что мы открыты для любых пожеланий, советов и вопросов.