Как делать 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 потребуется иконка размером 128x128, но при этом картинка должна влезть в размер 96х96! Исключение для "круглых иконок", там рабочее поле посередине и 112x112 пикселей. Короче очередная шизиловка от Google :)
Так же для Chrome Web Store понадобится скриншот (640x400 или 1280x800) и как минимум один промо материал (440x280).
После паблишинга Экстеншена не спешите всем сообщать новость о том, какой вы крутой. Скорее всего приложение опубликуется в тестовый аккаунт и будет работать только у пары-тройки ваших друзей (там есть списочек). Проверьте работоспособность ссылок на разных компьютерах и под разными операционными системами (Win, Mac, nix) ну а уже потом рассылайте новость о своей "поделке" :)
Ну вроде все. Будут и другие грабли, но на самом деле все не так уж страшно. Желаю успехов в написании приложений для Google Chrome!
P.S. Моим первым экстеншеном было вот это: Bad Pixel Test for Google Chrome
Прочитать 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 потребуется иконка размером 128x128, но при этом картинка должна влезть в размер 96х96! Исключение для "круглых иконок", там рабочее поле посередине и 112x112 пикселей. Короче очередная шизиловка от Google :)
Так же для Chrome Web Store понадобится скриншот (640x400 или 1280x800) и как минимум один промо материал (440x280).
После паблишинга Экстеншена не спешите всем сообщать новость о том, какой вы крутой. Скорее всего приложение опубликуется в тестовый аккаунт и будет работать только у пары-тройки ваших друзей (там есть списочек). Проверьте работоспособность ссылок на разных компьютерах и под разными операционными системами (Win, Mac, nix) ну а уже потом рассылайте новость о своей "поделке" :)
Ну вроде все. Будут и другие грабли, но на самом деле все не так уж страшно. Желаю успехов в написании приложений для Google Chrome!
P.S. Моим первым экстеншеном было вот это: Bad Pixel Test for Google Chrome