1. Вступ Цей урок по кроках покаже Вам як створити просте розширення - суттю якого є додавання в...
2. Створення файлу інсталяції
3. Розширення браузера за допомогою XUL
4. XUL Оверлеї
5. Chrome URIs
6. Створення установок Chrome
7. тестування
8. упаковка
9. Установка з web-сторінок
10. Використання addons.mozilla.org
11. Детальніше про XUL оверлеїв
12. Створення нових компонентів UI
13. Файли За замовчуванням
14. XPCOM Components
15. локалізація
16. Understanding the Browser
17. Налагодження розширень
18. Швидкий старт

Вступ

Цей урок по кроках покаже Вам як створити просте розширення - суттю якого є додавання в панель статусу Firefox блоку з рядком "Hello, World!"

Відзначте Даний урок про створення розширень для Firefox 1.5 і пізніших версій. Інші існуючі уроки для створення розширень, призначені для більш ранніх версій.

Якщо Вас цікавить урок по створенню Розширення для Thunderbird, дивіться Створення Розширення для Thunderbird

Налаштування оточення

Почнемо з того, що Розширення поширюється у вигляді zip архіву або пакетів , З розширенням XPI (вимовляється як "Зіппо").

Ось приклад типового XPI файлу:

exampleExt.xpi: / install.rdf / Components / * /components/cmdline.js / Defaults / /defaults/preferences/*.js / Plugins / * / chrome.manifest / chrome / icons / default / * / Chrome / / chrome / content /

Давайте створимо файловий структуру для нашого уроку, подібну до тієї що була описана вище, для чого створіть десь на жорсткому диску директорію (наприклад C: \ extensions \ my_extension \ або ~ / extensions / my_extension /). Створіть у цій директорії нову директорію c ім'ям chrome, і створіть в директорії chrome директорію з ім'ям code> content.

У корені директорії вашого Розширення створіть два порожніх файлу, один назвіть chrome.manifest, а інший install.rdf.

В результаті у вас повинна вийти ось така структура:

<Ext path> \ install.rdf chrome.manifest chrome \ content \

Більш детальну інформацію щодо налаштування оточення читайте в статті Setting up extension development environment .

Створення файлу інсталяції

Відкрийте файл install.rdf який Ви створили на попередньому етапі і вставте ці рядки:

<? Xml version = "1.0"?> <RDF xmlns = "http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns: em = "http: //www.mozilla .org / 2004 / em-rdf # "> <Description about =" urn: mozilla: install-manifest "> <em: id> [email protected] </ em: id> <em: version> 1.0 </ em: version> <em: type> 2 </ em: type> <! - Вказується додаток для якого може бути встановлено Розширення, його максимальна і мінімальна підтримувана версія. -> <em: targetApplication> <Description> <em: id> {ec8030f7-c20a-464f-9b0e-13a3a9e97384} </ em: id> <em: minVersion> 1.5 </ em: minVersion> <em: maxVersion> 3.0. * </ em: maxVersion> </ Description> </ em: targetApplication> <! - Front End MetaData -> <em: name> sample </ em: name> <em: description> A test extension < / em: description> <em: creator> Your Name Here </ em: creator> <em: homepageURL> http://www.example.com/ </ em: homepageURL> </ Description> </ RDF>

• [email protected] - ідентифікатор вашого Розширення. Це - значення, яке Ви повинні придумати самі, щоб ідентифікувати Ваше Розширення, в даному випадку воно в форматі адреси електронної пошти (це не обов'язково повинна бути Ваша електронна пошта). Цей ідентифікатор повинен бути унікальним. Ви можете також використовувати GUID. ЗАМІТКА: Хоча цей параметр і ПОВИНЕН бути в форматі адреси електронної пошти, але не обов'язково повинен бути дійсною адресою електронної пошти. (Example.example.example)
• Визначення <em: type> 2 </ em: type> - оголошує, що встановлюється саме розширення. Якби Ви встановлювали тему, то це було б 4 ( Install Manifests # type for other type codes).
• {ec8030f7-c20a-464f-9b0e-13a3a9e97384} - Ідентифікатор додатка Firefox.
• 1.5 - мінімальна версія Firefox, з якої буде працювати Ваше Розширення. Вкажіть тут мінімальну версію, для якої буде виконуватися всі необхідні тести.
• 3.0. * - - максимально версія Firefox, з якої буде працювати Ваше Розширення. Вкажіть тут, найсвіжішу, доступну в даний момент версію. В цьому випадку, "3.0. *" Вказує на те, що розширення працює з Firefox 3.0 і будь-якими наступними 3.0.x версіями.

(В Firefox версії 3.0.1, ви не зможете встановити для em: minVersion і em: maxVersion значення "3.0. *". Якщо Ви спробуєте встановити Розширення, то отримаєте помилку "Not compatible with Firefox 3.0.1". Мені не зрозумілі причини цього, так що я залишу пояснення того, хто має більше інформації з цього приводу. Установка em: minVersion рівним "3" і em: maxVersion рівним "3.0. *" вирішило проблему для мене.)

Розширення розроблені для роботи тільки з останніми версіями Firefox 2.0.0.x, повинні мати встановленим максимальну версію в "2.0.0. *". Розширення, розроблені для роботи з тільки з останніми версіями Firefox 1.5.0.x, повинні мати встановленим максимальну версію "1.5.0. *".

Більш докладно Див. Install Manifests з повним переліком основних і додаткових властивостей.

Збережіть файл.

Розширення браузера за допомогою XUL

Інтерфейс Firefox написаний c використанням XUL і JavaScript. XUL є мовою розмітки на основі граматики XML, яка дозволяє описувати такі фрагменти призначеного для користувача інтерфейсу, як кнопки, меню, панелі інструментів, дерева і т.д. Вся функціональність і обробка дій користувача здійснюється за допомогою JavaScript.

Щоб розширити браузер, ми змінюємо різні частини інтерфейсу браузера шляхом додавання або зміни "віджетів". Ми додаємо "віджети", вставляючи нові елементи, DOM XUL в вікно браузера і змінюємо їх, використовуючи сценарій (скрипт) і приєднуючи, обробники подій.

Інтерфейс браузера описаний в XUL файлі, який називається browser.xul ($ FIREFOX_INSTALL_DIR / chrome / browser.jar contains content / browser / browser.xul). У browser.xul, ми можемо знайти фрагмент описує рядок стану, який виглядає ось так:

<Statusbar id = "statusbar"> ... <statusbarpanel> s ... </ statusbar>

<Statusbar id = "statusbar"> це "точка злиття" для XUL оверлеїв.

XUL Оверлеї

XUL Оверлей - це спосіб впровадити інші "віджети" призначеного для користувача інтерфейсу в основний документ XUL. XUL Оверлей - це .xul файл, в якому визначені фрагменти XUL для вставки в певних "точках злиття" в основному документі. Ці фрагменти, можуть визначати "віджети" які повинні бути вставлені, видалені, або змінені.

Приклад документа XUL оверлеїв:

<? xml version = "1.0"?> <overlay id = "sample" xmlns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <statusbar id = "status- bar "> <statusbarpanel id =" my-panel "label =" Hello, World "/> </ statusbar> </ overlay>

<statusbar> назва statusbar визначає "точку злиття" в межах вікна браузера, до якої ми хочемо приєднати.

<Statusbarpanel> новий "віджет" який ми хотіли б вставити в межах точки злиття.

Візьміть цей простий код і збережіть в новому файлі з ім'ям sample.xul і помістіть його в директорію chrome / content.

Для отримання додаткової інформації про приєднання "віджетів" і зміні призначеного для користувача інтерфейсу, використовуючи Оверлеї, див. Далі.

Chrome URIs

XUL Файли - це частина пакету Chrome Packages - пакета компонентів для користувача інтерфейсу, які завантажуються через chrome: // URIs. Замість того, щоб завантажувати їх диска, використовуючи file: // URI (так як місце розташування Firefox в системі може змінюватися від платформи до платформи і від системи до системи), розробники Mozilla придумали рішення, яке дозволяє створити URIs до інформаційного наповнення XUL, про який знає встановлене додаток.

У вікні браузера: chrome: //browser/content/browser.xul . Надрукуйте цей URL в адресному рядку Firefox!

Chrome URIs складається з декількох складових:

• По-перше, URI scheme схема (chrome), яка говорить мережевий бібліотеці Firefox, що це Chrome URI. Вказує, що інформаційне наповнення URI, має бути оброблено як (chrome). На відміну від (chrome), (http) говорить Firefox обробляти URI як web-сторінку.
• По-друге, назва пакета (browser, в прикладі вище), який ідентифікує пакет компонентів для користувача інтерфейсу. Воно повинно бути унікальним, щоб уникнути конфліктів між розширеннями.
• По-третє, тип запитаних даних. Є три типи: content (XUL, JavaScript, зв'язування XBL, і т.д. які формують структуру і поведінку додатки UI), locale (DTD.properties файли і т.д, які містять рядки для локалізації UI ), І skin (CSS і зображення, які формують тему UI)
• Шлях файлу, для завантаження.

Так, chrome: //foo/skin/bar.png завантажує файл bar.png з теми foo розділу skin.

Коли Ви завантажуєте вміст, використовуючи Chrome URI, Firefox використовує системний реєстр Chrome, щоб транслювати URIs в фактичні вихідні файли на диску (або в пакетах JAR).

overlay chrome: //browser/content/browser.xul chrome: //sample/content/sample.xul

Цей рядок говорить браузеру, приєднати sample.xul до browser.xul під час завантаження browser.xul.

1. перейдіть в папку вашого профілю за замовчуванням. Папка вашого профілю за замовчуванням, повинна, знаходиться десь в папці профілів, наприклад в Firefox / Profiles / <profile_id> .default /.
2. Відкрийте папку extensions. Якщо раніше ви вже встановлювали, які або розширення, то вона вже має бути створена.
3. Створіть там, новий текстовий файл і запишіть в нього шлях до папки з вашим розширенням, наприклад C: \ extensions \ my_extension \ або ~ / extensions / my_extension /. Збережіть файл, вказавши в якості імені ідентифікатор вашого Розширення, в нашому прикладі це [email protected] .

(Не забувайте, косу риску, "/"! Без цього ваше розширення не буде зареєстрований.)

(My_extension може не працювати! Якщо ім'я папки містить символи підкреслення.)

Тепер все готово для випробування вашого розширення!

Запустіть Firefox. Firefox виявить посилання на каталог вашого розширення і встановить його. Коли з'явиться вікно браузера ви повинні побачити текст "Hello, World!" на правій стороні в панелі статусу.

Ви можете повернутися і внести необхідні зміни в .xul файл, після чого закрити і перезапустити Firefox і зміни негайно набудуть чинності.

упаковка

Тепер, коли ваше розширення працює, ви можете його упакувати для подальшого розгортання і установки.

За "зіпуйте" папку contents вашого Розширення (не саму папку розширення), і перейменуйте вийшов zip файл, так щоб він мав розширення .xpi. У Windows XP, ви можете зробити це дуже просто, вибравши всі файли і папки в папці вашого розширення, і клацнувши правою кнопкою миші і вибравши "Send To -> Compressed (Zipped) Folder". Zip файл буде створений. Просто перейменуйте його, і готово!

У Mac OS X, ви можете натиснути правою кнопкою миші на папці contents вашого Розширення і вибрати "Створити архів ..." для створення архіву. Однак, Mac OS X додає приховані файли в папку. Тому слід використовувати Terminal, для видалення прихованих файлів (чиї імена починаються з періоду), а потім ввести в командному рядку zip команду для створення архіву.

У Linux, ви аналогічним чином можете використовувати в командному рядку Zip інструменти.

Якщо у вас встановлено Extension Builder ви можете використовувати його для складання .xpi файлу (Tools -> Extension Developer -> Extension Builder). Просто виберіть каталог, де знаходиться ваше розширення (install.rdf т.д.), і натисніть кнопку Build Extension (Побудувати розширення). Це розширення має безліч інструментів для полегшення процесу створення розширень.

Тепер завантажте ваш .XPI файл на сервер, і зробіть, так щоб він визначався як application / x-xpinstall. Ви можете давати посилання на нього і дозволити людям завантажувати і встановити його. Для тестування нашого. XPI файлу можна просто перетягнути його у вікно менеджера розширень, відкривши його через меню Tools -> Extensions в Firefox 1.5.0.x, або Tools -> Add-ons в більш пізніх версіях.

Установка з web-сторінок

Існує безліч шляхів, якими ви можете встановлювати ваші розширення прямо з web-сторінок, в тому числі використання прямих посилань на файли XPI і використання InstallTrigger method об'єкта. Розробнику розширення і веб розробникам, рекомендується використовувати для установки XPI методи InstallTrigger, які дають більше можливостей їх користувачам.

Використання addons.mozilla.org

За допомогою сайту Mozilla Add-ons ви може поширювати ваше Розширення для безкоштовного користування. ВШЕ розширення матиме дзеркала на Mozilla, що забезпечить доступність вашого розширення, якщо воно стане дуже популярним. Сайт Mozilla також спрощує установку розширень для користувачів, і автоматично зробить доступними ваші нові версії для користувачів вашої поточної версії, після того як ви завантажили їх. Крім того Mozilla Add-ons дозволяє користувачам залишати коментарі та тим самим забезпечує зворотний зв'язок з Вашим Розширенням. Настійно рекомендується використовувати Mozilla Add-ons для поширення ваших розширень!

зайдіть на http://addons.mozilla.org/developers/ ласка зареєструйтесь і починайте поширення ваших розширень!

Примітка: Ваше Розширення викачуватиметься швидше і частіше, якщо у вас буде хороший опис і скріншоти з вашим розширенням в дії.

У Windows, інформація про розширення може бути додана до реєстру, звідки Розширення автоматично буде вилучатись в наступний раз, при завантаженні програми. This allows application installers to easily add integration hooks as extensions. Для отримання більш докладної інформації дивись Adding Extensions using the Windows Registry .

Детальніше про XUL оверлеїв

Крім додавання UI віджетів, ви також можете використовувати XUL фрагменти для:

• Змінити атрибути для "точки злиття", наприклад <statusbar id = "statusbar" hidden = "true" /> (ховається рядок стану)
• Видалити "точку злиття" з головного документа, наприклад, <statusbar id = "statusbar" removeelement = "true" />
• Контроль позиції вставки "віджета":

<Statusbarpanel position = "1" ... /> <statusbarpanel insertbefore = "other-id" ... /> <statusbarpanel insertafter = "other-id" ... />

Створення нових компонентів UI

Ви можете створювати ваші власні вікна і діалогові віконця в окремих .xul файлах, забезпечуючи їх функціональність за допомогою опису дій користувача в .js файлах, використовуючи DOM для маніпуляції UI "віджетами". Ви можете використовувати стилі з .css файлів для приєднання зображень, установки кольору і т.д.

Дивіться документацію по XUL на великих ресурсах для розробників XUL .

Файли За замовчуванням

Файли за замовчуванням, які ви використовуєте для профілю користувача, повинні бути поміщені в defaults / в корінь в ієрархії папок вашого Розширення. За замовчуванням .js файли з настройками повинні зберігатися в defaults / preferences / - після того як ви помістіть їх туди вони будуть автоматично завантажуватися в системні настройки Firefox при запуску, так що ви зможете отримати до них доступ використовую Preferences API .

Приклад файлу налаштувань за замовчуванням:

pref ( "extensions.sample.username", "Joe"); // рядок pref ( "extensions.sample.sort", 2); // число pref ( "extensions.sample.showAdvanced", true); // булево

XPCOM Components

Firefox підтримує XPCOM компоненти в розширеннях. Ви можете легко створювати свої власні компоненти на JavaScript або C + + (з використанням Gecko SDK ).

Помістіть всі ваші. JS або. DLL файли каталог components / - після установки розширення, вони автоматично будуть зареєстровані при першому запуску Firefox.

Для отримання додаткової інформації див. Як створити XPCOM компонент на JavaScript , Як створити XPCOM компонент з використанням Visual Studio і Cкнігі по створенню XPCOM Компонентів .

Один з можливих варіантів використання призначених для користувача XPCOM компонентів додати в командний рядок покажчик для Firefox або Thunderbird. Ви можете використовувати цей метод для запуску ваших розширень, як додатків:

firefox.exe -myapp

дивіться Chrome: Command Line , А також обговорення на форумі .

локалізація

Для підтримки більш ніж однієї мови, ви повинні замість окремих рядків з вашого вмісту використовувати "Сутності" або a href = " mks: // localhost / en / XUL_Tutorial / Property_Files "Title =" en / XUL_Tutorial / Property_Files ">" зв'язки рядків ". Це краще робити на самому початку розробки Вашого Розширення, а не повертатися, до цього пізніше!

Інформація про локалізацію зберігається в каталозі локалізації розширення. Наприклад, щоб додати локалізацію для нашого розширення, створіть директорію з ім'ям "locale" в каталозі chrome (де знаходиться каталог "content") і додайте наступний рядок в файл chrome.manifest:

locale sample en-US chrome / locale / en-US /

Для створення локалізації, значення атрибута в XUL, ви вставляєте його значення в .ent (або .dtd) файлі який, потім ставите каталог локалізації і який виглядає так:

<! ENTITY button.label "Click Me!"> <! ENTITY button.accesskey "C">

Потім, підключаєте його у верхній частині вашого XUL документа (відразу під рядком), ось так ::

<! DOCTYPE window SYSTEM " chrome: //packagename/locale/filename.ent ">

де window це localName значення, яке є кореневим елементом вашого XUL документа, і властивість SYSTEM значення якого chorm URI до файлу з сутностями. Для прикладу нашого розширення, ми використовуємо кореневий елемент overlay.

Для використання сутностей змініть ваш XUL, що б він виглядав так:

<Button label = "& button.label;" accesskey = "& button.accesskey;" />

Chrome реєстр завжди буде завантажувати той файл з сутностями, який відповідає поточній обраній локалізації.

Для рядків які ви використовуєте в сценарії (скрипті), створіть файл .properties, текстовий файл який буде містити рядки в такому форматі:

key = value

а, потім використовуйте nsIStringBundleService / nsIStringBundle або тег <Stringbundle> , Щоб отримати значення в сценарії (скрипті).