Создание расширения Google Chrome

Недавно я создал простое расширение Chrome (CrypCheck), которое отображает текущую текущую цену некоторых популярных криптовалют. Пройдя через этот процесс, написать, протестировать и опубликовать собственное расширение Chrome намного быстрее и проще, чем вы думаете.

Во-первых, настройте рабочий каталог и отправьте его на Github (или что-то еще, что вы используете).

#bash
$ mkdir my_awesome_chrome_extension
$ cd my_awesome_chrome_extension
$ git init
$ echo "#my_awesome_chrome_extension" >> README.md
$ git add .
$ git commit -m 'first commit, setting up project'
$ git remote add origin yourremote.git
$ git push origin master

Затем нам нужно загрузить стартовые файлы, которые Google предоставляет в своих документах. Нажмите здесь и перейдите к заголовку Ресурсы. У вас должно получиться четыре загруженных файла: manifest.json, popup.html, popup.js и icon.png (это необязательно, его можно заменить любым значком твой выбор).

Теперь нам нужно загрузить расширение, чтобы протестировать его локально. Перейдите по URL-адресу chrome: // extensions /. Отсюда вы должны увидеть кнопку вверху с надписью Загрузить распакованное расширение. Щелкнув по нему, перейдите в рабочий каталог вашего плагина и выберите его. Это загрузит подключаемый модуль в ваш браузер из каталога. Теперь вы можете поиграть с образцом приложения, которое позволяет изменять цвета. Теперь вы готовы создать и протестировать свое приложение!

Помните, что если вам требуются какие-либо сторонние библиотеки, такие как jQuery, вам нужно будет загрузить их. Кроме того, обязательно отредактируйте manifest.json, чтобы отразить детали вашего собственного приложения, а не в пример приложения. Это пример того, как выглядит мой manifest.json.

#json
{
  "manifest_version": 2,
"name": "CrypCheck",
  "description": "This extension allows the user to check the price of Bitcoin, Bitcoin Cash, Ethereum, Litecoin, Ripple and IOTA.",
  "version": "2.0",
"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "storage"
  ]
}

В зависимости от сложности вашего проекта вы также можете настроить для него структуру. Ниже представлена ​​структура папок моего приложения, особенно если вы обнаружите, что загружаете шрифты, библиотеки и что-то еще.

Что касается размера icon.png, следует отметить, что Google требует, чтобы размер был 128 x 128 пикселей. Вы также можете предоставить дополнительные размеры 48x48 и 16x16.

Публикация вашего расширения

Завершив расширение и убедившись, что оно работает, вы захотите поделиться им со всем миром. Перейдите в Веб-панель Chrome и войдите в свою учетную запись Google. Когда страница загрузится, нажмите кнопку Добавить новый элемент. Вам будет предложено загрузить zip-архив вашего проекта, что можно сделать, выполнив следующую команду.

#bash
$ zip -r my_awesome_chrome_extension_v1.zip my_awesome_chrome_extension

После загрузки zip-файла вы можете редактировать детали перед публикацией. Это включает в себя, где вы хотите распространять приложение, категорию, в которой вы хотите, чтобы оно отображалось, и все другие детали, касающиеся его публикации.

Когда вы закончите настройку, нажмите Опубликовать изменения. Поздравляю! Вы опубликовали расширение Chrome! Обязательно удалите его в браузере и повторно загрузите из Интернет-магазина, чтобы запустить рабочую версию.

Если вам интересно, вы можете взглянуть на мой репозиторий приложений в качестве примера.

Как всегда, спасибо за чтение, нажмите 👏, если вам нравится то, что вы читаете, и обязательно подписывайтесь, чтобы быть в курсе будущих публикаций.