Антон Карпенко (karpolan) wrote,
Антон Карпенко
karpolan

Category:

Как делать 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
Tags: блог, время, дурка, жара, жопа, западло, идея, идиот, интернет, июнь, компы, кризис, лень, отдых, очумелые руки, програмизм, работа, сайты, хобби, четверг, шиза
Subscribe
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 3 comments