從零開發 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 特性，結合前端基礎知識，就能快速實現各種實用工具。希望本文能幫助你邁出插件開發的第一步！
