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

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

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

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

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

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

Получение местоположения пользователя — это первое, что нужно сделать, хотя у нас есть разрешение пользователя на manifest.json выше, но все еще нужны резервные предупреждения, чтобы предотвратить сбой.

Вы можете видеть, что я вызываю fetchWeatherData сразу после того, как у меня есть позиция пользователя по широте и долготе, здесь мы получаем данные о погоде:

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

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

Наконец, мы можем установить расширение в наш браузер. Шаги:

Настройки => Расширения => Управление расширениями => Загрузить распакованное

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

Вот полный исходный код

Последние слова

Хотя мой контент бесплатен для всех, но если вы найдете эту статью полезной, вы можете купить мне кофе здесь