Как создать Chrome-расширение для приложения с прогнозом погоды

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

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

Для начала создадим файл manifest.json, который есть у каждого расширения и содержит ключевые данные.

Приведенный выше код довольно прост, и все же дополнительная информация не помешает.

  • name: имя расширения.
  • version: версия расширения.
  • description: описание расширения (вы видите его, когда заходите в настройки расширения).
  • permission: поскольку погодное приложение должно определять текущее местоположение пользователя, требуется разрешение для GeolocationAPI.
  • icons: иконки расширения.
  • action: действия приложения (в этом примере установлено только действие всплывающего окна).

Следующим шагом будет создание файла index.html, после чего можно приступать к написанию кода приложения и разработке его функциональной части. Скорее всего, вы сами сможете создать макет и стиль. Однако можете воспользоваться и этим исходным кодом (ссылка на него в конце статьи).

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

Как видите, вызов fetchWeatherData происходит сразу после того, как определено положение пользователя по широте и долготе. Именно в этот момент поступают данные о погоде:

В этом руководстве для получения информации о погоде используется API WeatherBit, так как у меня есть бесплатный доступ к API_KEY (большинство других API требуют подписки).

Когда вызовы API возвращают успешный ответ, получаем информацию о текущем городе, погоде и температуре. WeatherBit  —  настолько продвинутый провайдер, что предоставляет даже иконку с изображением текущей погоды (ее можно использовать в приложении).

Наконец, приступаем к установке расширения в браузер. Проделываем следующие шаги: Настройки => Расширения => Управление расширениями => Загрузка распакованного расширения.

Вот конечный продукт:

Здесь можно найти полный исходный код.

Читайте также:

Читайте нас в TelegramVK и Дзен


Перевод статьи Kyle Le: How to build your first Weather App Chrome Extension

Предыдущая статья5 популярных пакетов и фреймворков Node.js
Следующая статьяРазделение кода в Next Js