Chrome插件开发 - Popup weather extension

在上一篇文章，当创建新菜单的时候，可以加载当前位置的天气数据，这章将学习创建弹窗插件。

创建小工具

新建src/Weather.jsx

import {useEffect, useState} from 'react'

export default function Weather() {
  const [latLng, setLatLng] = useState({})
  const [data, setData] = useState(null)
  useEffect(() => {
    if (!latLng.lat && !latLng.long) {
      navigator.geolocation.getCurrentPosition(function (position) {
        setLatLng({
          lat: position.coords.latitude,
          long: position.coords.longitude
        })
      })
      return
    }
    if (!data) {
      fetch(
        `${import.meta.env.VITE_APP_API_URL}/weather/?lat=${latLng.lat}&lon=${
          latLng.long
        }&units=metric&APPID=${import.meta.env.VITE_APP_API_KEY}`
      )
        .then((res) => res.json())
        .then((result) => setData(result))
    }
  }, [latLng])

  return (
    <div>
      <h2>The weather today ☁️</h2>
      <br />
      {!data ? (
        <p>Loading...</p>
      ) : (
        <>
          <p>Weather for: {data.name}</p>
          <p>
            Temp: {data.main.temp}° ({data.weather[0].main})
          </p>
        </>
      )}
    </div>
  )
}

更改App.jsx

import Weather from './Weather'

export function App() {
  return (
    <div className="flex flex-col items-center justify-center w-screen h-screen bg-indigo-400 text-6xl font-bold text-white">
      <Weather />
    </div>
  )
}

在弹窗点击右键，会显示开发者工具，提示未获取地理位置权限，在manifest.json中添加如下:

{
  "permissions": ["geolocation"]
}

重新构建并加载即可。

Source Code

【Source Code】