- Що таке розширення Chrome?
- Що ви хочете створити?
- план
- Крок перший: настройка
- Крок другий: перевірте, чи працює воно
- Крок третій: зробіть приємний дизайн
- закінчення плану
- результат
- Крок 4. Публікація розширення
- висновок
Ви коли-небудь замислювалися над тим, як зробити розширення для Chrome? Ну, я тут, щоб розповісти вам, наскільки це просто. Виконайте наступні дії, ваша ідея стане реальністю і ви зможете миттєво опублікувати реальне розширення в інтернет-магазині Chrome.
Що таке розширення Chrome?
Розширення Chrome дозволяють додавати функціональні можливості в веб-браузер Chrome без глибокого занурення в нативний код. Це приголомшливо, тому що ви можете створювати нові розширення для Chrome на основі технологій, з якими добре знайомі веб-розробники: HTML, CSS і JavaScript. Якщо ви коли-небудь створювали веб-сторінку, то зможете і створити розширення - швидше, ніж пообідаєте. Єдине, що вам потрібно дізнатися - це як додати деякі функції в Chrome за допомогою JavaScript API, які надає Chrome.
Що ви хочете створити?
Перш ніж почати, ви повинні мати загальне уявлення про те, що ви хочете зробити. Це не повинно бути якоїсь нової проривної ідеєю, з початку ми можемо просто зробити проект для задоволення. У цій статті я розповім вам про свою ідею і про те, як я реалізував її вигляді розширення Chrome.
план
Деякий час назад я використовував розширення Unsplash - воно показувало хороші фонові зображення на відкривається за замовчуванням порожній вкладці. Пізніше я замінив його розширенням Muzli , Яке перетворює вкладку за умовчанням в стрічку матеріалів про дизайн і новин з усього Інтернету.
Давайте використовувати ці два розширення як натхнення для створення чогось нового, але на цей раз для любителів кіно. Моя ідея - показати випадкове фонове зображення фільму кожен раз, коли ви відкриваєте нову вкладку. При прокручуванні розширення повинно перетворюватися в хороший канал про популярних фільмах і телешоу. Давайте почнемо.
Крок перший: настройка
Перший крок - створити файл маніфесту з ім'ям manifest.json. Це файл метаданих в форматі JSON, який містить такі властивості, як ім'я вашого розширення, опис, номер версії і так далі. У цьому файлі ми повідомляємо Chrome, що розширення буде робити, і які дозволи він вимагає.
Для розширення нам потрібно мати дозвіл на керування activeTab, тому наш файл manifest.json виглядає приблизно так:
{ "Manifest_version": 2, "name": "RaterFox", "description": "The most popular movies and TV shows in your default tab. Includes ratings, summaries and the ability to watch trailers. "," Version ":" 1 "," author ":" Jake Prins "," browser_action ": {" default_icon ":" tab-icon.png "," default_title " : "Have a good day"}, "permissions": [ "activeTab"]}
Як ви можете бачити, ми вказуємо, що newtab.html буде HTML-файлом, який повинен відображатися кожен раз, коли відкривається нова вкладка. Для цього нам потрібно мати дозвіл на керування activeTab, тому, коли користувач намагається встановити розширення, вони будуть попереджені про всі дозволи, які необхідні розширення.
Ще одна цікава річ всередині manifest.json - це дії браузера. У цьому прикладі ми використовуємо його, щоб встановити заголовок, але взагалі є більше параметрів. Наприклад, щоб показувати спливаюче вікно, коли ви натискаєте значок програми всередині адресного рядка, все, що вам потрібно зробити, це щось на зразок цього:
Тепер popup.html буде відображатися всередині спливаючого вікна, яке створюється у відповідь на клацання користувача на дії браузера. Це стандартний HTML-файл, тому він дає вам свободу дій над тим, що відображає спливаюче вікно. Просто помістіть частину свого магії в файл з ім'ям popup.html.
Крок другий: перевірте, чи працює воно
Наступний крок - створити файл newtab.html і помістити в «Hello world»:
<! Doctype html> <html> <head> <title> Test </ title> </ head> <body> <h1> Hello World! </ H1> </ body> </ html>
Щоб перевірити, чи працює він, відвідайте chrome: // extensions в вашому браузері і переконайтеся, що прапорець «Режим розробника» встановлено у верхньому правому куті.
Натисніть Load unpacked extension і виберіть каталог, в якому живуть ваші файли розширень. Якщо розширення діє, воно буде активним відразу, щоб ви могли відкрити нову вкладку і побачити свій «Hello world».
Крок третій: зробіть приємний дизайн
Тепер, коли у нас з'явилася наша перша функція, прийшов час зробити її красивою. Ми можемо просто створити нову вкладку, створивши файл main.css в нашому каталозі розширень і завантаживши його в наш файл newtab.html. Те ж саме відбувається з включенням файлу JavaScript для будь-яких активних функцій, які ви хотіли б використовувати. Припускаю, що ви створювали веб-сторінки раніше, і тепер ви можете використовувати свої навички, щоб показати своїм користувачам все, що захочете.
закінчення плану
Все, що мені знадобилося для завершення розширення - це HTML, CSS і JavaScript, тому я не думаю, що важливо глибоко зануритися в код, тому я розповім про це швидко.
Ось що я зробив:
Для моєї ідеї мені потрібні були хороші фонові зображення, тому в файлі JavaScript я використовував TMDb API для отримання списку популярних фільмів, взяв їх фонові зображення і помістив їх в масив. Всякий раз, коли сторінка завантажує його, він випадковим чином вибирає одне зображення з цього масиву і задає його як фон сторінки. Щоб зробити цю сторінку цікавішою, я також додав поточну дату у верхньому правому куті. І для отримання додаткової інформації, він дозволяє користувачам клікнути на фон, який призводить до відвідування сторінки IMDb фільму.
Я створив екран з хорошою стрічкою популярних фільмів, коли користувач намагається прокрутити вниз. Я використовував той же API для створення картки фільму із зображенням, заголовком, рейтингом і кількістю голосів. По кліку на картці показується огляд з кнопкою для перегляду трейлера.
результат
Тепер з цим маленьким файлом manifest.json і деякими HTML, CSS і JavaScript, кожна нова вкладка, яку ви відкриваєте, виглядає набагато цікавіше:
Крок 4. Публікація розширення
Коли ваше перше розширення Chrome виглядає красиво і працює так, як повинно, прийшов час опублікувати його в магазині Chrome. Просто перейдіть за цим засланні , Щоб перейти на панель інструментів Chrome Web Store (вам буде запропоновано увійти до свого облікового запису Google, якщо це не так). Потім натисніть кнопку «Add new item», прийміть умови, і ви перейдете на сторінку, де ви можете завантажити розширення. Тепер стискаємо папку, яка містить ваш проект, і завантажуємо цей ZIP-файл.
Після успішного завантаження файлу ви побачите форму, в якій ви повинні додати деяку інформацію про своє розширення. Ви можете додати іконку, докладний опис, завантажити деякі скріншоти і так далі.
Переконайтеся, що ви надали кілька хороших зображень, щоб показати свій проект. Магазин може використовувати ці зображення для просування вашого новаторського проекту. Чим більше зображень ви надасте, тим більш помітним буде ваше розширення. Ви можете переглянути, як ваше розширення показується в веб-магазині, натиснувши кнопку «Попередній перегляд». Коли ви задоволені результатом, натисніть «Опублікувати зміни». Готово!
Тепер перейдіть в Інтернет-магазин Chrome і знайдіть розширення по своїй назві (може знадобитися деякий час, перш ніж воно там з'явиться). Якщо вас це цікавить, ви можете знайти моє тут .
Залишилося тільки отримати користувачів!
висновок
Веб-розробнику дуже легко створити розширення Chrome. Все, що вам потрібно, це HTML, CSS, JavaScript і базові знання про те, як додати функціональність за допомогою деяких JavaScript API, які надає Chrome. Ваше перше розширення може бути опубліковано в Інтернет-магазині Chrome за все за 20 хвилин. Створення нового, стоїть і красивого розширення займе, звичайно, трохи більше часу. Але все залежить від вас!
Використовуйте своє творче мислення, щоб придумати щось цікаве, але якщо ви коли-небудь застрягнете, є відмінна документація по розширень Chrome - ймовірно, вона зможе вам допомогти.
Якщо ви знайшли друкарську помилку - виділіть її та натисніть Ctrl + Enter! Для зв'язку з нами ви можете використовувати [email protected] .
Що таке розширення Chrome?Що ви хочете створити?
Що таке розширення Chrome?
Що ви хочете створити?
