Создание расширения 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! Обязательно удалите его в браузере и повторно загрузите из Интернет-магазина, чтобы запустить рабочую версию.
Если вам интересно, вы можете взглянуть на мой репозиторий приложений в качестве примера.
Как всегда, спасибо за чтение, нажмите 👏, если вам нравится то, что вы читаете, и обязательно подписывайтесь, чтобы быть в курсе будущих публикаций.