Як створити розширення Chrome

У цій статті я навчу вас, як зробити власне розширення Chrome. Я базую це на уроках, отриманих під час створення TalkToMe, розширення Chrome, яке допомагає інвалідам із зором, читаючи вміст веб-сайтів та переходячи на інші веб-сторінки.

Я розгляну основи налаштування вашого розширення, зокрема:

  • Налаштування файлів для налаштування
  • Готуємо його до магазину Chrome
Я не буду висвітлювати, як керувати звуковими функціями, такими як обробка дозволів мікрофона. Про це розповів у цій статті мій друг Палаш, а також використовує розширення TalkToMe як приклад.

Налаштування файлів для налаштування

Спочатку перейдіть до розширень chrome: // у своєму браузері або просто натисніть «Інші інструменти» та «Розширення» в меню Chrome. Це має призвести вас до сторінки управління розширеннями, де ви можете ввімкнути режим розробника (він повинен бути у верхньому правому куті).

Потім вам потрібно буде створити manifest.jsonфайл у новому каталозі для вашого розширення. Цей файл надає важливу інформацію для вашого розширення для функціонування, таку як дозволи та файли сценаріїв, з якими ви пов’язуєте свій проект. Ось як повинен виглядати вміст вашого маніфесту:

{ "name": "Chrome Extension Example", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2}

Щоб завантажити свій каталог на сторінку Керування розширеннями, натисніть кнопку «Завантажити без упаковки» та виберіть свій каталог. Це зв’яже ваші файли з веб-інтерфейсом.

Ще одним важливим файлом, який вам доведеться налаштувати background.js, є фоновий сценарій вашого проекту.

Приклад фонового сценарію має такий тип структури:

chrome.runtime.onInstalled.addListener(function() { // add an action here});

Він буде працювати завжди, коли ваше розширення ввімкнено, і корисно для прослуховування різних подій, таких як натискання клавіатури, або для переходу на різні сторінки.

Ви навіть можете мати кілька фонових сценаріїв. Вам просто потрібно спочатку зареєструвати їх у своєму файлі маніфесту. Для цього просто структуруйте ось manifest.jsтак, як виглядає файл маніфесту до нашого розширення:

{ "name": "Chrome Extension Example", ...
 "background": { "scripts": [ "js/es6-promise.auto.min.js", "js/defaults.js", "js/speech.js", "js/document.js", "js/events.js", "js/stt.js", "js/listen.js" ], "persistent": false }}

Тепер вам знадобиться файл не тільки для функції вашого розширення, але й для інтерфейсу користувача. Для цього створіть файл із назвою popup.html. Спливаюче вікно - це маленьке вікно, яке з’являється після натискання значка розширення. Наприклад, ось спливаюче вікно для розширення Cookie Manager Firefox.

popup.htmlФайл може бути досить простим. Нижче наведено деякий код для створення спливаючого вікна за допомогою однієї кнопки. Це так само просто, як додати теги кнопок відкриття та закриття в тіло документа та кілька правил стилю.

    button { height: 30px; width: 30px; outline: none; }  ;    

Звичайно, popup.htmlкод нашого розширення має набагато більше компонентів, ніж цей. Не соромтеся додавати більше кнопок, таблиць стилів та будь-що інше, що вважаєте за потрібне для своєї ідеї розширення.

Час налаштувати спливаючий код та піктограму. Однак для піктограми вам потрібно буде додати код у два місця, “default_icon” та “icons”. Властивість “default_icon” використовується для піктограм на панелі інструментів, а “icons” використовується для зображень, що відображаються на сторінці управління розширеннями.

Поверніться до manifest.jsonта додайте наступні рядки коду, замінивши шляхи зображень значка за замовчуванням на власні зображення. Ви також можете помістити однакові зображення як для “default_icon”, так і для “icon”. І не потрібно розміщувати фотографії тих самих розмірів, що вказані нижче. Наприклад, якщо у вас є лише зображення розміром 16 x 16 та 48 x 48, сміливо видаляйте інші два рядки, які визначають 32 та 128 пікселів.

{ "name": "Chrome Extension Example", ...
 "page_action": { "default_popup": "popup.html", "default_icon": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" } }, "icons": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" }}

Ось такі файли є важливими для створення розширення chrome:

  • файл маніфесту,
  • фонові скрипти та
  • спливаючий файл

Деякі інші файли, які ви можете налаштувати:

  • options.html і
  • options.js

options.jsнадасть вашим користувачам широкий вибір опцій, коли мова заходить про використання вашого розширення. Він подбає про те, як виглядає сторінка параметрів (вона дуже схожа на popup.html), тоді як options.jsбуде обробляти функціонал.

Ці файли необов’язкові, але якщо ви вирішите їх додати, не забудьте налаштувати їх options.htmlу маніфесті та зв’язати options.jsфайл, додавши <; / script> безпосередньо перед кінцевим тегом HTML.

{ "name": "Chrome Extension Example", ... "options_page": "options.html"}

Щоб побачити розширення в дії, збережіть усі файли та натисніть “Перезавантажити”, перебуваючи на сторінці управління розширеннями. Ви повинні побачити свою піктограму на панелі інструментів. Щоб переглянути сторінку параметрів, ви також можете натиснути “Подробиці” під розширенням та прокрутити вниз до місця, де написано “Параметри розширення”.

Публікація проекту у веб-магазині

Отже, ви розробили та протестували своє розширення. Тепер вам потрібно його поширити!

Щоб розпочати завантаження проекту, спочатку перетворіть його у файл .zip. Файл повинен як мінімум містити manifest.jsonфайл. Потім переконайтеся, що у вас є обліковий запис розробника, відвідавши Інформаційну панель розробника веб-магазину Chrome.

Натисніть кнопку «Додати новий елемент», і вона повинна дозволити вам завантажити свій .zipфайл туди. Якщо ви не хочете реєструвати платежі за свій додаток, ви можете пропустити крок із налаштування платіжної системи. Однак, коли ви розмістите свій проект у веб-магазині, вам доведеться заплатити разову плату за розробника в розмірі 5 доларів США.

Також не забудьте включити детальний опис та фотографії вашого розширення, щоб потенційні користувачі точно знали, чим займається ваш проект!

Once all of this is complete, you’ll receive an app ID and an OAuth token. The app ID is used for making requests to Google APIs, while the OAuth token is used for making Web Store payments.

Congratulations, you have now published your extension! ?

If you enjoyed this post, check out this next article. We’ll be diving deeper into how to configure audio features in your Chrome extension, just like we did for TalkToMe.