Как создать расширение Chrome

1656561372 kak sozdat rasshirenie chrome

от Эрика Тан

pflONk4sMj5raA-Zm58oWhxA8q3x-SBFCU9Z

В этой статье я научу вас, как создать собственное расширение 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.

ZG-VIUmxMhxR8qzkGKdB7NOwtl598vzxmG7n

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.

Добавить комментарий

Ваш адрес email не будет опубликован.