Продолжаем цикл наших статей "Школа", посвященных созданию расширений и приложений для браузера Google Chrome. И сегодня мы попробуем создать простейшее расширение "Hello, World!" с применением всего одного единственного Chrome API - Browser Actions. Кстати, очень приятно, что к нашему циклу статей присоединился разработчик Вадим, который набросал для этого урока пример расширения и полностью подготовил Урок №4.
Прежде всего, рекомендуем использовать при создании расширения не обычный блокнот, а более функциональный текстовый редактор. Рекомендуем Notepad++. И все ваши файлы вести в одной и той же текстовой кодировке. Настоятельно рекомендуем выбирать UTF-8 (без BOM). Для этого либо в уже созданном документе через меню "Кодировки" выбираем преобразование в нужный формат. Либо перед созданием документа выбираем "Опции" - "Настройки" - "Новый документ" и указываем правильную кодировку.
А теперь приступаем к созданию расширения. Создаем папку специально под новый проект. Назовем ее как угодно. Все наши файлы будут создаваться и находиться в ней.
С чего начинаем создавать расширение, и что является фундаментом любого дополнения для Google Chrome? Это manifest.json. Просто создайте текстовый файл и переименуйте его в manifest.json (кстати, мы ведь все приличные люди и не используем скрытие расширений для зарегистрированных типов файлов, иначе может возникнуть файл manifest.json.txt, что смотрится глупо и не будет работать в дальнейшем). Открываем созданный манифест и пишем в него...
{
"name": "Расширение Привет, Мир!",
"description": "Моё первое расширение.",
"version": "1.0",
"icons": {
"128": "128.png",
"48": "48.png",
"16": "16.png"
}
}
Это та базовая часть, что рекомендуется в каждом manifest.json. Что мы написали? Прежде всего указали имя (name) нашего расширения. Оно будет использоваться теперь везде: в каталоге, в списке расширений браузера и т.п. Описание расширения (description) не обязательно, но крайне желательно! Используется и в каталоге и в браузере и в целом помогает пользователям сформировать первое представление о том, что делает ваша разработка. Номер текущей версии вашего расширения (version). Без него никуда. Выпускаете обновление - меняете номер версии на больший. Как менять номера решать только вам: 2.0 или 1.1 или 1.0.0.1. Как угодно. Также указываем комплект иконок, которые будут использоваться. Рекомендовано использовать размеры 128, 48 и 16. Так как это показано у нас.
Мы указали в манифесте иконки? Значит теперь нам надо их поместить в папку нашего расширения. И назвать так, как мы и описали. Кстати, опять же по документации рекомендуется использовать тип PNG хотя поддерживаются и другие. Сами картинки в нашем уроке выбирайте какие хотите. Они и будут представлять вашу разработку.
Мы описали основу... Но мы хотим, чтобы наше расширение создавало кнопку на панели инструментов , по клику на которое открывалось окошко. Т.е. нам надо описать в нашем манифесте блок Browser Actions. Дописываем и получаем вот что...
{
"name": "Расширение Привет, Мир!",
"description": "Моё первое расширение.",
"version": "1.0",
"icons": {
"128": "128.png",
"48": "48.png",
"16": "16.png"
},
"browser_action": {
"default_title": "Моё первое расширение:\nПривет, Мир!",
"default_icon": "48.png",
"popup": "popup.html"
}
}
Тут мы указали, что хотим создать. А именно кнопку с заголовком default_title, с иконкой default_icon, по клику на которое будет открываться окошко popup.html. Мы использовали иконку размера 48, хотя на самом деле на панели инструментов может уместиться лишь размером до 19 пикселей. Но ничего страшного. Она будет масштабироваться сама.
Мы полностью описали наш manifest.json. А теперь нам нужно создать собственно popup.html, на который мы и ссылаемся. Создаем его также как и manifest.json. Сам popup.html это самый обычный HTML-документ. Надеюсь, вы уже имеете базовое представление о HTML ? Поэтому в созданный документ дописываем следующее...
<html>
<head>
<title>Hello, World!</title><meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<div align="center">
<img src="128.png" width="128" hight="128" /><br>
<b>Привет, Мир!</b>
</div>
</body>
</html>
Проще говоря, наша страничка будет включать в себя одну картинку и фразу "Привет, Мир!".
Расширение готово! А теперь давайте его протестируем. На странице chrome://extensions/ переходим в режим разработчика и жмем кнопку "Загрузить распакованное расширение...". Указываем там нашу папку и все! Расширение установлено и работает. Находим иконку на панели инструментов и жмем ее. Видим страничку? Отлично =)
Образец того, что должно было получиться можно скачать.
Подробная документация доступна здесь.
Спасибо за внимание. Вопросы?