В последней версии Safari Apple добавила поддержку расширений. Сегодня я хотел бы рассказать читателям про то, как можно очень быстро написать свое дополнение к браузеру. В принципе, если вы имеете минимальные знания открытых технологий HTML/CSS/JS, то уже на 95% готовы к его написанию. А писать мы будем расширение для перевода интернет-страницы при помощи сервиса Google Translate.
Получаем сертификат
Все расширения для Safari, с целью обеспечения безопасности, должны быть подписаны сертификатом. Поэтому, прежде чем писать любой код, требуется перейти в Safari Developer Center и зарегистрироваться в качестве разработчика для браузера. За участие в программе денег платить не нужно, кроме этого, после регистрации ваша учетная запись будет связана с Apple ID, которая используется для работы MobileMe или счетом в iTunes.
В ходе регистрации вы должны будете следовать инструкциям он-лайн мастера и в результате создадите свой персональный сертификат. После его создания дважды щелкните по сохраненному файлу, после чего он будет установлен в Keychain. Также стоит отметить, что при создании расширений Safari автоматически использует этот сертификат.
Включаем поддержку расширений
О том, как включить данную функцию, написано в этой статье. Там же можно найти наиболее интересные расширения, появившиеся на данный момент. Большинством из них я пользуюсь до сих пор.
Создание нового расширения
Первым делом, следует зайти в «Разработка» -> «Конструктор расширений». А в нем нажать на маленький плюсик в левом нижнем углу и из представленного меню выбрать пункт «Новое расширение» (если у вас есть исходники аддона — смело выбирайте пункт «Добавить расширение»).
Далее следует выбрать каталог, в котором будет размещаться наш аддон, и начать заполнять необходимые поля в разделах «Информация о расширении» и «Подробные сведения о расширении»: имя, автор, описание, веб-сайт, идентификатор пакета в формате com.имя_вашей_компании.название_пакета
.
Чуть ниже, в секции «Веб-сайт расширения», следует выбрать доступ для всех сайтов (Уровень доступа — Все) и установить галочку на пункте «Включить безопасные страницы».
Работаем с каталогом проекта
Следующая секция называется «Глобальная страницы расширения», позволяющая выбрать эту страницу. Только есть одна проблема — при помощи Конструктора расширений невозможно её создать. Поэтому следует зайти в нашу папку с исходниками и добавить туда несколько файлов:
- во-первых, это файл HTML, в котором хранятся наши скрипты;
- во-вторых, это файл иконки в формате PNG. Она будет отображаться на кнопке в панели инструментов.
Иконка должна содержать прозрачный фон и быть размером не более 18х18. Все, что больше — автоматически уменьшится браузером. Вы можете скачать мои исходные файлы и просто добавить их в свой проект. Теперь в выпадающем меню требуется выбрать файл global.html.
Двигаемся дальше. Нам в расширении не потребуется ни панель, ни контекстное меню. Поэтому без промедления создаем новый «Объект панели инструментов» и заполняем его как-нибудь так.
Обязательно запомните имя Команды, которую вы указали, потому что она будет использоваться в дальнейшем.
Пишем код
Откройте файл global.html любым текстовым редактором. Когда пользователь будет нажимать на кнопку, появившуюся в панели инструментов, Safari создаст событие «translate», после чего, в зависимости от JS-кода внутри нашего файла, будут выполнятся какие-либо действия.
Мы используем две функции:
- Первая из них использует конструкцию
if (event.command === “translate”)
, чтобы узнать — действительно ли была нажата наша кнопка, после чего получает URL-текущего таба и «передает» её в сервис Google Translate. Далее страница предстает в переведенном виде (в случае ошибки выведется простое сообщение с её описанием). - Вторая функция предназначена для того, чтобы сделать нашу кнопку неактивной, если в строке адреса этого самого адреса нет.
После этого, вы можете либо «Создать пакет» и установить расширение как обычно, либо нажать на кнопку «Установить». И в первом, и во втором случае вы получите рабочий аддон.
Дальнейшие изменения можно записывать прямо в файл global.html, после после чего в Конструкторе расширений нажимать кнопку «Перезагрузить» и любоваться изменениями.
Все, теперь вы знаете и умеете создавать расширения, а что сделать полезного — зависит только от вас. Более подробную информацию можно найти в Safari Extensions Development Guide.
Последние комментарии