Как делать Google Chrome Extension

Пока не забыл всех особенностей секса с Google Chrome Extension запишу все грабли на которые я наступил. Надеюсь, кому-то пригодится 🙂

Прочитать http://code.google.com/chrome/extensions/docs.html конечно же полезно. Но дьявол таки в деталях. Вот моменты, которые неясны даже после прочтения доков, факов и рассматривания готовых примеров:

Chrome Extension — это набор .html, .js, .css файлов, главный из которых manifest.json. В манифесте описывается приложение, его тип, необходимые пермишены (например, загружать внешние скрипты), поведение и т.д. Все файлы можно держать в отельной папке, а можно «скомпилировать» в .crx файл (на самом деле ZIP архив).

Экстеншены бывают нескольких видов. Обычно это «кнопки в тулбар», которые работают с контентом таба (иконка в тулбаре) или пейджа (иконка в адресной строке), есть приложения на всю страницу браузера. Так же есть и вообще что-то наподобие отдельных программ их даже трудно отличить от нетивных приложений системы.

Добавляются экстеншены в Chrome через menu->tools->extensions, либо кликом по ссылке/файлу с .crx расширением.

Для тестирования и отладки приложений локально, надо нажать галку Developers Mode вверху страницы этих самых Экстеншенов. После этого можно загружать не запакованные приложения (из папки), а так же создавать готовые .crx файлы для распространения самостоятельно.

Кнопка в тулбаре обычно находится сразу, а вот что бы запустить приложение типа аппликейшен — надо открыть новый таб и снизу перейти в Apps страничку. Вам смешно, а я минут 5 не мог найти, где же запускать свое приложение без тулбара 🙂

Background page — это не страница/скрипт которые отображаются в Chrome! Это невидимая страница, которая запускается в одном экземпляре и позволяет взаимодействовать со всеми частями (страницами, скриптами, стилями) экстеншена.

Никакого JavaScript в HTML! Будут работать только подключаемые файлы, это типа защита от инжекшена скриптов. Файлы .js надо класть рядом с .html и просто подключать srs=»abc.js». Это важный момент, а он описан мелким текстом в дебрях документации…

Стандартный .crx файл это ZIP архив, но для паблишинга в Chrome Web Store .crx не подойдет 🙂 Google требует заливать именно .zip файл со всеми файлами приложения. Более того в manifest.json не должно быть комментариев и лишних строк! Иначе при публикации буду непонятные ошибки типа: «An error occurred. Your error has been reported to Google.» 🙂 Так же для публичного экстеншена не должно быть пункта «update_url» в манифесте (офигенная логика!)

Если будете хостить .crx файл на своем сайте, то обязательно пропишите MIME для .crx файлов. Иначе хром будет скачивать приложение, а на установке ругаться. Для апача в .htaccess файле надо прописать:
AddType application/x-chrome-extension .crx

Для автоматического апедейта приложения надо заполнить «update_url» поле в манифесте. По URL должен открываться udate.xml файл, в котором надо не забыть прописать верный appid=’xxxxxyyyyyzzzz’. ID найти не так уже и просто 🙂 Надо установить .crx в Chrome, зайти на страницу приложений, и включить Developers mode. Тогда в списке приложений так же появятся и их ID (случайно нашел!)

Если дойдете до паблишина в Chrome Web Store, то будьте готовы заплатить 5 баксов (разово) за открытие аккаунта.

Developers Dashbord глючная и не совсем понятная штука, так что готовьтесь внимательно читать мелкий тест и следить за ошибками. Особенно бесит, что опубликованное в Tester Account приложение нельзя скопировать в публичный доступ. Приходится вводить все описания и загружать медиа файлы по новой…

Для добавления Экстеншена в Chrome Web Store потребуется иконка размером 128×128, но при этом картинка должна влезть в размер 96х96! Исключение для «круглых иконок», там рабочее поле посередине и 112×112 пикселей. Короче очередная шизиловка от Google 🙂

Так же для Chrome Web Store понадобится скриншот (640×400 или 1280×800) и как минимум один промо материал (440×280).

После паблишинга Экстеншена не спешите всем сообщать новость о том, какой вы крутой. Скорее всего приложение опубликуется в тестовый аккаунт и будет работать только у пары-тройки ваших друзей (там есть списочек). Проверьте работоспособность ссылок на разных компьютерах и под разными операционными системами (Win, Mac, nix) ну а уже потом рассылайте новость о своей «поделке» 🙂

Ну вроде все. Будут и другие грабли, но на самом деле все не так уж страшно. Желаю успехов в написании приложений для Google Chrome!

P.S. Моим первым экстеншеном было вот это: Bad Pixel Test for Google Chrome