1. Серія контенту:
2. Цей контент є частиною серії: Створення своїх власних розширень для браузера
3. Про це циклі статей
4. Gawkblocker: пожвавлення в пам'яті
5. Перед початком роботи
6. Анатомія розширення для Safari
7. включення JavaScript
8. Робота з Safari Extension Builder
9. Малюнок 2. Включення меню Develop
10. Малюнок 3. Створення розширення
11. Малюнок 4. Налаштування розширення, частина 1
12. Малюнок 5. Налаштування розширення, частина 2
13. Редагування файлів Gawkblocker
14. Переклад глобальної сторінки на мову Safari
15. Лістинг 1. Переведення користувачів до відеоролика на YouTube
16. Лістинг 2. Прослуховування подій в Safari
17. Створення спливаючого вікна на мові Safari
18. Лістинг 3. Спрощення коду для редагування списку заблокованих сайтів
19. Тестування в Extension Builder
20. Малюнок 6. Web-інспектор для глобальної сторінки
21. поширення дистрибутива
22. Розміщення в Extensions Gallery
23. Відповіді на питання
24. висновок
25. Ресурси для скачування

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

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

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

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

http://www.ibm.com/search/csass/search/?sn=dw&lang=ru&cc=RU&en=utf&hpp=20&dws=rudw&lo=ru&q=%D0%A1%D0%BE%D0%B7%D0%B4% D0% B0% D0% BD% D0% B8% D0% B5 +% D1% 81% D0% B2% D0% BE% D0% B8% D1% 85 +% D1% 81% D0% BE% D0% B1% D1 % 81% D1% 82% D0% B2% D0% B5% D0% BD% D0% BD% D1% 8B% D1% 85 +% D1% 80% D0% B0% D1% 81% D1% 88% D0% B8% D1% 80% D0% B5% D0% BD% D0% B8% D0% B9 +% D0% B4% D0% BB% D1% 8F +% D0% B1% D1% 80% D0% B0% D1% 83% D0% B7% D0% B5% D1% 80% D0% B0 & Search =% D0% 9F% D0% BE% D0% B8% D1% 81% D0% BA

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

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

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

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

В цьому циклі з чотирьох статей розглядається процес створення розширення 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 буде містити:

включення 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

Тепер запустіть 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

Очевидно, не можна викликати 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-інспектор для глобальної сторінки

поширення розширення

Коли ви впевнені, що розширення готове до прайм-тайм, ви можете поширювати його декількома способами. Можна поширювати дистрибутив для завантаження або відправити своє розширення в 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.

Ресурси для скачування

Схожі теми

• Оригінал статті: Create your own browser extensions, Part 3: Extend your reach into Safari .
• Розширення можливостей Chrome: Створення своїх власних розширень для браузера Chrome (Дуейн О'Брайен, developerWorks, серпень 2012 року): перша частина циклу статей про розширення для браузерів присвячена створенню розширення для Google Chrome - від початку і до розміщення в App Store.
• Розширення можливостей Firefox: Створення своїх власних розширень для браузера Firefox (Дуейн О'Брайен, developerWorks, березень 2013): друга частина цього циклу статей про розширення для браузерів вчить створювати додатки для Firefox - від початку і до поширення.
• Рух в напрямку розширень, що не залежать від браузера: виключення накладних витрат і надмірності в розширеннях для Chrome, Firefox і Safari (Дуейн О'Брайен, developerWorks, квітень 2013): в четвертій статті цього циклу про розширення для браузерів створюється універсальне розширення, здатне працювати в усіх трьох браузерах.
• Safari Extensions Gallery : На цьому сайті можна знайти безліч розширень для Safari.
• Safari Extensions Reference : Документація по розширень для Safari.
• Safari Dev Center : Центр базування Safari-розробників.
• Apple Developer Program : Зареєструйтеся безкоштовно і приступайте до створення власних розширень для Safari.

Підпишіть мене на повідомлення до коментарів