Розробка розширення для firefox, або мій перший досвід, на прикладі скріншотер +18
- 23.09.16 6:07 •
- lnroma •
- # 310844 •
- Хабрахабр •
- 30 •
- 6500
- такий же як Forbes, тільки краще.
Після написання статті Системні скрипти на php для linux, пишемо скріншотер. у мене з'явилася ідея «А чому б, не написати розширення яке зав'язати на мій скрипт, з можливістю автоматичного вивантаження на яндекс диск.» ... Почитавши документацію про розробку розширень я вирішив все ж почати писати.
Ось це маленька кнопочка та скріншот на яндекс диску, результат прототипу розширення, написаного за пару годин. Про процес його створення під катом ...
Увага: це перша версія програми, в майбутньому в ролі скріншотер виступатиме скрипт з попередньої статті ...
Розширення яке я розробив має наступну файлову структуру:
-chrome.manifest
-install.rdf
--content
----browserOverlay.js
----browserOverlay.xul
----options.xul
--skin
----browserOverlay.css
Зараз нас цікавлять файли: chrome.manifest і install.rdf. chrome.manifest містить в собі опис структури проекту:
Перші два рядки хром маніфесту містять: тип даних, назва пакета, шлях до файлів пакета.
Третій рядок реєструє, так званий, overlay (поверхневий шар) тобто цей шар лягати як би по верх вже існуючого, і додає елементи управління в браузер.
Файл install.rdf це маніфест установки, який містить інформацію про що додається розширення:
Як ви бачите. Він містить в собі ідентифікатор, назва програми, версію, творця, тип програми, URL панелі настройки і д.р. інформацію.
Я не думаю що варто загострювати увагу на цьому файлі, так як все цілком очевидно. Ми можемо тільки розібрати одну опцію optionsURL, це url який веде до налаштувань розширення, налаштування в свою чергу описуються файлом options.xul:
У цьому файлі, ми описали всього 2-ва поля логін і пароль. Зверніть увагу на імена «extensions.xulphpsrc.login» і «extensions.xulphpsrc.pass» вони містять як би деревоподібну структуру, і їх буде зручніше отримувати із загальної маси записів, та й є, якась гарантія унікальності ключів ...
Далі розглянемо фаил browserOverlay.xul:
Що він робить? він підключає два файли browserOverlay.css, browserOverlay.js і створює toolbar і єдину кнопку на ньому «Скріншот»:
Вся логіка додатка закладена в browserOverlay.js
Даний фаил ми розберемо трохи докладніше хоча він тривіальний і виконує всього 2-ва дії: робить скріншот, і завантажує його на yandex disk. Скріншот він робить за допомогою виклику системної утиліти crot, і згружает результат за допомогою curl. Оброблювач «кліка» на кнопку «скріншот» ми поставили метод makeScreen:
Це точка входу в додаток, тут формується ім'я майбутнього скриншота і відбувається виклик, linux програми, scrot. Ми вибираємо мишкою область екрану і робимо знімок, після цього програма переходить в наступний метод uploadToYandex, і передає ім'я файлу для завантаження.
У цьому методі, як ви бачите немає ні чого екстраординарного, він робить 2-ва запиту за допомогою curl в yandex.disk, один завантажує створений файл, інший його публікують. Спасибі lexore за коментар. Зрештою, ми отримуємо повідомлення що скріншот збережений.
Ну ось тепер у нас є розширення як його встановити? Для розробки ми можемо, просто, створити файл під ім'ям програми в папці:
Де id - ідентифікатор, [user] - користувач firefox наприклад у мене вийшло так:
І що містить шлях до директорії з файлами розширення:
/ Extensions / phpsrc / (наприклад у мене такий).
Перезавантажуємо firefox і все готово ... Налаштування розширення, заходимо в доповнення і шукаємо своє розширення, натискаємо на кнопочку налаштувати, вводимо логін і пароль від yandex'a і готово, тепер можна натиснути кнопочку і зробити скріншот ...
Висновки: Я в перший раз писав розширення для firefox, і часу у мене більше на написання статті пішло. Це перша версія програми надалі є плани розвиватися в напрямок, використання php в цій сфері. Всі скріншоти зроблені розробленим розширенням. Дякую всім за увагу, всього хорошого ...
Так, це так, але API цих WebExtensions дуже небагатий. Тривіальні речі з його допомогою не зробити. Наприклад, вам не вдасться повторити розширення fb2reader (природно, повторювати його немає необхідності, але якщо ви хочете зробити щось схоже, як наприклад перетворення XML-файла з балкою в таблицю, то робити доведеться за застарілою технологією). Так що якщо залишать тільки його в такому вигляді, як є зараз, дуже багато чого Похер.
WebExtensions допрацьовують в кожному випуску. Наприклад в 49-й версії додали можливість маніпуляцій з історією. І будуть допрацьовувати далі до паритету з Chromium.
Так можна буде відкрити в браузері XML-файл, немов це HTML (з jQuery та іншими улюбленими веб-майстрам фішками) чи ні? І з файлової системи, і з інтернету?
Вся справа в тому, що XUL набагато могутніше WebExtensions. Паритет тут нічим не допоможе.
У Firefox все дуже сильно зав'язане один на одного.
Перехід на новий движок (Servo), оптимізований під багатопоточність і багатоядерність (коріння нинішнього движка Gecko йдуть ще за часів Netscape, коли в переважній більшості ПК було не більше одного процесорного ядра), вимагає «смерті» XUL (який, як я розумію, сильно прибитий до старого движку цвяхами). А це, в свою чергу, вимагає і переписування доповнень на новий API. Заодно і новий інтерфейс буде, заснований на HTML5.
Коли вони допив webextension - розширення під хром можна буде іcпользовать в ff (можливо з перепакування) - теж буде непогано.
Проблема в тому, що можливості web extension api обмежені, і там навряд чи вдасться реалізувати доповнення типу Tree Style Tab або Advanced Locationbar.
Tree Style Tab можна реалізувати, не бачу проблем. Advanced Locationbar - так, прямо в такому вигляді не реалізується на хромі. Але у мене більше емоцій з приводу низкоуровневого доступу до мережі і файлової системи. Корисні фішки були, я буду сумувати за ним.
Tree Style Tab можна реалізувати, не бачу проблем.
Чому тоді його немає в хромі, де web extension api розвинений набагато краще, ніж зараз в ФФ?