从零开发 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 返回 Token
loginTime: 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 特性，结合前端基础知识，就能快速实现各种实用工具。希望本文能帮助你迈出插件开发的第一步！