Написати розширення для google chrome нескладно. Але при написанні першого розширенням можуть виникнути (і виникають) питання. Більшість мінлива з написання першого розширення розраховані на використання маніфесту першої версії, підтримка якого в недалекому майбутньому припиниться.
У цій статті буде розглянуто:
- Як складати маніфест v.2
- Як працювати з віддаленими ресурсами
- Як працювати з cookies
- Як працювати з local storage
- Як працювати з повідомленнями
До кінця статті у нас буде готово розширення-органайзер, в якому буде поле для додавання нового завдання, а так само список завдань на поточний день. Позначимо всі вимоги до органайзеру:
- Повинен мати поле для додавання події (дата, час, подія)
- Повинен відображати всі завдання на поточний день, відсортовані за часом
- Всі минулі події повинен відображати закреслені
- Повинен мати поле для введення часу, за скільки треба показувати повідомлення, а так само чекбокс дозволяє і забороняє показувати повідомлення
- За вказаний час до події повинен відображати повідомлення про наближення подію
Почнемо створювати розширення з самого початку, тобто з маніфесту. Маніфест - це той самий файл, в котрому прописуються всі параметри розширення. Назва, опис, версія, дозвіл на доступ до сайтів, дозвіл на використання кук, повідомлень, локального сховища. Загалом, маніфест - це мозок розширення. Створюємо файл manifest.json. Маніфест - єдиний файл, який повинен мати заздалегідь визначене ім'я, всі інші файли можна буде називати як завгодно. У цьому файлі є три обов'язкових поля:
Тут є пара правил:
- Версія маніфесту повинна бути целочисленной, тобто повинна писатися як 2, а не "2".
- Версія розширення повинна бути строковою, але містити тільки числа і точки, тобто "1.0" - добре, а 1.0 і "0.9 beta" - погано.
З обов'язковими полями - все, перейдемо до створення спливаючого вікна розширення. Для того, щоб після натискання на піктограму, відкривалося вікно, необхідно додати в маніфест поле "browser_action"
Тепер створимо спливаюче вікно. Це звичайна html сторінка, яка може бути будь-якого розміру і кольору, ніяких фокусів. Назвемо файл "popup.html". Створити цей файл мало - його треба вказати в маніфесті. Так ми і зробили: «default_popup»: «popup.html».
Додавання розширення в браузер
Тепер прийшов час перевірити працездатність нашого расшірнія. Для цього завантажимо розширення в браузер. Відкриваємо в хромі меню розширень. Ставимо птицю на "Developer mode".
Після цього з'являться три кнопки. Натискаємо "Load unpacked extension. ". Вибираємо папку з файлами розширення. Після цього з'явиться наше розширення. Якщо все правильно, то після натискання на іконку - повітся вікно:
підключення скриптів
Тепер підключимо ці скрипти в popup.html
За допомогою storage в хромі можна зберігати призначені для користувача дані. І саме в storage наше розширення і буде зберігати прийдешні події. На те є дві причини. По-перше, дані, храніщіеся в storage можна синхронізувати, якщо залогінитися в браузері. А по-друге, дані можна зберігати не тільки у вигляді рядка, як в cookies, а в будь-якому вигляді, тобто можна зберігати і масиви і об'єкти. Щоб це запрацювало, відкриємо доступ до storage в маніфесті.
Тепер переробимо всплавающее вікно. У спливаючому вікні буде поле з сьогоднішньої датою, три інпут для дати, часу і опису нового події, кнопка для додавання нового події, а так само список всіх подій на сьогодні.
І відразу ж додамо відображення дати в блоці #today_date.
Виглядати має так:
Отже, при натисканні на кнопку "+" у нас має додаватися подія. Спочатку файлу оголосимо глобальну змінну storage - об'єкт для роботи з storage, а так же глобальний масив tasks для зберігання подій.
Функція валідації перевіряє, що дата записана в форматі d.m.yyyy, а час в форматі hh: mm, а так само, що в описі події не менше трьох символів.
З додаванням розібралися, переходимо до отримання подій на сьогодні. Для цього треба отримати всі події з бази, вибираємо з усіх тільки сьогоднішні події і сортуємо їх по часу по зростанню.
Функція getTodayTasks () повертає із загального списку лише події з сьогоднішньої датою.
Функція sortTasks () сортує події по зростанню часу.
повідомлення
Прийшов час налаштувати відображення повідомлень на екрані. Додамо у спливаюче вікно спеціальний чекбокс. Якщо цей чекбокс буде відзначений - уведомленіея будуть показуватися, якщо не буде відзначений - не будуть. Так само додамо текстовий інпут. Цифра в цьому інпут буде показувати, за який час до події буде показуватися повідомлення. Тобто якщо у нас подія призначено на 19:00, в цьому текстовому інпут буде 5, значить о 18:55 з'явиться повідомлення. Додамо в popup.html код з цими інпут
Тепер давайте розберемося з тим, як це буде працювати. При натисканні на чекбокс, буде перевірятися його атрибут checked, значення атрибута буде записуватися в cookie "show_notifications". Перейдемо до текстового інпут. За зміною його значення, нове значення буде затверджувати, якщо воно целочисленное і не більше 120, записуємо нове значення в cookie "when_to_notify".
Але для того, щоб у нас це запрацювало, треба відкрити доступ до cookies. Для цього заходимо в manifest.json і додаємо в "permissions"
Тепер можна приступати до скрипту. Заходимо в popup.js. Для початку встановимо початкові значення в інпут. За замовчуванням чекбокс не зазначено, тобто повідомлення не показуються, а час дорівнює 0. При кліці на чекбокс, буде змінюватися значення cookie "show_notifications". При зміні значення в тектових поле, буде змінюватися значення cookie "when_to_notify".
Розглянемо докладніше функції. Почнемо з функцій роботи з cookies. В даному випадку були взяті готові функції з w3schools.com.
Розберемося з функцією setCheckbox (). Вона отримує cookie "show_notifications" і перевіряє, якщо отримане значення дорівнює "true" (текстове, так), то параметр checked у чекбокса true, інакше false.
Тепер розглянемо setWhenToNotify (). Вона приймає нове значення таймера. Якщо це значення - целочисленное і не більше 120 хвилин, то в cookie "when_to_notify" встановлюється нове значення. Якщо змінна не пройшла цю валідацію, то в інпут повертається попереднє значення з cookies "when_to_notify".
Перейдемо до самих повідомленнями. Для цього відкриємо доступ до повідомлень і підключимо фоновий background.js. Потрібно підключити саме фоновий файл, так як якщо повідомлення викликати з popup.js, то повідомлення будуть з'являтися тільки якщо відкрито спливаюче вікно.
Останній рядок дає доступ до віддаленого файлу. Справа в тому, що картинка, яка відображається в повідомленні обов'язково повинна бути доступна розширенню віддалено. В даному випадку файл локальний, але доступ відкривати все одно треба. Тепер візьмемося за background.js. Оголосимо змінну storage і порожній масив tasks. Далі раз в хвилину скрипт буде отримувати список сьогоднішніх подій і отримувати з них список завдань, які повинні відбутися через зазначений час. Після цього для кожної такої задачі буде показано повідомлення.
Функції getTodayTasks () і getCookie () взяті з popup.js. Так що почнемо розбір з функції getNextTask (). Функція порівнює поточний час і час події, якщо воно дорівнює тому значенню, яке зберігається в cookie "when_to_notify", то в масив next дописується рядок з часу події і його опису. Після перевірки всіх подій возвращется масив next.
Функція show () показує повідомлення з заданим текстом.
Результатом роботи цього скрипта буде таке ось повідомлення:
