Індикатори ключової інформації на сайтах для Firefox нашвидкуруч
Ціль цієї статті не включає пояснення роботи з Custom Buttons: за посиланням можна знайти достатньо посилань на документацію та форуми. Втім, все влаштовано досить просто: через контекстне меню панелі інструментів створюється кнопка, в діалозі нової кнопки вводиться код, вибираються деякі додаткові плюшки, потім кнопка перетягується на будь-яку зручну панель інструментів — і вона вже готова до роботи (до речі, розширення вводить додатковий протокол) custombutton:// — він дозволяє легко публікувати кнопки в мережі і ділиться ними тим же способом, як ми використовуємо звичайні посилання або букмарклети).
Я спробую поділитися деякими рецептами коду, присвяченими згаданим індикаторам. Рухатимемося від простого до більш складного. Код прикладів повинен працювати у Firefox, починаючи з 12-ї версії. Усвідомлюю, що інші елементи коду можуть здатися різним людям по-різному безглуздими, але приклади і не претендують на бездоганність: я тільки поділяюся побутовим досвідом за допомогою аматорського коду і щиро перепрошую, що не можу цього зробити краще.
1. Простий запит інформації.
Наприклад візьмемо не надто привабливий, але простий і яскравий випадок. Вимагаємо поточну кількість статей в англійській Вікіпедії (яка зараз наближається до чотирьох мільйонів). Для цього в першу вкладку діалогу для створення кнопки вставимо наступний код (вкладка так і називається - «Код»):
У майбутньому для іншого сайту та іншої інформації нам потрібно буде змінити лише кілька рядків. Спробуймо розібратися, що робить код.
Код кнопок виконується через new Function(), тому немає необхідності якось захищатися від втручання у простір імен браузера.
Далі ми призначаємо на майбутнє змінну для кнопки, яка спочатку представлена якце. І переходимо до двох підфункцій: одна з них отримуватиме код документа, друга розбиратиме його та видаватиме потрібну інформацію.
У результаті ми маємо кілька результатів запиту: перший успішний виклик (з аргументом pureXHR == true) з безпосереднім отриманням DOM веде до виклику функції аналізу документа, перший тайм веде до рекурсивного повторного запиту чистого коду (з аргументом pureXHR == false) з подальшим перетворенням у DOM і знову-таки викликом функції розбору документа, другий тайм або помилка зв'язку ведуть до відповідних повідомлень про невдачу.
Такий простий спосіб ощадливого запиту інформації на 50 рядків коду з дрібницею. Тепер спробуємо трохи збагатити інструмент.
2. Індикатори новин із перевірками по таймеру.
Як приклад, візьмемо особисті повідомлення на сайті rutracker.org. Розширення буде перевіряти сторінку особистих повідомлень (можна й будь-яку іншу, нас буде цікавити загальна для більшості сторінок шапка; просто сторінка особистих повідомлень може бути найбільш економним варіантом), шукати потрібний елемент, перевіряти його властивості і повідомляти про статус змінної іконки на кнопці і до того ж підказкою (можна додавати звукове оповіщення або вікно, що спливає над треєм, але в цій статті ми про такі складнощі говорити не будемо).
У цьому прикладі ми трохи змінимо принцип дії: нам знадобиться не перша, а друга вкладка діалогу створення кнопки. Код цієї вкладки виконується не при натисканні на кнопку, а відразу після запуску браузера. Це дає нам можливість призначити потрібні змінні та функції на весь час запитів по таймеру, а також встановити обробники різних натискань на кнопку для більшої гнучкості та зручності. Далі ми розбиратимемо лише зміни у коді порівняно з першим варіантом.
До парипочаткових параметрів додалося ще два: delay (кількість секунд між запуском браузера та першим запитом по таймеру) та interval (інтервали між подальшими запитами за хвилини). У нашому прикладі це десять секунд і годину відповідно.
Тепер у нас не дві, а цілих чотири іконки: показник запиту, показники наявності новин і відсутності, а також іконка для помилок.
Ми також створюємо спеціальну змінну для страхового об'єкта DOMParser, щоб не перетворювати його заново при кожному запиті.
Потім ми додаємо обробник натискань на кнопку мишею. Нам достатньо буде натиснути лівою та середньою кнопкою миші. При першому натисканні ми ініціюватимемо позачерговий запит (при цьому таймер перезапускатиметься), при натисканні середньою кнопкою ми відкриватимемо потрібну сторінку в браузері, щоб детальніше ознайомитися з новинами. Обробник середньої кнопки перевірятиме поточну вкладку і, якщо вона порожня і при цьому в неї нічого не почало завантажуватися, відкриватиме сторінку в ній, інакше — в новій вкладці. Також при такому відкритті ми будемо перезапускати таймер і скидати показник новин до наступного запиту, маючи на увазі, що відкриття сторінки дорівнює позачерговому запиту і приведе до прочитання (тобто скидання) новин на сайті.
Обробники результатів XHR у цьому прикладі видають не alert-и, а зміни іконок та підказок (в останні входить час запиту та коротка інформація про результат).
Після визначення змінних та функцій ми прив'язуємо обробник натискань до кнопки, викликаємо перший відкладений запит і запускаємо таймер.
До речі, у Custom Buttons є невеликий баг з обробниками подій: якщо не додати видалення обробника через onDestroy, обробникинашаровуються (дублюються) щоразу, як ви викликаєте налаштування панелей інструментів (відкриваєте та закриваєте палітру інструментів).
3. Індикатори новин із перевірками по таймеру та збереженням станів між сесіями браузера.
Тепер про додавання коду.
Як ми бачимо, додалися змінні для деяких внутрішніх механізмів: усі вони стануть у нагоді для збереження даних між сесіями. Ми будемо використовувати ту ж базу налаштувань, що й розширення (за допомогою простих файлів або баз даних звертатися не будемо, щоб уникнути зайвої складності). Ми вибрали найуніверсальніший спосіб зберігання рядкових даних (***ComplexValue), щоб у разі потреби можна було зберігати у базі юнікод.
До обробника натискання на кнопку додалися інструкції зі скидання прапора новин (кнопка запитує ключ із налаштувань, перетворює його на об'єкт через JSON, змінює прапор, запаковує об'єкт у рядок і знову зберігає його в базі налаштувань).
Після визначення змінних та функцій і перед прив'язкою обробників, відкладеним викликом та запуском таймера нам потрібно зробити ще одне: перевірити, чи є в базі налаштувань ключ для зберігання наших даних. Якщо ініціалізація кнопки запущена вперше (ми щойно створили кнопку), ключа ще немає, тоді ми створюємо заготівлю об'єкта з порожніми значеннями параметрів і неактивним прапором новин.
Приклади можна нарощувати в міру необхідності: ускладнювати способи оповіщення про новини, додавати ключові елементи та параметри порівняння, створювати нові деталі інтерфейсу (наприклад, панелі з динамічною текстовою інформацією поруч з кнопкою) і так далі. Про це можна почитати на сайті розробників Firefox або підглянути в прикладах готових кнопок на сайті розробника Custom Buttons.
Дякуюусім, хто дочитав. І вдалих вам експериментів)
Хардкорна конфа за С++. Ми запрошуємо лише профі.