从零开发 Chrome 插件：实现 API 登录与本地存储功能
Chrome 插件作为浏览器功能的重要扩展，能极大提升用户的工作效率。本文将以一个「登录功能插件」为例，带你从零构建一个可调用 API 验证身份、并将用户信息存储在本地的 Chrome 插件。
基础信息请看
Chrome插件开发入门：从零构建你的第一个插件
为什么需要这样的插件？
在日常开发中，我们经常需要访问各种需要登录自有系统或 API，记录操作以及后续的业务操作需要携带token，访问其他业务系统，是很多工具类插件的基础功能。
本文将实现的核心功能包括：
- 一个简洁的登录界面（输入用户名、密码）
- 调用后端登录 API 验证身份
- 将登录状态（如 Token、用户名）安全存储到本地
- 处理登录过程中的各种异常（如网络错误、账号密码错误）
从零构建登录插件
第一步：搭建目录结构
一个基础的登录插件目录非常简洁，包含 4 个核心文件：
login-extension/
├─ manifest.json // 插件配置（必选）
├─ popup.html // 登录界面（点击插件图标显示）
├─ popup.js // 登录逻辑（API调用、本地存储）
└─ style.css // 美化界面（可选但推荐）
第二步：配置 manifest.json
manifest.json 是插件的「身份证」，用于告诉 Chrome 插件的名称、版本、权限等信息。以下是适配 Manifest V3 的配置：
{"manifest_version": 3,"name": "简易登录助手","version": "1.0.0","description": "通过 API 登录并安全保存用户信息","permissions": ["storage"], // 允许使用本地存储"action": {"default_popup": "popup.html", // 点击插件图标显示的页面"default_icon": "icon.png" // 插件图标（可自定义）},"host_permissions": ["https://api.yourdomain.com/*"] // 允许请求的 API 域名
}
关键配置说明：
permissions: ["storage"]：声明使用 Chrome 的本地存储 API（chrome.storage）。host_permissions：指定插件可以访问的 API 域名，避免跨域问题（开发时可先用*://*/*测试，但上线前需改为具体域名）。
第三步：设计登录界面（popup.html）
登录界面需要包含用户名输入框、密码输入框、登录按钮和状态提示区。以下是一个简洁的实现：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>用户登录</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="login-box"><h2>系统登录</h2><div class="input-group"><label for="username">用户名</label><input type="text" id="username" placeholder="请输入用户名"></div><div class="input-group"><label for="password">密码</label><input type="password" id="password" placeholder="请输入密码"></div><button id="loginBtn">登录</button><p id="status"></p> <!-- 显示登录状态（成功/失败） --></div><script src="popup.js"></script>
</body>
</html>
样式优化后，界面会更贴近现代 Web 应用的设计风格，输入框聚焦时的蓝色边框也能给用户明确的反馈。
第四步：实现登录逻辑（popup.js）
这是插件的核心，负责读取用户输入、调用 API、处理返回结果并保存数据到本地存储。
// 等待页面加载完成
document.addEventListener('DOMContentLoaded', () => {// 获取页面元素const usernameInput = document.getElementById('username');const passwordInput = document.getElementById('password');const loginBtn = document.getElementById('loginBtn');const status = document.getElementById('status');// 登录按钮点击事件loginBtn.addEventListener('click', async () => {// 获取并验证输入const username = usernameInput.value.trim();const password = passwordInput.value.trim();if (!username || !password) {showStatus('请输入用户名和密码', 'error');return;}try {// 调用登录 API（替换为你的实际接口）const response = await fetch('https://api.yourdomain.com/login', {method: 'POST',headers: {'Content-Type': 'application/json',// 如需额外 headers（如 API 密钥），可在此添加// 'X-API-Key': 'your-api-key'},body: JSON.stringify({ username, password })});const result = await response.json();// 处理 API 返回结果if (response.ok && result.success) {// 登录成功：保存用户信息到本地存储await saveUserInfo(username, result.token);showStatus('登录成功！', 'success');// 清空输入框usernameInput.value = '';passwordInput.value = '';} else {// 登录失败（如账号密码错误）showStatus(result.message || '登录失败，请检查账号密码', 'error');}} catch (error) {// 捕获网络错误showStatus('网络错误，请稍后重试', 'error');console.error('登录请求失败：', error);}});// 显示状态信息的工具函数function showStatus(text, type) {status.textContent = text;status.className = type;}// 保存用户信息到本地存储function saveUserInfo(username, token) {return new Promise((resolve) => {chrome.storage.local.set({userInfo: {username: username,token: token, // 假设 API 返回 TokenloginTime: new Date().toISOString() // 记录登录时间}}, () => {resolve();});});}
});
代码关键点解析：
-
API 调用：使用
fetch发送 POST 请求，将用户名和密码以 JSON 格式传递给后端。实际开发中，需根据后端要求调整请求参数（如是否需要验证码、额外的请求头）。 -
本地存储：通过 Chrome 提供的
chrome.storage.localAPI 保存用户信息。与普通localStorage相比，它的优势在于：- 不受页面域名限制（插件内全局可用）
- 支持异步操作，适合存储较大数据
- 配合
storage权限，安全性更高
-
错误处理：覆盖了三种常见场景：输入为空、API 返回失败（如密码错误）、网络异常，确保用户能明确知道问题所在。
测试插件功能
插件开发完成后，需要在 Chrome 中测试是否能正常工作：
- 打开 Chrome 浏览器，访问
chrome://extensions/ - 开启右上角的「开发者模式」
- 点击「加载已解压的扩展程序」，选择插件所在的
login-extension文件夹 - 点击浏览器工具栏中的插件图标，即可看到登录界面
测试流程建议：
- 输入正确的账号密码 → 应提示「登录成功」，并在
chrome://extensions/的「检查视图」中通过控制台验证本地存储是否有数据（通过chrome.storage.local.get('userInfo', (data) => console.log(data))查看）
总结
通过本文的示例，掌握了 Chrome 插件调用 API 实现登录并存储用户信息的核心流程。这个基础框架可以扩展出更多功能，例如：自动携带 Token 调用其他 API、定期检查登录状态、多账号管理等。
Chrome 插件开发的核心是理解其配置规则和 API 特性，结合前端基础知识，就能快速实现各种实用工具。希望本文能帮助你迈出插件开发的第一步！
