Как создать и опубликовать расширение Chrome? – Chrome Extensions

Вы когда-нибудь задумывались о создании расширения для Google Chrome? Думаете, что это по силам только профи? Ошибаетесь! Следуя этим инструкциям, вы сможете воплотить свою идею в реальность, опубликовав свое расширение в Chrome Web Store. Кстати, это не займет много времени!

Что такое расширение Chrome?

Расширения позволяют вам дополнить функционал браузера Chrome без изменения его исходного кода. И это здорово, потому что при создании расширения используются хорошо знакомые всем веб разработчикам языки: HTML, CSS и JavaScript. Если вам когда-либо доводилось создавать сайты, то на создание расширения у вас уйдет примерно полтора часа. Единственное, что вам нужно узнать —  как с помощью JavaScript и API расширить функционал Chrome.

Если у вас нет опыта в создании веб страниц, рекомендую ознакомиться с ресурсами, обучающими искусству кода, к примеру, freeCodeCamp.

Что вы хотите сделать?

Прежде чем начать работу, определитесь, что именно вы хотите создать. Ваш замысел не обязан быть сенсационным, вы можете творить просто ради веселья. Эта статья расскажет вам о моей идее и о том, как я ее реализовал.

План действий

Некоторое время я использовал расширение Unspash, заменяющее стандартный фон  новой вкладки Chrome на фотографии с одноименного ресурса. Позже я начал использовать Muzli, что превращает стартовую страницу Chrome в дайджест новостей из мира дизайна.

Давайте вдохновимся двумя этими расширениями и создадим что-то свое, на этот раз — для фанатов кино. Моя задумка заключается в том, чтобы показывать пользователю постер случайного фильма при открытии им новой вкладки; а при прокрутке страницы вниз — новости о популярных фильмах и сериалах. Что же, начнем!

Шаг 1: Настройка

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

Моему проекту для работы нужен доступ к activeTab (активной вкладке), так что содержимое manifest.json у меня выглядит подобным образом:

{
“manifest_version”: 2,
“name”: “RaterFox”,
“description”: “The most popular movies and TV shows in your default tab. Includes ratings, summaries and the ability to watch trailers.”,
“version”: “1”,
“author”: “Jake Prins”,

"browser_action": {
"default_icon": "tab-icon.png",
“default_title”: “Have a good day”
},

“chrome_url_overrides” : {
“newtab”: “newtab.html”
},

“permissions”: [“activeTab”]
}

Как вы видите, newtab.html генерируется заново с каждой открытой вкладкой. Следовательно, для правильной работы расширение должно иметь доступ к activeTab. Кстати, при его установке пользователь получит уведомление обо всех разрешениях, что требует расширение.

Еще один интересный момент в manifest.json- действия браузера. В нашем случае эта часть кода дает вкладке название и иконку: на деле функций гораздо больше. К примеру, эта часть кода приложения, при клике на иконку которого будет всплывать новое окно, выглядит так:

“browser_action”: {   “default_popup”: “popup.html”,  },

В данном случае popup.html будет генерироваться внутри специального окна, открытого по запросу пользователя. Теперь можно вставить свой код в файл popup.html(или немного потанцевать с бубном). 🙂

Шаг 2: Проверьте правильность работы

Следующий шаг — создание файла newtab.html  c кодом всем известного теста «Hello world» внутри:

<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Перейдите по адресу chrome://extensions в браузере; убедитесь, что пункт «режим разработчика» активен.

Кликните на «Загрузить распакованное расширение«, выберите папку с нужными файлами. Если все сделано правильно, то при открытии новой вкладки вы увидите «Hello world».

Шаг 3: Наводим лоск

Теперь, когда мы знаем, что все работает, пришло время заняться дизайном расширения. Это можно сделать путем создания файла main.css и его загрузки в newtab.html. То же нужно сделать, если вы захотите добавить функцию, написанную на JavaScript.

Пояснения

Я не хотел бы углубляться в подробности написанного мной кода, но хотел бы объяснить принцип работы расширения.

Расширение работает, используя функции JavaScript и TNDb API. Постеры фильмов, полученные с сайта TMDb, составляют последовательность, из которой при открытии новой вкладки выбирается один и помещается на фон страницы. При клике на постер пользователь попадает на страницу фильма в IMDb. Текущая дата в верхнем правом углу добавлена скорее для красоты, нежели чем для функционала.

Экран прокрутки стал дайджестом новостей кино. Для реализации этой функции был использован все тот же API. При клике на каждую из новостей пользователь видит обзор и трейлер фильма.

Результат

С файлом manifest.json и кодами HTML, CSS и JavaScript каждая новая вкладка выглядит интереснее.

Шаг 4: Опубликуйте свое расширение

Когда и дизайн, и функционал расширения доведены до совершенства, пришла пора опубликовать плод своих трудов. Перейдите по этой ссылке, чтобы попасть на Панель инструментов разработчика (вас попросят войти в аккаунт). Кликните на «Добавить новый продукт» и согласитесь с условиями Google. Добавьте папку с проектом в архив ZIP и загрузите его на сайт.

После успешной загрузки архива на сервер вам предложат заполнить форму с информацией о приложении. Добавьте иконку, описание, несколько лучших скриншотов…

Убедитесь, что все выглядит именно так, как вы хотите (кнопка «Просмотреть изменения» ). Только после этого смело жмите на «Опубликовать» . Готово!

Примечание: подождите несколько минут, прежде чем искать свое расширение в Chrome Web Store! Загрузка вашего проекта может занять некоторое время, не волнуйтесь.

Теперь осталось лишь привлечь аудиторию. Можете написать о своем детище в социальной сети, рассказать о нем друзьям или добавить его на ProductHunt.

Заключение

Создать расширение для Chrome не так сложно, как кажется (особенно, если вы веб разработчик). Все, что вам нужно — это знание HTML, CSS, JavaScript и API. Простая сборка с проектом создается мной и загружается на сервер Google примерно за 20 минут. Что-то кардинальное новое по функционалу и дизайну будет разрабатываться в разы дольше. Тут дело за вами! Будьте креативны и идейны.

Если на вашем пути встретятся трудности, руководство Chrome поможет вам избавиться от них самостоятельно. Не бойтесь обращаться в поддержку, специалисты Google не кусаются. 😉

Ссылка на оригинальную статью: How to Create and Publish a Chrome Extension in 20 minutes.

Оставьте Комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля отмечены *