# 采用一个 API

## 概述

API 开启了无限的创意网页开发可能性！在本次作业中，你将选择一个外部 API，并构建一个浏览器扩展，以解决真实问题或为用户提供有价值的功能。

## 说明

### 第一步：选择你的 API
从此精选的 [免费公共 API 列表](https://github.com/public-apis/public-apis) 中选择一个 API。考虑以下类别：

**适合初学者的热门选项：**
- **娱乐**：用于随机狗狗图片的 [Dog CEO API](https://dog.ceo/dog-api/)
- **天气**：用于当前天气数据的 [OpenWeatherMap](https://openweathermap.org/api)
- **名言**：用于励志名言的 [Quotable API](https://quotable.io/)
- **新闻**：用于当前头条的 [NewsAPI](https://newsapi.org/)
- **趣味知识**：用于有趣数字知识的 [Numbers API](http://numbersapi.com/)

### 第二步：规划你的扩展
在编码之前回答以下规划问题：
- 你的扩展解决了什么问题？
- 目标用户是谁？
- 你将存储哪些数据在本地存储中？
- 如何处理 API 失败或速率限制？

### 第三步：构建你的扩展
你的扩展应包括：

**必备功能：**
- 用于任何必需 API 参数的表单输入
- 带有适当错误处理的 API 集成
- 本地存储用户偏好或 API 密钥
- 清晰且响应式的用户界面
- 加载状态和用户反馈

**代码要求：**
- 使用现代 JavaScript (ES6+) 特性
- 使用 async/await 进行 API 调用
- 使用 try/catch 块进行适当错误处理
- 添加有意义的注释解释代码
- 遵循一致的代码格式

### 第四步：测试和完善
- 使用各种输入测试你的扩展
- 处理边缘情况（无网络、无效 API 响应）
- 确保扩展在浏览器重启后仍然可用
- 添加用户友好的错误信息

## 额外挑战

提升你的扩展至更高层次：
- 增加多个 API 端点以实现更丰富的功能
- 实现数据缓存以减少 API 调用
- 创建常用操作的键盘快捷键
- 添加数据导出/导入功能
- 实现用户定制选项

## 提交要求

1. **可正常工作的浏览器扩展**，成功集成你选定的 API
2. **README 文件**，说明：
   - 你选择了哪个 API 以及原因
   - 如何安装和使用你的扩展
   - 任何 API 密钥或设置需求
   - 扩展运行截图
3. **干净、注释完善的代码**，符合现代 JavaScript 规范

## 评分标准

| 评价标准 | 优秀 (90-100%) | 熟练 (80-89%) | 进展中 (70-79%) | 入门 (60-69%) |
|----------|----------------|---------------|-----------------|---------------|
| **API 集成** | 完美的 API 集成，包含全面错误处理和边缘情况管理 | 成功集成 API 并有基本错误处理 | API 可用但错误处理有限 | API 集成有严重问题 |
| **代码质量** | 干净、注释充分的现代 JavaScript，符合最佳实践 | 代码结构良好，注释充足 | 代码能运行但组织需改进 | 代码质量差，注释少 |
| **用户体验** | 界面精致，加载状态和用户反馈优秀 | 界面良好，提供基本用户反馈 | 基本界面，功能正常 | 用户体验差，界面混乱 |
| **本地存储** | 高级使用本地存储，含数据验证和管理 | 正确实现本地存储关键功能 | 基础本地存储实现 | 本地存储使用少或不当 |
| **文档** | 完整 README，含设置说明和截图 | 良好文档，涵盖大部分要求 | 基础文档，缺少细节 | 文档缺失或不足 |

## 入门提示

1. **从简单开始**：选择不需复杂认证的 API
2. **阅读文档**：彻底了解所选 API 的端点和响应
3. **规划界面**：先手绘扩展界面再编码
4. **频繁测试**：分步构建，完成每一功能即测试
5. **处理错误**：始终假设 API 调用可能失败并做好应对

## 资源

- [浏览器扩展文档](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions)
- [Fetch API 指南](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch)
- [本地存储教程](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
- [JSON 解析与处理](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON)

祝你构建出有用且富有创意的作品！🚀

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免责声明**：  
本文件由人工智能翻译服务[Co-op Translator](https://github.com/Azure/co-op-translator)翻译。尽管我们努力确保准确性，但请注意，自动翻译可能存在错误或不准确之处。原始语言的文档应被视为权威来源。对于重要信息，建议使用专业人工翻译。因使用此翻译而产生的任何误解或误释，我们概不负责。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->