Создание своих собственных расширений для браузера: Часть 3. Расширение возможностей Safari

Как написать простое расширение для браузера Safari

У каждого браузера свои сторонники и противники ― и свои преимущества и недостатки. Связывает их то, что люди проводят в браузерах все больше и больше времени. Этот цикл статей посвящен искусству самостоятельного построения простых расширений для браузеров Chrome, Firefox и Safari. Читатель узнает, как создать расширение для каждого браузера, насколько трудно или легко решаются некоторые типичные задачи и как распространять свое расширение. В этой статье мы построим расширение для браузера Safari.

Дуэйн О'Брайен, разработчик PHP, EPAM Systems

Дуэйн О'Брайен (Duane O'Brien) был разносторонним специалистом еще в те времена, когда у игры Oregon Trail был только текстовый интерфейс. Его любимый цвет - sushi (суши). Он никогда не бывал на луне.



07.06.2013

Об этом цикле статей

В этом цикле из четырех статей рассматривается процесс создания расширения Gawkblocker для трех браузеров: Chrome, Firefox и Safari.

  • Первая часть посвящена созданию расширения для Google Chrome ― от начала и до размещения в App Store.
  • Во второй части мы построили дополнение (или расширение) для Mozilla Firefox.
  • А в этой статье адаптируем его для браузера Safari.
  • В Части 4 мы отредактируем код так, чтобы получить расширение, не зависящее от браузера.

Эта третья часть цикла статей, посвященного созданию расширений для браузера, учит строить расширения для Safari. В первой части мы создали расширение Gawkblocker для Chrome, а во второй ― для Firefox. Теперь перенесем Gawkblocker на Safari. Полный исходный код приведен в разделе Загрузки.

Gawkblocker: оживление в памяти

Напомним, что Gawkblocker позволяет блокировать определенные домены, которые пользователь предпочитает не посещать, такие как блоги, отнимающие много времени. Gawkblocker содержит несколько компонентов:

  • всплывающее окно (в котором отображается черный список);
  • видимый значок браузера (точка входа в расширение);
  • страница свойств (настройка доменов, которые нужно заблокировать, и заменяющих их страниц).

В Chrome расширение Gawkblocker приставляет к каждой вкладке или окну прослушивающий процесс и сопоставляет URL-адреса с черным списком, перенаправляя заблокированные URL на локальную страницу. В Firefox дополнения ведет себя примерно так же, и от Safari следует ожидать похожего поведения.

Gawkblocker определенным образом проникает в браузер и выполняет некоторые действия, типичные для всех расширений, которые создаются в этом цикле статей. Как и в статях о Chrome и Firefox, хотелось бы получить ответы на следующие вопросы:

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

Завершив процесс создания Gawkblocker для Safari, мы ответим на эти вопросы.


Перед началом работы

Для выполнения примеров из этой статьи необходим Mac с последней версией Safari (6.0 на момент написания статьи). Кроме того, Apple требует, чтобы разработчики расширений подписались на бесплатную программу Apple Developer (см. раздел Ресурсы). Еще будет полезен инструмент для редактирования HTML, CSS и JavaScript. Поможет и некоторый опыт использования Safari с какими-нибудь расширениями. Если такого опыта нет, просмотрите расширения на странице Safari Extensions Gallery (см. раздел Ресурсы). Попробуйте несколько из них для этой статьи.

Большую часть работы мы будем выполнять в Safari Extension Builder, который встроен в версию 5.0 и более поздние версии Safari. Он позволяет создавать, устанавливать, перезагружать и удалять расширения для Safari в самом Safari. Чтобы использовать Safari Extension Builder, необходимо загрузить и установить сертификат разработчика из Safari Dev Center (см. раздел ресурсы) и следовать простым инструкциям. Вашим справочным документом будет Safari Extensions Reference (см. раздел Ресурсы).

Полный исходный код приведен в разделе Загрузка.


Анатомия расширения для Safari

Gawkblocker для Safari будет содержать:

  • страницу, которая загружается один раз при запуске Safari (на жаргоне Safari-разработчиков она называется глобальной страницей или глобальной HTML-страницей);
  • файл JavaScript с некоторыми основными функциями (копируется прямо из расширения для Chrome);
  • комбинацию из всплывающего окна и страницы свойств (перенесенную из дополнения для Firefox) — см. рисунок 1, — так что придется управлять только одной страницей;
    Рисунок 1. Страница всплывающего окна и свойств
    Экран расширения для Safari со страницей всплывающего окна и свойств
  • значок расширения на панели инструментов;
  • страницу, которая отображается, когда пользователь щелкает на значке (вспомогательный экран).

Включение JavaScript

Точно так же, как страницы Chrome и Firefox, страницы Safari могут содержать CSS или JavaScript. Код CSS или JavaScript помещается во внешний файл, и Extension Builder нужно указать, чтобы тот его включил. Однако в случае Gawkblocker этого не потребуется.

Страницы ― это простой HTML, CSS и JavaScript. В результате получается что-то среднее между расширениями для Chrome и Firefox.

Само расширение определяется в файле Info.plist. Этот файл не нужно редактировать напрямую. Он отображается в Safari Extension Builder. Файл info.plist содержит сведения, похожие на те, что мы поместили в файл manifest.json расширения для Chrome, но это XML-файл.


Работа с Safari Extension Builder

Для работы с Extension Builder включите меню Develop в Safari->Preferences->Advanced, установив флажок Show Develop menu in menu bar, как показано на рисунке 2.

Рисунок 2. Включение меню Develop
Диалоговое окно свойств с установленным флажком Show Develop menu in menu bar

Теперь запустите Safari Extension Builder с панели меню Safari. При первом запуске Extension Builder он выглядит как большое пустое поле. Нажмите значок "плюс" (+) в левом нижнем углу и скажите, что вы хотите создать расширение. Диалоговое окно спросит, где его сохранить, как показано на рисунке 3.

Рисунок 3. Создание расширения
Экран Safari Extension Building для создания нового расширения

Укажите папку и скопируйте в нее:

  • файлы background.html и gawkblocker.js из нашего расширения для Chrome;
  • файл popup.html из дополнения для Firefox;
  • используемую библиотеку JQuery (если есть);
  • файл Icon.png. Значок должен представлять собой квадрат размером минимум 64 x 64 пикселей и быть прозрачным, за исключением фактического изображения. (Подробнее см. в Safari Extensions Reference по ссылке в разделе Ресурсы.)

Создав эти файлы, вы готовы вводить информацию в Builder Extension. На рисунке 4 показан первоначальный набор полей, которые нужно заполнить.

Рисунок 4. Настройка расширения, часть 1
Начало настройки Gawkblocker в Extension Builder

Заполните следующие поля, представленные на рисунке 4:

  • Display Name: название расширения, которое будет отображаться в списке Extensions;
  • Author: укажите свое имя;
  • Description: краткое описание расширения;
  • Website: URL, по которому пользователь может узнать подробности;
  • Bundle Identifier: идентификатор пакета в формате типорганизации.организация.расширение (например, com.dontgothere.gawkblocker);
  • Display Version: версия, которая отображается, когда пользователь просматривает список расширений;
  • Bundle Version: более детальная внутренняя версия, используемая операционной системой для проверки наличия обновлений;
  • Extension Website Access: доступные Web-сайты. Возможные варианты: None(Нет), Some (Некоторые - и предоставить список) или All (Все). Чтобы получать URL, которые загружает браузер, Gawkblocker должен использовать уровень доступа Все;
  • Global Page File: страница, работающая в фоновом режиме;
  • Database Quota: максимально допустимый размер базы данных localStorage для расширения. В данном случае 1 МБ хватит с лихвой.

Пока все очень просто. Но процесс добавления элементов панели инструментов и вспомогательных окон может показаться чуточку сложнее, как показано на рисунке 5.

Рисунок 5. Настройка расширения, часть 2
Экран настройки Gawkblocker в Extension Builder

Начнем с определения вспомогательных окон в разделе Popovers. Этот раздел определяет окно, которое Safari открывает, когда пользователь щелкает на значке Gawkblocker на панели инструментов. Присвойте этому окну уникальный идентификатор (Identifier), укажите файл (File), который будет загружаться в окно, а также ширину (Width) и высоту (Height) окна.

Теперь перейдите к разделу элементов панели инструментов (Toolbar Items), чтобы добавить новый элемент панели инструментов Toolbar. Укажите для него текст подсказки (Label), изображение кнопки (Image), только что созданное вспомогательное окно (Popover) и уникальный идентификатор элемента панели инструментов(Identifier).

Теперь в верхней части пользовательского интерфейса Extension Builder можно скомандовать построителю, чтобы он построил и установил локальное расширение — но пока это работать не будет. Сначала нужно внести несколько изменений.


Редактирование файлов Gawkblocker

Нам нужны всего три файла: gawkblocker.js, background.html и popup.html. Файл gawkblocker.js, скопированный из расширения для Chrome, можно использовать без всяких изменений. Однако две других страницы придется подредактировать.

Перевод глобальной страницы на язык Safari

Очевидно, нельзя вызвать chrome.windows (API Chrome) на странице background.html ― ее нужно заменить соответствующим вызовом Safari API. И нельзя направлять пользователей на локальную страницу с помощью instead.html, как мы делали в Chrome. Вместо этого их нужно переадресовать прямо к видеоролику Madness, размещенному на YouTube, как показано в листинге 1.

Листинг 1. Переадресация пользователей к видеоролику на YouTube
...
if (!GB.getWatchThisInstead()) {
    GB.setWatchThisInstead("http://www.youtube.com/watch?v=N-uyWAe0NhQ");
}
...

Процессы для прослушивания событий в Safari работают несколько иначе, чем в Chrome. В Safari указывается событие, которое прослушивается, и обработчик для этого события, и Safari передает событие обработчику. Поэтому нужна функция для обработки события, как показано в листинге 2.

Листинг 2. Прослушивание событий в Safari
function shouldIBlockThis(event) {
    var site;
    for (site in GB.getBlockedSites()) {
        if (event.url && event.url.match(site)) {
            event.preventDefault();
            event.target.url = GB.getWatchThisInstead();
        }
    }
}

С помощью функции обработки событий прослушивание событий становится тривиальной задачей. Safari генерирует событие beforeNavigate еще до вызова какого-либо URL:

safari.application.addEventListener("beforeNavigate", shouldIBlockThis, true);

В целом изменения на странице background.html минимальны. Изменения на странице popup.html не намного глубже.

Создание всплывающего окна на языке Safari

В Firefox мы передавали сообщения из main.js во всплывающее окно. В Safari можно обратиться к глобальной странице, аналогично тому, как это делается в Chrome. Значения можно получать (get) и устанавливать (set) прямо в объекте GB. Так что получим текущий адрес перенаправления и установим значение в соответствующем поле:

$("#watchthatinstead").val(
   safari.extension.globalPage.contentWindow.GB.getWatchThisInstead());

Достаточно заменить все точки, где передаются сообщения в main.js, соответствующими обращениями к глобальной странице. В отличие от всплывающего окна Chrome, вспомогательный экран сохраняет состояние. Его нужно сбрасывать всякий раз, когда окно открывается. Safari предоставляет событие, позволяющее легко это сделать:

safari.application.addEventListener(
   "popover", function() { $("#onestep").show();$("#options").hide();}, true);

Также можно упростить редактирование списка заблокированных сайтов, как показано в листинге 3.

Листинг 3. Упрощение кода для редактирования списка заблокированных сайтов
function showBlockList () {
    var blockList = safari.extension.globalPage.contentWindow.GB.getBlockedSites();
    $("#blockedlist").children().remove();
    $("#blocklist").children().remove();
    var i=1;
    $.each(blockList, function (index, value) {
        $("#blockedlist").append("<div class='siterow' title='"+value+"'><div
 class='sitename'>"+index+"</div><span class='sitedesc'> : "+value+"
 </span></div>");
        $("#blocklist").append("<div id='site-"+i+"'><input type='button' 
 id='unblock-"+i+"' value='OH GO ON THEN' /> " + index + "</div>");
        $("#unblock-"+i).click(function () {
            safari.extension.globalPage.contentWindow.GB.removeBlockedSite(index);
            showBlockList();
        });
        i++;
    });
}

В целом изменений не много. С минимальными усилиями, используя работу, проделанную для Chrome- и Firefox-версий, мы превратили Gawkblocker в работающее расширение для Safari.


Тестирование в Extension Builder

Extension Builder предоставляет инструменты, помогающие в тестировании. Во-первых, в верхнем левом углу окна Extension Builder имеются кнопки Install/Uninstall и Reload, которые облегчают внесение изменений при тестировании. Нажмите кнопку Inspect Global Page (Проверка глобальной страницы), чтобы вызвать окно Web Inspector для фоновой страницы. Web Inspector в действии показан на рисунке 6.

Рисунок 6. Web-инспектор для глобальной страницы
Web-инспектор для глобальной страницы

Распространение расширения

Когда вы уверены, что расширение готово к прайм-тайм, вы можете распространять его несколькими способами. Можно распространять дистрибутив для загрузки или отправить свое расширение в Safari Extensions Gallery.

Распространение дистрибутива

Чтобы распространять дистрибутив расширения, загрузите его из Extension Builder. Нажмите кнопку Build Package, чтобы получить файл .safariextz, который сможет установить каждый. Его можно распространять как угодно (по электронной почте, посредством хостинга, с установщиками и т.п.). Но обработка обновлений и хостинг остаются вашей заботой.

Размещение в Extensions Gallery

Вы можете подать свои расширения для проверки и внесения в Extensions Gallery. Придется выполнить некоторые необходимые действия — дополнительные требования по подписке, заключение соглашения с Apple и предоставление более подробной информации. Однако Extensions Gallery ― основной канал, по которому пользователи Safari могут узнать о вашем расширении.


Ответы на вопросы

Теперь, когда расширение для Safari готово, самое время посмотреть, как выглядят ответы на наши вопросы по сравнению с Chrome и Firefox.

Насколько трудно внедриться в пользовательский интерфейс браузера?
Пожалуй, даже еще проще, чем в случае Chrome. Safari Extension Builder значительно проясняет этот процесс.
Как сохранять данные между сеансами браузера?
Между сеансами браузера данные можно легко сохранять, используя оболочку localStorage, созданную для Chrome.
Как разные части расширения взаимодействуют друг с другом?
Обращаясь непосредственно к глобальной странице, можно легко передавать и получать информацию от различных частей расширения.
Насколько глубоко можно проникнуть в данные пользователя?
Safari предлагает некоторые возможности по детализации запрашиваемых разрешений, но можно зайти довольно глубоко — вплоть до внедрения сценариев в пользовательские страницы и получения доступа ко всем страницам, которые посещает пользователь. Стоит также отметить, что Safari не отображает предупреждений по поводу запросов разрешения, как это делает Chrome.

Заключение

Теперь, когда мы построили расширение Gawkblocker три раза (для Chrome, Firefox и Safari), можно поискать способ объединить два основных файла JavaScript в один для всех трех браузеров. Именно этим мы и займемся в четвертой части. А пока вы можете сделать много всего интересного в области расширений для Safari.


Загрузка

ОписаниеИмяРазмер
Исходный код Gawkblockersafari-sourcecode.zip39 KБ

Ресурсы

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Open source, Web-архитектура
ArticleID=932963
ArticleTitle=Создание своих собственных расширений для браузера: Часть 3. Расширение возможностей Safari
publish-date=06072013