掘金专属的天气预报插件：让您的浏览器变成天气晴雨表

2023-09-18 14:00:16

进入互联网时代，一切都追求个性化、便捷化。当我们打开浏览器，面对琳琅满目的插件时，有没有想过，自己也能开发一款专属的插件，满足自己的特定需求？今天，我们就来动手开发一款掘金专属的 Chrome 天气预报插件，让您的浏览器变成天气晴雨表，随时随地掌握天气动态。

什么是掘金专属的天气预报插件？

掘金专属的天气预报插件是一个基于 Chrome 浏览器的扩展程序，可以实时显示掘金网站的天气预报信息。当您在掘金浏览文章、回答问题时，插件会自动检测您当前所在的城市，并显示未来几天的天气预报，让您不错过任何天气变化。

使用 sulgPlugin 脚手架开发插件

开发 Chrome 插件并不复杂，特别是借助 sulgPlugin 脚手架，可以快速搭建插件的基本框架。

安装 sulgPlugin 脚手架：

npm install -g sulgPlugin

创建插件项目：

sulgPlugin init weather-plugin

实现天气预报功能

获取天气预报数据：

插件需要获取天气预报数据，可以通过第三方 API 或服务来实现。这里我们使用 OpenWeatherMap API 来获取天气数据。

// 获取天气预报数据
async function getWeatherData(city) {
  const response = await fetch(
    `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=YOUR_API_KEY`
  );
  return await response.json();
}

渲染天气预报界面：

获取到天气数据后，需要将其渲染到插件界面上。可以使用 HTML 和 CSS 来设计插件界面，并通过 JavaScript 动态更新天气信息。

<!-- 天气预报界面 -->
<div class="weather-container">
  <div class="weather-city">{{ city }}</div>
  <div class="weather-forecast">
    {% for day in forecast %}
      <div class="weather-day">
        <div class="weather-date">{{ day.date }}</div>
        <div class="weather-icon"><img src="{{ day.icon }}"></div>
        <div class="weather-temp">{{ day.temp }}</div>
      </div>
    {% endfor %}
  </div>
</div>

集成到掘金网站

为了让插件只在掘金网站上生效，需要在插件 manifest.json 文件中指定匹配规则：

{
  "manifest_version": 3,
  "name": "掘金专属天气预报插件",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://juejin.cn/*"],
      "js": ["content_script.js"]
    }
  ]
}