Estoy desarrollando Chrome Extension y quiero obtener información meteorológica con fetch() pero cuando guardo los datos entrantes llamados weatherData en mi propia variable llamada weatherData, se vuelve indefinido. Es por eso que los códigos no funcionan correctamente. Por favor ayuda.
La clave de API es verdadera porque console.log(data ) funciona bien, pero console.log(weatherData) no funciona.
Este content script :
const hostname = window.location.hostname; if(hostname.includes("google.com")) { var weatherData; document.body.innerHTML += "<span id='content_weather'>"+ "<span id='weather_temp'></span>"+ "</span>"; getWeather(); setWeather(); } function getWeather() { fetch("https://api.openweathermap.org/data/2.5/weather?lat=39.106141&lon=39.548280&appid={MY API KEY}&units=metric&lang=tr") .then(response => response.json()) .then(data => weatherData = data); } function setWeather() { document.getElementById("weather_temp").innerHTML = JSON.stringify(weatherData.main.temp); }fetch es asíncrono, por lo que la solicitud de red real se realiza después de que la pila de ejecución actual se completa por completo, lo que significa que setWeather se ejecuta demasiado pronto. La solución es llamar a setWeather dentro del último then() o usar la sintaxis async+await.
Nunca asigne a innerHTML/outerHTML del cuerpo de un sitio porque recrea todo el DOM y, por lo tanto, destruye todos los detectores de eventos adjuntos por el sitio mediante programación, rompiendo su comportamiento/UI. La solución es usar insertAdjacentHTML o construir nodos DOM explícitamente.
Así es como podría verse todo el código:
if (location.hostname === 'www.google.com') { fetch('https://api.......').then(r => r.json()).then(data => { const t = JSON.stringify(data.main.temp); document.body.insertAdjacentHTML('beforeend', `<span id='content_weather'><span id='weather_temp'>${t}</span></span>`); }); }Esto puede fallar en Chrome moderno porque bloquea las solicitudes de origen cruzado en las secuencias de comandos de contenido, por lo que es posible que deba usar la secuencia de comandos de fondo como se muestra en esta respuesta .