Здравствуйте дамы и господа.
У меня встал вопрос: я сделал небольшое приложение для определения погоды по геолокации в реальном времени (обновление по минуте). Обновление идет через API ну и через геолокацию в браузере. Все работает замечательно, если открывать как страницу в браузере.
Теперь я хочу сделать небольшое расширение для Chrome, немного изменив вид, но функционал оставить точно тем же. Вопрос, как мне это сделать? Тот же код не работает, хотя в фале манифеста все подключено верно. Код я ниже предоставлю, только без ключа API.
П.С. Появляется предупреждение: Is the 'geolocation' permission appropriate? See
https://developer.chrome.com/extensions/manifest.h....
П.С.С. если включить разрешение на геолокацию для всех сайтов в хроме, это уведомление есть, если отключить для всех сайтов - оно пропадает.
Ссылка 404)
Код разметки, JS и JSON ниже, если вдруг надо CSS, то скину к комментарию. Единственное что я убрал window.listener(load), но ничего и не поменялось в работе.
Помогите кто чем может, в чем прикол?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Weather App</title>
</head>
<body>
<div class="container">
<div class="location"></div>
<div class="city-name"></div>
<div class="icon">
<img class="weater-icon" src="" alt="">
</div>
<div class="temperature"></div>
<div class="weater-type"></div>
</div>
<script src="main.js"></script>
</body>
</html>
let long;
let lat;
let myLocation = document.querySelector('.location');
let cityName = document.querySelector('.city-name');
let iconSet = document.querySelector('.icon');
let temperature = document.querySelector('.temperature');
let weaterType = document.querySelector('.weater-type');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
long = position.coords.longitude;
lat = position.coords.latitude;
const api = `https://api.weatherbit.io/v2.0/current?lat=${lat}&lon=${long}&key=здесь_должен_быть_ключ&include=minutely`;
fetch(api)
.then(respons => {
return respons.json();
})
.then(data => {
console.log(data);
const {temp, timezone, city_name } = data.data[0];
const { description, icon } = data.data[0].weather;
//set dom elements from API
cityName.textContent = city_name;
iconSet.innerHTML = `<img class="weater-icon" src="https://www.weatherbit.io/static/img/icons/${icon}.png" alt="">`;
temperature.textContent = temp;
myLocation.textContent = timezone;
weaterType.textContent = description;
})
});
}
{
"manifest_version": 2,
"name": "Checking Weather",
"description": "This plugin for checking your local weather",
"version": "1.0.1",
"icons": {"128": "cloudy.png"},
"browser_action": {
"default_icon": "cloudy.png",
"default_popup": "index.html"
},
"content_scripts": [
{
"matches": [ "*://*/*" ],
"js": [ "main.js" ]
}
]
}
Простой