当前位置：首页 > news >正文

（2）从零开发 Chrome 插件：实现 API 登录与本地存储功能

news 2025/7/14 6:45:33

从零开发 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.local API 保存用户信息。与普通 localStorage 相比，它的优势在于：
- 不受页面域名限制（插件内全局可用）
- 支持异步操作，适合存储较大数据
- 配合 storage 权限，安全性更高
错误处理：覆盖了三种常见场景：输入为空、API 返回失败（如密码错误）、网络异常，确保用户能明确知道问题所在。