Why I Used wttr.in Instead of OpenWeatherMap for My Firefox Extension

Source: Dev.to

API Options Compared

Friction Difference

OpenWeatherMap requires users to:

1. Create an account
2. Generate an API key
3. Paste the key into the extension settings
4. Wait for the key to become active (can take hours)

wttr.in only needs the city name. Removing these steps dramatically improves install‑to‑active‑user conversion.

Code Examples

wttr.in request (JavaScript)

// wttr.in request
const url = `https://wttr.in/${encodeURIComponent(city)}?format=j1`;

OpenWeatherMap request (JavaScript)

// OpenWeatherMap request
const url = `https://api.openweathermap.org/data/2.5/forecast?q=${encodeURIComponent(city)}&appid=${userApiKey}&units=metric`;

Simpler code means fewer bugs.

Sample Response from wttr.in

{
  "current_condition": [
    {
      "temp_C": "18",
      "weatherDesc": [{ "value": "Partly cloudy" }],
      "humidity": "65",
      "windspeedKmph": "20"
    }
  ],
  "weather": [
    {
      "date": "2024-01-15",
      "hourly": [{ "tempC": "15", "...": "..." }],
      "maxtempC": "22",
      "mintempC": "12"
    }
  ]
}

One request provides current conditions plus a 3‑day forecast.

Reliability Considerations

• Single developer project – could go down or impose rate limits without SLA.
• Rate limiting – per‑IP limits may block high‑traffic scenarios (e.g., corporate NAT).
• Data sources – wttr.in aggregates from multiple providers; quality varies by region.
• No paid tier – you cannot increase limits or obtain guarantees.

When to Choose Each Service

Aggressive Caching with wttr.in

Because wttr.in has no paid tier, I implemented client‑side caching to reduce request frequency:

const CACHE_DURATION = 30 * 60 * 1000; // 30 minutes

async function fetchWeather(city) {
  const cacheKey = `weather_${city}`;
  const cached = await browser.storage.local.get(cacheKey);

  if (cached[cacheKey]) {
    const { data, timestamp } = cached[cacheKey];
    if (Date.now() - timestamp < CACHE_DURATION) {
      return data; // Return cached data
    }
  }

  // Fetch fresh data
  const resp = await fetch(`https://wttr.in/${encodeURIComponent(city)}?format=j1`);
  const data = await resp.json();

  // Cache it
  await browser.storage.local.set({
    [cacheKey]: { data, timestamp: Date.now() }
  });

  return data;
}

This limits API calls to once per 30 minutes per user, rather than on every new tab.

Conclusion

The Weather & Clock Dashboard currently uses wttr.in and works well for its target audience. If reliability becomes an issue at scale, I plan to add OpenWeatherMap as a fallback or primary option.

Install the extension on Firefox – source code is available on GitHub.