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

1656672137 kak sozdat i opublikovat rasshirenie chrome za 20 minut

Джейк Принс

9ld5cZI5aYHjUb74tNT-6iv9meegQl3gWhkX
Фото Майкса Фотографии: https://www.pexels.com/photo/acoustic-amplifier-artist-audio-114820/

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

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

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

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

Что вы хотите построить?

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

План

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

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

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

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

Для расширения фильма нам нужно разрешение на управление активная вкладкада наш 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 будет файлом HTML, который должен отображаться каждый раз, когда открывается новая вкладка. Для этого нам нужно иметь разрешение на контроль активная вкладкапоэтому, когда пользователь попытается установить расширение, он получит предупреждение со всеми разрешениями, необходимыми для расширения.

4y26iiG0Z4jq3tbBwTgjBlCoksECGWII1LyF

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

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

теперь, popup.html будет отображено внутри всплывающего окна, создаваемого в ответ на нажатие пользователем действия браузера. Это стандартный файл HTML, поэтому он дает вам свободный контроль над отображающим всплывающее окно. Просто добавьте часть своей магии в файл под названием popup.html.

Шаг 2. Проверьте, работает ли это

Следующим шагом является создание newtab.html файл и поместите в ‘Hello world‘:

<!doctype html><html>  <head>    <title>Test</title>  </head>  <body>    <h1>Hello World!</h1>  </body></html>

Чтобы проверить, работает ли это, посетите chrome://extensions в вашем браузере и убедитесь, что Режим разработчика флажок в верхнем правом углу установлен.

hplLksya7cBxpBQdzgbjt6ZjIJG9U8D6whVl
Режим разработчика Chrome

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

Шаг 3. Делайте вещи приятными

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

Завершение плана

Все, что мне понадобилось для завершения расширения фильма, это HTML, CSS и JavaScript, поэтому я не считаю целесообразным глубоко погружаться в код, но я бы хотел быстро пройти его.

Вот что я сделал:

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

Я заменил экран на хорошую фильм популярных фильмов, когда пользователь пытается прокрутить вниз. Я использовал тот же API для создания карт фильмов с изображением, названием, рейтингом и подсчетом голосов. Затем, щелкнув одну из этих карт, отобразится обзор с кнопкой для просмотра трейлера.

Результат

Теперь с этим маленьким manifest.json и немного HTML, CSS и JavaScript, каждая новая вкладка, которую вы открываете, выглядит гораздо интереснее:

vUPpM1QiRIgV8dcHwBvKsGwJYI1GyJctJaHo
Просмотрите конечный результат здесь.

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

Когда ваше первое расширение Chrome выглядит хорошо и работает, как следует, пора опубликовать его в Chrome Store. Просто перейдите по этой ссылке, чтобы перейти на информационную панель веб-магазина Chrome (вас попросят войти в свой аккаунт Google, если это не так). Затем нажмите Add new item кнопку, примите условия, и вы перейдете на страницу, где вы сможете загрузить свое расширение. Теперь сожмите папку, содержащую ваш проект, и загрузите этот файл ZIP.

9zUs3mIMtnvMDxWsPjVCZ-gNpvIzx3-mPFUe
Веб-магазин Chrome

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

Убедитесь, что вы предоставили хорошие изображения, чтобы продемонстрировать свой проект. Магазин может использовать эти изображения для рекламы вашего новаторского проекта. Чем больше изображений вы предоставите, тем заметнее будет ваше расширение. Вы можете просмотреть, как ваше расширение выглядит в веб-магазине, нажав значок Preview changes кнопку. Когда вы удовлетворены результатом, бейте Publish changes и все готово!

Теперь перейдите к веб-магазину Chrome и найдите свое расширение под названием (может потребоваться некоторое время, прежде чем он появится). Если вам интересно, вы можете найти мой здесь.

Единственное, что осталось сделать это получить несколько пользователей. Поэтому вы можете поделиться сообщением о своем расширении Chrome, которое изменит жизнь в социальных сетях. Скажите друзьям, чтобы это проверили. Добавьте его в ProductHunt. И не забудьте поделиться своим проектом здесь в комментариях. Мне любопытно посмотреть, что вы придумали!

Вывод

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

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

Так чего вы ждете? Пора начать работать над собственным расширением Chrome и воплотить свою идею в реальность.

Не забудьте поделиться своим проектом в комментариях и нажать кнопку, если эта статья была вам полезна. Если у вас есть время, и вы хотите быть героем, дайте моему расширению положительную оценку. Это было бы очень благодарно!

Есть вопросы или отзыв? Дайте мне знать в комментариях!

Спасибо за чтение! Надеюсь, информация была полезна. Следите за мной на Medium, чтобы получить больше статей, связанных с техникой, или в Twitter и Instagram @jakeprins_nl.

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

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