Хотіли створити розширення для Chrome, але не знайшли ніякої документації?
У даній статті ми розглянемо створення розширення для Chrome на прикладі "Hello world".
Для початку ми повинні визначиться з тим, що наше розширення буде виконувати
Від розширення "Hello world" зверніть увагу на таке
Ми вже визначилися з функціоналом розширення і тепер можна переступити
Для початку потрібно буде створити папку, де будуть знаходиться файли нашого розширення
Назвемо її наприклад "HelloWorld"
І в ній файл "manifest.json"
"Manifest.json" це файл в якому буде "описано" наше розширення а так же будуть задані деякі параметри
Спочатку знайдемо іконку для додатка
Мені до душі припала ось така:
Переміщаємо іконку в папку img і даємо їй ім'я icon
Тепер в папці з розширенням створюємо файли "popup.html". "Background.html", "options.html" (як ви вже напевно здогадалися розширення пишеться на HTML, JS (тесть все що може входити в звичайну html сторінку))
Ну ось вже і готово наше розширення
Встановити його можна в "Налаштування" => "Розширення" => "Завантажити розпакувати розширення." І вказати шлях до нашої папці "Helloworld"
При запуску розширення у нас виконається код з "background.html" а у нас там висновок 1-го повідомлення
(Тобто при запуску браузера запускаються розширення і ми будемо при кожному запуску спостерігати висновок повідомлення)
Якщо ми кликнемо по іконці нашого розширення то ми побачимо спливаюче меню в якому буде код з "popup.html"
А якщо по іконці розширення ПКМ (правою кнопкою миші) і натиснемо на пункт "Налаштування", то ми потрапимо на сторінку, в якій буде код з "options.html"
Так-же можна "скомпілювати" розширення в один файл
Перейдемо в Chrome "Налаштування" => "Розширення" => "Пакування розширення."
Вкажіть шлях до папки з розширенням і на виході ви отримаєте 2 файли:
- * .crx - саме розширення
- * .pem - файл секретного ключа (якщо припустимо ви створили розширення і хочете його потім розвивати, але щоб Chrome бачив вашу нову версію розширення як "оновлену" при подальшій упаковці розширення потрібно буде вказувати цей-же файл секретного ключа)
Бажаю вдалих вам розробок!