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

1. Серія контенту:
2. Цей контент є частиною серії: Створення своїх власних розширень для браузера
3. Про це циклі статей
4. Gawkblocker: пожвавлення в пам'яті
5. Перед початком роботи
6. Анатомія розширення для Firefox
7. Малюнок 1. Сторінка спливаючого вікна / властивостей
8. Робота з Add-on Builder
9. Малюнок 2. Add-on Builder
10. Редагування основного класу Gawkblocker
11. Лістинг 1. Редакція об'єкта SM
12. Лістинг 2. Додавання об'єкта GB в exports
13. Файл main.js в Gawkblocker
14. Лістинг 3. Оператори require
15. Лістинг 4. прослуховувати процес, який визначає цільову сторінку за замовчуванням для сайтів, які користувачі...
16. Лістинг 5. Прослуховування вкладок на оновлення
17. Лістинг 6. Створення віджета
18. Сторінка спливаючого вікна
19. Малюнок 3. Параметри на сторінці спливаючого вікна Gawkblocker
20. Лістинг 7. Відправка повідомлення зі сторінки спливаючого вікна з використанням addon.port.emit
21. Лістинг 8. Відправлення списку, коли об'єкт спливаючого вікна повідомляє, що він готовий
22. Лістинг 9. Прослуховування і зміна сторінки
23. Цільова сторінка переадресації
24. Лістинг 10. Завдання початкового умови
25. Малюнок 4. Цільова сторінка переадресації
26. Малюнок 5. Програми Add-on Builder
27. Поширення упакованого розширення
28. Завантаження на addons.mozilla.org
29. Малюнок 6. Завантаження в АМО
30. Відповіді на питання
31. висновок
32. Ресурси для скачування

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

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

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

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

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.
• В частини 3 то ж розширення адаптується для браузера Safari.
• А в частини 4 ми відредагуємо код так, щоб отримати розширення, яке не залежить від браузера.

Ця друга стаття нашого циклу про створення розширень для браузера вчить будувати доповнення (або розширення) для Mozilla Firefox. У статті "Створення своїх власних розширень для браузера: Частина 1. Розширення можливостей Chrome" ми побудували розширення Gawkblocker для Chrome. Тепер перенесемо Gawkblocker Chrome на Firefox. (Повний вихідний код наведено в розділі завантаження ).

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

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

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

У Chrome розширення Gawkblocker приставляє до всіх закладках або вікна прослуховує процес і зіставляє URL-адреси з чорним списком, перенаправляючи заблоковані URL на локальну сторінку. Тепер подивимося, як зміниться розширення Gawkblocker в середовищі Firefox.

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

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

Пройшовши процес створення Gawkblocker для Firefox, ми відповімо на ці питання.

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

Доповнення і розширення - один і той же

У Firefox розширення називаються доповненнями (add-ons). Для Chrome, Safari і Internet Explorer використовується термін розширення (extensions). У цьому циклі статей до додатків Firefox застосовуються обидва терміни, як синоніми.

Для цієї статті потрібно завантажити і встановити Firefox 12 або пізнішу версію браузера (див. Розділ ресурси ). (Наведені тут приклади засновані на версії 12.) Також знадобиться інструмент для редагування HTML, CSS і JavaScript. Буде корисний і деякий досвід роботи з Firefox і якими-небудь доповненнями Firefox. Якщо такого досвіду немає, перегляньте розширення на сторінці Mozilla Add-ons (див. Розділ ресурси ). Спробуйте якісь розширення в якості контексту для цієї статті.

Вашим довідковим документом буде керівництво розробника Mozilla Add-on SDK (див. Розділ ресурси ). Більшу частину роботи ми будемо виконувати в Add-on Builder - спеціальному Web-інструменті для створення розширень Firefox. Add-on Builder входить до складу проекту Firefox Jetpack. Мета Jetpack - полегшити написання розширень з використанням тільки HTML, CSS і JavaScript (як ми робили в разі розширення Chrome). є і інші способи створення розширень для Firefox.

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

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

альтернативні підходи

Крім процесу, описаного в цій статті, існує ряд інших способів створення розширень для Firefox. Можна завантажити файли SDK, які Add-on Builder використовує прямо з Developer Hub (див. Розділ ресурси ). Завантажте файли SDK, щоб при створенні доповнення можна було використовувати свою кращу IDE.

Можна також створювати традиційні (або класичні, або XUL) розширення. У цього способу є певні недоліки: для установки розширення потрібне перезавантаження, і процес написання такого розширення складніше. Перевага ж у тому, що можна змінювати сам браузер, чого не дозволяють ні Add-on Builder, ні SDK. Наприклад, за допомогою XUL значок свого розширення можна розмістити поза панелі Add-on. Детальніше про XUL-розширеннях можна прочитати на сторінках Mozilla Development Network (див. Розділ ресурси ).

Для залучення необхідних бібліотек розширення для Firefox, побудовані за допомогою Add-on Builder, використовують угоди CommonJS. Розширення може містити будь-яку комбінацію файлів HTML, CSS і JavaScript, але в основі всього лежить файл main.js.

Файл main.js - фундамент розширення для браузера Firefox. Він вказує Firefox, які модулі залучати і де вирішувати будь-які завдання по ініціалізації розширення. повертаючись до частини 1 , Відзначимо, що аналогом файлу main.js в розширеннях для Chrome є сторінка background.html. Він працює за лаштунками - ніхто не взаємодіє з нею безпосередньо - і виконується один раз під час запуску.

Може бути також ряд сторінок, що відображаються на панелях всередині браузера Firefox. Одну з таких сторінок ми будемо використовувати в якості комбінованої сторінки спливаючого вікна і властивостей, як показано на малюнку 1.

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

У Firefox можна використовувати і сценарії, майже так само, як в Chrome. Це файли JavaScript, які впроваджуються в Web-сторінки для взаємодії з ними. У Firefox сценарії ефективно працюють в контексті сторінки, але прямий доступ до них з DOM і назад заблокований щоб уникнути проблем безпеки. Сценарії можуть спілкуватися з іншою частиною розширення через port.

Для Gawkblocker ми будемо використовувати:

• файл main.js;
• Файл JavaScript, що містить деякі основні функції (головним чином перенесені з розширення Chrome);
• комбіновану сторінку спливаючого вікна / властивостей;
• один або пару значків.

Реалізація злегка відрізняється від того, що було в Chrome, але з точки зору користувача фактично ніякої різниці немає. Робоча розширення Gawkblocker можна завантажити з мого профілю Add-on Builder (див. Розділ ресурси ), Щоб побачити його в дії відповідно до наведеного тут описом.

Робота з Add-on Builder

Щоб використовувати Add-on Builder, показаний на малюнку 2 і доступний за адресою https://builder.addons.mozilla.org/, необхідно пройти процес безкоштовної реєстрації. Потім можна увійти в Add-on Builder і приступити до створення своїх власних доповнень.

Малюнок 2. Add-on Builder

Повний опис інтерфейсу Add-on Builder виходить за рамки теми цієї статті, але потрібно відзначити два моменти, що стосуються структури файлів. Бібліотеки, що вбудовуються за допомогою require, Firefox шукає в каталозі Lib. У цей каталог поміщається основний клас JavaScript Gawkblocker. В каталог Data поміщаються зображення, HTML, CSS та інші ресурси, які може обслуговувати ваше розширення.

Коли розширення буде побудовано і перевірено, вам запропонують встановити помічник Add-on Builder. Цей помічник управляє видаленням і установкою доповнень під час розробки.

Редагування основного класу Gawkblocker

В частини 1 ми написали те, що здавалося в розумній мірі стерпним файлом основного класу Gawkblocker. Тепер, коли його потрібно використовувати в розширенні для Firefox, можна перевірити, якою мірою цей файл класу переносимо насправді.

Як з'ясовується, в нього необхідно внести кілька важливих змін:

• використовувати API-інтерфейс розширень для Firefox simple-storage, замість localStorage;
• додати в exports об'єкт GB.

У файлі класу з частини 1 ми визначили об'єкт Storage Manager (з ім'ям SM) - оболонку для localStorage- щоб управляти зберіганням даних між сеансами. У розширенні для Firefox цей код не працює. Замість цього Firefox надає API-інтерфейс simple-storage, який зберігає дані. Об'єкт Storage Manager з частини 1 легко відредагувати, як показано в лістингу 1.

Лістинг 1. Редакція об'єкта SM

var SM = (function () {var SS = require ( "simple-storage"); var my = {}; my.get = function (key) {return SS.storage [key];} ... return my; } ());

Об'єкт GB не вимагає зміни, але його потрібно додати в exports, дотримуючись угоди CommonJS. Це завдання вирішує останній рядок лістингу 2.

Лістинг 2. Додавання об'єкта GB в exports

var GB = (function (SM) {var my = {}; my.blockTheseSites = { "gawker.com": "Gawker Media", "io9.com": "SciFi Blog", "gizmodo.com": "Gadget Blog ", ...} ...} (SM)); exports.GB = GB;

Ці дрібні зміни легко внести в об'єкт GB таким чином, щоб він працював в Firefox або в Chrome. (Я надаю це читачеві для його власного проекту).

Перейменуйте файл на GB.js і завантажте його в каталог Lib, щоб навчитися використовувати об'єкт у файлі main.js.

Файл main.js в Gawkblocker

У Chrome ми звіряли URL з чорним списком за допомогою фонової сторінки. У Firefox ця перевірка здійснюється всередині файлу main.js. Перш ніж main.js зможе що-небудь зробити, потрібно зібрати модулі і API, які планується використовувати, за допомогою серії операторів require, як показано в лістингу 3.

Лістинг 3. Оператори require

var data = require ( "self"). data, tabs = require ( "tabs"), GB = require ( "GB"). GB, popupPanel = require ( "panel"). Panel ({height: 500, contentURL: data.url ( "popup.html")});

Оператори з лістингу 3 послідовно вказують main.js, що треба надати:

• об'єкт, який використовується для доступу до каталогу даних;
• об'єкт для обробки вкладок;
• об'єкт GB, експортований з класу main;
• Об'єкт popupPanel для зберігання спливаючого вікна. Цей же код створює спливаюче вікно.

Крім того, так як створене спливаюче вікно також служить в якості сторінки властивостей, необхідно налаштувати деякі прослуховуючі процеси. У Chrome ми зверталися до фонової сторінці і вказували, що потрібно робити. У Firefox для досягнення тієї ж мети потрібно відправляти повідомлення в main.js. Наприклад, в лістингу 4 показаний прослуховує процес, який визначає цільову сторінку за замовчуванням для сайтів, які користувачі вирішили заблокувати.

Лістинг 4. прослуховувати процес, який визначає цільову сторінку за замовчуванням для сайтів, які користувачі вирішили заблокувати.

popupPanel.port.on ( "watchthis", function () {GB.setWatchThisInstead (http://www.youtube.com/watch?v=N-uyWAe0NhQ); console.log ( "watchthis");});

Ми станемо передавати повідомлення на цей порт трохи пізніше, коли будемо говорити про спливаючій сторінці.

Через той же файл main.js Gawkblocker звертається до вкладок, щоб дізнатися, які URL користувач хоче заблокувати. У лістингу 5 наведено код, який "прослуховує" вкладки на наявність змін.

Лістинг 5. Прослуховування вкладок на оновлення

tabs.on ( "ready", function checkForBlock (tab) {for (site in GB.getBlockedSites ()) {if (tab.url.match (site)) {tab.url = GB.getWatchThisInstead ();}}} );

Функції та технічні характеристики ті ж, що для Chrome. API теж використовується аналогічним чином (виклик методу, передача зворотного виклику).

Нарешті, щоб додати значок в нижньому правому куті вікна браузера, створимо Widget, як показано в лістингу 6.

Лістинг 6. Створення віджета

require ( "widget"). Widget ({id: "GBBrowserAction", label: "Gawkblocker", contentURL: data.url ( "images / GB-19.png"), panel: popupPanel});

Коли для файлу main.js все готово, можна зайнятися змінами для сторінки спливаючого вікна.

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

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

Малюнок 3. Параметри на сторінці спливаючого вікна Gawkblocker

Налаштовуючи порт в лістингу 4 , Не забудьте прослуховувати watchthis в файлі main.js. У лістингу 7 це повідомлення зі сторінки спливаючого вікна передається з використанням addon.port.emit.

Лістинг 7. Відправка повідомлення зі сторінки спливаючого вікна з використанням addon.port.emit

$ ( "# Watchthis"). Click (function () {addon.port.emit ( "watchthis"); $ ( "# status"). Text ( "YOU'RE GOOD MATE.");});

Прослуховуючи також список з використанням port, отримуємо від файлу main.js перелік заблокованих сайтів. У main.js список передається, коли сторінка спливаючого вікна повідомляє, що вона готова, як показано в лістингу 8.

Лістинг 8. Відправлення списку, коли об'єкт спливаючого вікна повідомляє, що він готовий

popupPanel.port.on ( "pop", function () {popupPanel.port.emit ( "blocklist", GB.getBlockedSites ()); ...});

А в об'єкті спливаючого вікна він прослуховується, і в сторінку вносяться зміни, як показано в лістингу 9.

Лістинг 9. Прослуховування і зміна сторінки

addon.port.on ( "blocklist", function (blocklist) {$ ( "# blockedlist"). children (). remove (); $ .each (blocklist, function (index, value) {$ ( "# blockedlist" ) .append ( "& lt; div class = 'siterow' title = '" + value + "' & gt; & lt; div class = 'sitename' & gt;" + index + "& lt; / div & gt; & lt; span class = 'sitedesc' & gt;: "+ value +" & lt; / span & gt; & lt; / div & gt; "); showBlockList (blocklist);});});

Спливаюче вікно звертається до main.js за списком заблокованих сайтів. Потім цей список проглядається, і інформація про заблокованих сайтах додається для відображення в тег div спливаючого вікна.

Цільова сторінка переадресації

У Chrome ми робили переадресацію на цільову сторінку, яка була частиною розширення. У Firefox це не працює, тому переадресуємо запити прямо до джерела (URL YouTube, вбудований в цільову сторінку: "Гей! Туди не ходи! Сюди ходи!").

Первісне умова переадресації задається у файлі main. JS, як показано в лістингу 10.

Лістинг 10. Завдання початкового умови

if (! GB.getWatchThisInstead ()) {GB.setWatchThisInstead ( "http://www.youtube.com/watch?v=N-uyWAe0NhQ"); }

Цільова сторінка переадресації показана на малюнку 4.

Малюнок 4. Цільова сторінка переадресації

Тестування з Add-on Builder

При використанні Add-on Builder Firefox полегшує тестування розширення по ходу розробки. Ви отримуєте консоль помилок, кнопку test і помічника Add-on Builder, який автоматично перезавантажує розширення після кожного збереження. Малюнок 5 демонструє Add-on Builder в дії.

Малюнок 5. Програми Add-on Builder

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

Коли розширення готове до прайм-тайм, вам надається декілька можливостей для його поширення. Якщо ви відзначите його в своєму профілі Add-on як public, то зможете відправляти посилання потенційним користувачам, щоб ті встановили його. Інакше, можна поширювати розширення, упаковане для завантаження, або відправити його на addons.mozilla.org.

Поширення упакованого розширення

Щоб поширювати упаковане розширення, завантажте його з Add-on Builder. Клацніть на значку Download, щоб отримати файл XPI, який може встановити кожен. Цей файл можна поширювати будь-яким способом (по електронній пошті, через хостинг, за допомогою установників і т.п.). Але обробка оновлень і хостинг залишаються вашою турботою.

Завантаження на addons.mozilla.org

Процес приміщення розширення на addons.mozilla.org вимагає меншого технічної участі, ніж самостійне розповсюдження розширення, але вам доведеться пройти процес перевірки та подолати деякі інші перепони. Натисніть на посилання upload to АМО поруч з розширенням в своєму профілі, як показано на малюнку 6.

Малюнок 6. Завантаження в АМО

Дотримуйтесь інструкції по завантаженню.

Відповіді на питання

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

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

Не набагато важче, ніж в Chrome, якщо потрібна присутність на панелі Add-on Bar в нижній частині вікна браузера. Це досягається створенням Widget в файлі main.js. Як зберігати дані між сеансами браузера? Використовуючи спеціальний API simple-storage Firefox. Якщо потрібно, щоб клас Storage Manager працював в Chrome і в Firefox, реалізуйте функцію визначення браузера. Як різні частини розширення взаємодіють один з одним? Такого роду зв'язок створюється за допомогою порту і настройки прослуховуючих процесів і джерел. Наскільки глибоко можна проникнути в дані користувача? Можна отримати доступ як мінімум до кожного URL, який відвідав користувач, без явного на те дозволу від користувача. Тобто досить глибоко.

висновок

Розширення - це тільки початок того, що можна робити всередині доповнення до Firefox. До меж можливостей, що надаються Add-on Builder, ще дуже і дуже далеко. А якщо ви вирішите заглибитися далі, то їх буде ще більше. Існує безліч способів заглибитися в Firefox, від Add-on Builder до Add-on SDK і більш складних XUL-розширень.

Чекайте третю статтю цього циклу, в якій ми перенесемо Gawkblocker в браузері Safari.

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

Схожі тими

• Оригінал статті: Create your own browser extensions, Part 2: Extend your reach into Firefox .
• Розширення можливости Chrome: Створення своих Власний Розширення для браузера Chrome (Дуейн О'Брайен, developerWorks, серпень 2012 року): перша частина циклу статей про Розширення для браузерів Присвячую Створення Розширення для Google Chrome - від качана и до App Store.
• Розширення можливости Safari: Створення своих Власний Розширення для браузера Safari (Дуейн О'Брайен, developerWorks, квітень 2013): третя частина циклу статей про розширення для браузерів присвячена створенню, тестування і поширенню розширень для Safari.
• Рух в напрямку розширень, що не залежать від браузера: виключення накладних витрат і надмірності в розширеннях для Chrome, Firefox і Safari (Дуейн О'Брайен, developerWorks, квітень 2013): в четвертій статті цього циклу про розширення для браузерів створюється універсальне розширення, здатне працювати в усіх трьох браузерах.
• Firefox Add-ons : Перегляньте тисячі додатків, доступних на цьому сайті.
• Mozilla Add-on Developer Hub : Інформаційний центр по Add-on Builder і Add-on SDK.
• Mozilla Development Network : Знайдіть керівництво по створенню розширень на цій базі розробників Mozilla.
• Mozilla Add-on SDK Developer Guide : в розділі Communicating using port керівництва пояснюється, як сценарії add-on scripts і content scripts повідомляються один з одним за допомогою об'єкта port.
• Mozilla Firefox : Завантажте Firefox для своєї платформи.
• Add-on SDK : Завантажте SDK.
• Add-on Builder : Тут знаходиться Add-on Builder.
• Gawkblocker : Завантажте Gawkblocker з профілю Add-on Builder автора.

Підпішіть мене на ПОВІДОМЛЕННЯ до коментарів