В последней версии 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.


Читайте также: