Создание расширения для Chrome. Часть I – Простейший плагин.

Решив однажды написать пользовательский скрипт для одной известной браузерной игрушки, я столкнулся с большими ограничениями и плохой производительностью. Постоянно следя за развитием браузеров, я также читал статьи о работе пользовательского кода в первом из лучших, на тот момент, браузеров Chrome. Вообще сложно сказать какой браузер лучше в принципе. Каждый из них имеет свои особенности. И только IE6-IE8 имеют один положительный момент – постоянство. Так вот, читая о развитии пользовательского кода в Chrome я увидел, на сколько стало все просто и что этим просто можно создавать больше чем скрипт – сложную производительную систему с неограниченными возможностями в пределах Хрома. Увидел… но не нашел стоящей статьи на русском языке, да и официальная документация Хрома достаточно запутана и потребовала большого времени для ее исследования [1]. Со многим пришлось разобраться, а на многое уже не хватило. Но в этой серии статей я постараюсь связанно и поэтапно рассказать о том, что усвоил сам. Надеюсь, это будет кому-нибудь нужно. И после освоения материала статьи советую вам обратиться к первоисточнику [1] для закрепления и расширения своих знаний.

И так, пользовательские скрипты в технологиях Хрома уходят на задний план и на их смену приходят хорошо структурированные плагины с большими возможностями. Для создания собственного плагина достаточно иметь сам браузер и какой-нибудь редактор кода для html и java script. Собственно работа начинается с редактора и создания директории на диске, в котором будут храниться файлы плагина. На директорию накладывается ряд ограничений: Полный путь к директории и сама директория не должна иметь пробелов и по возможности содержать только английские символы, в противном случае уже готовое расширение при установке пользователями будет выдавать непонятную ошибку!!!

В папке нужно создать файл manifest.json. json – это расширение файла, указывающее на известный формат данных. В самом начале нашего изучения он может содержать следующую минимальную структуру:


{
"description": "Мой первый плагин для Chrome",
"name": "My Plagin",
"version": "0.1.1"
}

Кстати сказать, когда будете сохранять файл, убедитесь, что он сохранен в кодировки utf8. Наличие файлов в плагине с другими кодировками обычно приводит к фатальной ошибке на момент установки плагина.

Что же касается указанной структуры файла manifest.json, то тут все предельно ясно даже для людей незнакомых с форматом json. И что самое интересное, этот файл уже можно считать готовым плагином, который, правда, пока ничего не делает, но уже полноценно устанавливается в браузер. Поэтому рассмотрим процесс установки плагина.

Хром различает два типа плагинов – распакованный и упакованный. Распакованные плагины – это плагины, которые в данный момент разрабатываются и хранятся в виде директории с некоторым количеством файлов. После завершения работы над очередной версией плагина он упаковывается. Инструмент для этого предоставляет сам браузер, и об этом я напишу ниже. По умолчанию Хром не показывает возможность работы с распакованными плагинами, так как большая часть людей являются простыми пользователями.

Для того чтобы установить наш первый плагин откройте браузер. Зайдите в Меню/Инструменты/Расширения (рис. 1).

Открытие вкладки «Расширения» для работы с плагинами

Рисунок 1 — Открытие вкладки «Расширения» для работы с плагинами

В открывшейся вкладке найдите поле Режим разработчика и поставьте туда галочку. Появятся дополнительные кнопочки, одна из которых будет называться Загрузить распакованное расширение. Нажмите ее и выберете папку с плагином. В конечном итоге произойдет установка плагина и вид вкладки будет примерно таким, как на рисунке 2.

Вид вкладки Расширения после установки плагина

Рисунок 2 – Вид вкладки Расширения после установки плагина

Теперь Вас можно поздравить с первым работоспособным плагином, пусть и бесполезным. Дальше мы научим его делать что-нибудь «нужное».

Продолжение следует…

 

Список источников:

1 — http://code.google.com/chrome/extensions/getstarted.html

admin

Нужно войти чтобы оставить комментарий.