Створення власних розширень для браузера Частина 3

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

Серія контенту:

Цей контент є частиною # із серії # статей: Створення власних розширень для браузера

Цей контент є частиною серії: Створення власних розширень для браузера

Слідкуйте за виходом нових статей цієї серії.

Про цей цикл статей

У цьому циклі із чотирьох статей розглядається процес створення розширення Gawkblocker для трьох браузерів: Chrome, Firefox та Safari.

Перша частина присвячена створенню розширення для Google Chrome - від початку до розміщення в App Store.
У другій частині ми збудували додаток (або розширення) для Mozilla Firefox.
А у цій статті адаптуємо його для браузера Safari.
У Частині 4 ми відредагуємо код так, щоб отримати розширення, яке не залежить від браузера.

Ця третя частина циклу статей, присвяченого створенню розширень для браузера, навчає будувати розширення для Safari. У першій частині ми створили розширення Gawkblocker для Chrome, а в другій для Firefox. Тепер перенесемо Gawkblocker Safari. Повний вихідний код наведено у розділі Завантаження.

Gawkblocker: пожвавлення у пам'яті

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

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

Gawkblocker певним чином проникає вбраузер і виконує деякі дії, типові всім розширень, які створюються у цьому циклі статей. Як і в статтях про Chrome та Firefox, хотілося б отримати відповіді на такі запитання:

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

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

Перед початком роботи

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

Повний вихідний код наведено у розділі Завантаження.

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

Gawkblocker для Safari міститиме:

Рисунок 1. Сторінка спливаючого вікна та властивостей

Саме розширення визначається у файлі 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

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

Малюнок 3. Створення розширення

Вкажіть папку та скопіюйте до неї:

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

Створивши ці файли, ви готові вводити інформацію до Builder Extension. На малюнку 4 показано початковий набір полів, які необхідно заповнити.

Рисунок 4. Налаштування розширення, частина 1

Заповніть такі поля, представлені на малюнку 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

Почнемо з визначення допоміжних вікон у розділі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

Процеси для прослуховування подій у Safari працюють дещо інакше, ніж у Chrome. У Safari вказується подія, яка прослуховується, і обробник цієї події, і Safari передає подію обробнику. Тому потрібна функція обробки події, як показано в лістинге 2.

Лістинг 2. Прослуховування подій у Safari

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

Загалом зміни на сторінці background.html мінімальні. Зміни на сторінці popup.html не набагато глибші.

Створення спливаючого вікна Safari

Достатньо замінити всі точки, де надсилаються повідомлення в main.js, відповідними зверненнями до глобальної сторінки. На відміну від спливаючого вікна Chrome допоміжний екран зберігає стан. Його потрібно скидати щоразу, коли вікно відкривається. Safari надає подію, що дозволяє легко це зробити:

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

Лістинг 3. Спрощення коду для редагування списку заблокованих сайтів

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

Тестування в Extension Builder

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

Малюнок 6. 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.