Содержание статьи
от Эрика Тан
В этой статье я научу вас, как создать собственное расширение Chrome. Я опираюсь на уроки, извлеченные при создании TalkToMe, расширение Chrome, которое помогает людям с недостатками зрения, читая содержимое веб-сайта и переходя на другие веб-страницы.
Я расскажу об основах настройки вашего расширения, в частности:
- Настройка файлов для установки
- Готовим его к размещению в магазине Chrome
Я не буду рассказывать о том, как управлять аудиофункциями, такими как управление разрешениями микрофона. Об этом рассказывал в этой статье мой друг Palash, а также в качестве примера использует расширение TalkToMe.
Настройка файлов для установки
Сначала перейдите к chrome://extensions в своем браузере или просто нажмите «Другие инструменты» и «Расширение» в меню 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.
The popup.html файл может быть достаточно обычным. Ниже приведен код создания всплывающего окна с помощью одной кнопки. Это так же просто, как добавить теги кнопок открытия и закрытия в тело документа и несколько правил стиля.
<!DOCTYPE html> <html> <head> <style> button { height: 30px; width: 30px; outline: none; } </style> </head>; <body> <button></button> </body> </html>Конечно, popup.html код нашего расширения содержит гораздо больше компонентов, чем этот. Не стесняйтесь добавлять больше кнопок, таблиц стилей и все, что вы считаете нужным для своей идеи расширения.
Пора настроить всплывающее окно и значок. Для значка, однако, вам нужно будет добавить код в два места, default_icon и icons. Свойство “default_icon” используется для значков панели инструментов, а “icons” – для изображений, отображаемых на странице управления расширениями.
Вернитесь к manifest.json и добавьте следующие строки кода, заменив пути изображения для значка по умолчанию собственными изображениями. Также можно вставить одинаковые изображения как для «значка по умолчанию», так и для «значков». А ты нет потребность разместить изображения тех же размеров, что указаны ниже. Например, если у вас есть только изображения размером 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 src=”options.js”><;/script> непосредственно перед конечным тегом HTML.
{ "name": "Chrome Extension Example", ... "options_page": "options.html"}Чтобы увидеть расширение в действии, сохраните все файлы и нажмите кнопку «Перезагрузить» на странице управления расширениями. Вы должны увидеть свой значок на панели инструментов. Чтобы просмотреть страницу параметров, можно также нажать «Детали» под своим расширением и прокрутить вниз в пункт «Параметры расширения».
Публикация вашего проекта в Интернет-магазине
Вы разработали и протестировали свое расширение. Теперь его нужно распространить!
Чтобы начать загрузку проекта, сначала преобразуйте его в файл .zip. Файл должен как минимум содержать файл manifest.json файл. Затем убедитесь, что у вас есть аккаунт разработчика, перейдя на информационную панель разработчика Chrome Webstore.
Нажмите кнопку «Добавить новый элемент», и это позволит вам скачать свой .zip файл там. Если вы не хотите зарегистрировать платежи для приложения, вы можете пропустить шаг по настройке платежной системы. Однако, когда вы размещаете свой проект в веб-магазине, вам придется уплатить единовременный взнос в размере 5 долларов США.
Также не забудьте включить подробное описание и фотографии вашего расширения, чтобы потенциальные пользователи точно знали, что делает ваш проект!
Когда это будет завершено, вы получите идентификатор программы и маркер OAuth. Идентификатор программы используется для отправки запросов в API Google, а маркер OAuth используется для платежей в Веб-магазине.
Здравствуйте, теперь вы опубликовали свое расширение! ?
Если вам понравился этот пост, посмотрите следующую статью. Мы глубже погрузимся в то, как настроить аудиофункцию в вашем расширении Chrome, как и для TalkToMe.