Автор оригинала: FreeCodeCamp Community Member.

Джейк Принс

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

Что такое хромированное расширение?

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

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

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

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

План

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

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

Шаг 1: настройка вещей

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

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

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

"browser_action": {  "default_popup": "popup.html", },

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

Шаг 2: тест если он работает

Следующий шаг – создать newtab.html Файл и положить в ‘ Здравствуйте, мир ‘:

              
Hello World!
  

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

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

Шаг 3: делать вещи приятно

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

Заканчивать план

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

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

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

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

Результат

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

Оригинал: “https://www.freecodecamp.org/news/how-to-create-and-publish-a-chrome-extension-in-20-minutes-6dc8395d7153/”