Продовжуємо цикл наших статей "Школа", присвячених створенню розширень і додатків для браузера Google Chrome. І сьогодні ми спробуємо створити найпростіше розширення "Hello, World!" із застосуванням лише одного єдиного Chrome API - Browser Actions. До речі, дуже приємно, що до нашого циклу статей приєднався розробник Вадим. який накидав для цього уроку приклад розширення і повністю підготував Урок №4.
А тепер приступаємо до створення розширення. Створюємо папку спеціально під новий проект. Назвемо її як завгодно. Всі наші файли будуть створюватися і перебувати в ній.
З чого починаємо створювати розширення, і що є фундаментом будь-якого доповнення для Google Chrome? Це manifest.json. Просто створіть текстовий файл і перейменуйте його в manifest.json (до речі, ми адже всі пристойні люди і не використовуємо приховування розширень для зареєстрованих типів файлів, інакше може виникнути файл manifest.json.txt, що виглядає безглуздо і не буде працювати надалі). Відкриваємо створений маніфест і пишемо в нього.
Це та базова частина, що рекомендується в кожному manifest.json. Що ми написали? Перш за все вказали ім'я (name) нашого розширення. Воно буде використовуватися тепер всюди: в каталозі, в списку розширень браузера і т.п. Опис розширення (description) не обов'язково, але вкрай бажано! Використовується і в каталозі і в браузері і в цілому допомагає користувачам сформувати перше уявлення про те, що робить ваша розробка. Номер поточної версії вашого розширення (version). Без нього нікуди. Випускаєте оновлення - міняєте номер версії на більший. Як міняти номери вирішувати тільки вам: 2.0 або 1.1 або 1.0.0.1. Як завгодно. Також зазначаємо комплект іконок, які будуть використовуватися. Рекомендовано використовувати розміри 128, 48 і 16. Так як це показано у нас.
Ми вказали в маніфесті іконки? Значить тепер нам треба їх помістити в папку нашого розширення. І назвати так, як ми і описали. До речі, знову ж по документації рекомендується використовувати тип PNG хоча підтримуються і інші. Самі картинки в нашому уроці вибирайте які хочете. Вони і будуть представляти вашу розробку.
Ми описали основу. Але ми хочемо, щоб наше розширення створювало кнопку на панелі інструментів. при натисканні на яке відкривалося вікно. Тобто нам треба описати в нашому маніфесті блок Browser Actions. Дописуємо і отримуємо ось що.
Тут ми вказали, що хочемо створити. А саме кнопку з заголовком default_title, з іконкою default_icon, при натисканні на яке буде відкриватися віконце popup.html. Ми використовували іконку розміру 48, хоча насправді на панелі інструментів може вміститися лише розміром до 19 пікселів. Але нічого страшного. Вона буде масштабироваться сама.
Ми повністю описали наш manifest.json. А тепер нам потрібно створити власне popup.html, на який ми і посилаємося. Створюємо його також як і manifest.json. Сам popup.html це самий звичайний HTML-документ. Сподіваюся, ви вже маєте базове уявлення про HTML. Тому в створений документ дописуємо наступне.
Простіше кажучи, наша сторінка буде включати в себе одну картинку і фразу "Привіт, світ!".
Розширення готово! А тепер давайте його протестуємо. На сторінці chrome: // extensions / переходимо в режим розробника і тиснемо кнопку "Завантажити розпаковане розширення.". Вказуємо там нашу папку і все! Розширення встановлено і працює. Знаходимо іконку на панелі інструментів і тиснемо її. Бачимо the page? Відмінно =)
Зразок того, що повинно було статися можна скачати.
Детальна документація доступна тут.
Дякуємо за увагу. Питання?